Advance jquery-plugin

1,046 views

Published on

Presented by Nguyen Tuan Lam at CWI Team at EXO PLATFORM SEA

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,046
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Advance jquery-plugin

  1. 1. NGUYEN TUAN LAMCWI Team
  2. 2. Advance Jquery Plugins - Overview Jquery Plugin - How to create a Jquery plugin - How to apply, custom Jquery plugins - Share some knowledge to debug issues related javascript/jquery www.exoplatform.com - Copyright 2012 eXo Platform 2
  3. 3. Agenda- Introduce some common jquery plugins- Some rules of Jquery plugins development- How to create a Jquery plugin- How to custom Jquery plugins- Share some knowledge relatedjavascript/jquery www.exoplatform.com - Copyright 2012 eXo Platform 3
  4. 4. Overview some jquery plugin- Jquery plugin simple slideshow- Jquery plugin rotator slider- Jquery plugin modal/lightbox- Jquery plugin dropdown menu www.exoplatform.com - Copyright 2012 eXo Platform 4
  5. 5. Some rules of Jquery plugin development Naming your file Naming prefix for all related files with your pluginjquery.myplugin.jsjquery.myplugin.css Register in Jquery.fn(function($){ //Attach this new method to jQuery $.fn.myplugin = function(instanceSettings) { // code plugin in here... }})(jQuery); www.exoplatform.com - Copyright 2012 eXo Platform 5
  6. 6. Some rules of Jquery plugin development (Continue...) Register in Jquery.fn(Continue...) :(function($){ //Attach this new method to jQuery $.fn.extend({ // pluginname is myplugin – constructor should be myplugin myplugin: function() { } });})(jQuery); www.exoplatform.com - Copyright 2012 eXo Platform 6
  7. 7. Some rules of Jquery plugin development (Continue...) Jquery plugin name same the method constructor(function($){ $.fn.extend({ // pluginname is myplugin – constructor should be myplugin myplugin: function() { } });})(jQuery); www.exoplatform.com - Copyright 2012 eXo Platform 7
  8. 8. Some rules of Jquery plugin development (Continue...) Be aware, when use $ instead of Jquery, should be make sure it noConflictvar $ = jQuery.noConflict(); Recommend based on the fluent interface of Jquery plugin(function($){ $.fn.extend({ myplugin: function() { return this.each(function() { }); } });})(jQuery); www.exoplatform.com - Copyright 2012 eXo Platform 8
  9. 9. Some rules of Jquery plugin development (Continue...)Handle sets one or multiple elements(function($){ $.fn.extend({ myplugin: function() { return this.each(function() { //set for one or multiple elements }); } });})(jQuery); www.exoplatform.com - Copyright 2012 eXo Platform 9
  10. 10. Some rules of Jquery plugin development (Continue...) Make default options accessible from outsidefunction($){ $.fn.extend({ myplugin: function(options) { var defaults = { speed: 500 ; color: #ffff00; } var options = $.extend(defaults, options); return this.each(function() { var o = options; alert(o.color); }); } });})(jQuery);
  11. 11. Create a JQuery pluginSyntax:(function($){ //Attach this new method to jQuery $.fn.extend({ //This is where you write your plugins name pluginname: function() { //Iterate over the current set of matched elements return this.each(function() { //code to be here }); } });})(jQuery); www.exoplatform.com - Copyright 2012 eXo Platform 11
  12. 12. Create a Jquery plugin (continue...)Optional:(function($){ $.fn.extend({ //pass the options variable to the function myplugin: function(options) { //Set the default values, use comma to separate the settings, example: var defaults = { foo : bar } var options = $.extend(defaults, options); return this.each(function() { var o = options; alert(o.foo); }); } });})(jQuery); www.exoplatform.com - Copyright 2012 eXo Platform 12
  13. 13. Create a Jquery Plugin (Continue...)Another way to create a simple plugin :var myplugin = { init: function() { // initialize options, trigger on here }, overlay: function(options) { // Check options and call function with the option }, withoutMask : function(object, option) { // Create overlay popup without mask }, maskEffect : function(object) { // Cretae overlay popup with mask }} www.exoplatform.com - Copyright 2012 eXo Platform 13
  14. 14. Create a Jquery plugin (continue)Use :$(document).ready(function() { $(#selector).myplugin({foo: foobar}); });$(document).ready(function() { $(“.links”).click(function(e){ e.preventDefault(); // do something here }) ; }); www.exoplatform.com - Copyright 2012 eXo Platform 14
  15. 15. Custom a Jquery plugin- Use the unpack version of jquery plugin to custom.- See the comment description default options of jquery plugin to understand whatdoes it mean.- Try the function Constructor of the plugin to see initializations.- Find the function animate to see how it works- Custom jquery plugin follow your requirement. www.exoplatform.com - Copyright 2012 eXo Platform 15
  16. 16. Custom a Jquery plugin (Continue...)Example: Custom jquery scrollContent plugin:http://swip.codylindley.com/scrollContentDemo.html- Custom a scrollContent to simple jquery slideshowdemo by code- Custom a scrollContent to jquery sliderdemo by code- Custom animations and transitionsdemo by code www.exoplatform.com - Copyright 2012 eXo Platform 16
  17. 17. Some ways debug and fixed issues related javascript Use Firebug Use function Console.log() to see the output Use alert message of javascript Demo by code www.exoplatform.com - Copyright 2012 eXo Platform 17
  18. 18. Question & Answer www.exoplatform.com - Copyright 2012 eXo Platform 18

×