• Like
  • Save
Advance jquery-plugin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Advance jquery-plugin

  • 695 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
695
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. NGUYEN TUAN LAMCWI Team
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Question & Answer www.exoplatform.com - Copyright 2012 eXo Platform 18