日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
自己動(dòng)手開發(fā)jQuery插件

因?yàn)楣ぷ餍枰?，所以這幾天琢磨了一下關(guān)于jQuery插件開發(fā)的問題，經(jīng)過一天鏖戰(zhàn)，終于完成自己動(dòng)手做的***個(gè)jQuery插件，對(duì)于俺這種見了css就頭痛的人來說，一天時(shí)間8小時(shí)，保守估計(jì)有5個(gè)小時(shí)在弄css(我css文盲級(jí)別，形容得還不夠貼切，如果說文盲不會(huì)寫字，只會(huì)說話，那我是連話都不會(huì)說的級(jí)別。)，好了，廢話少說，切入正題。

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),南江網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:南江等地區(qū)。南江做網(wǎng)站價(jià)格咨詢:13518219792

推薦專題：jQuery從入門到精通 jQuery給力插件大閱兵

首先要了解jQuery插件開發(fā)分兩種，1.類級(jí)別的插件開發(fā)。2.對(duì)象級(jí)別插件開發(fā)。

什么? 你居然問什么是類級(jí)別和什么是對(duì)象級(jí)別?

類級(jí)別你可以理解為拓展jquery類，最簡(jiǎn)單的$.post(...);

對(duì)象級(jí)別則可以理解為基于對(duì)象的拓展，如$("#Me").fuck(...); 這里這個(gè)fuck呢，就是基于對(duì)象的拓展了。點(diǎn)到即止，想深入的童鞋請(qǐng)花RMB買書Or網(wǎng)上查資料,書上比俺介紹得更清楚。so...Next...

至于您要寫一個(gè)什么東東呢?就輪到前面提到的類級(jí)別和對(duì)象級(jí)別的造型登場(chǎng)了，因?yàn)檫@寫法大千世界無奇不有，千奇百怪，各有千秋，寫法規(guī)范也不統(tǒng)一，俺就按俺覺得最簡(jiǎn)便的方法寫了，Hava a Look!

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.      
    3.

類級(jí)別寫法：jQuery.插件名稱=function(){.....};

調(diào)用方法：$.插件名稱();

暴露參數(shù)這些東西，先暫時(shí)不提到。一步步來..

上面這玩意兒呢，彈出對(duì)話框插件，這么說，是先理解要緊，什么是插件，什么是類級(jí)別的插件?來看一下頁面啟動(dòng)的效果，上圖上真相，你懂的..

來比較一下對(duì)象級(jí)別插件寫法：Go on!

 
 
 
    
  
  
  
  1. (function($) {  
    2. 
  
  
  
  2. $.fn.pluginName = function() {  
    3. 
  
  
  
  3. // 代碼區(qū)域。  
    4. 
  
  
  
  4. };  
    5. 
  
  
  
  5. })(jQuery); 
    6.

對(duì)象級(jí)別寫法：$.fn.插件名稱 = function(){};多了一個(gè)fn,沒錯(cuò)，是fn! fn!!! fn!!!

調(diào)用方法：$("#Me").插件名稱();

稍微說一下，$.插件名稱();是通過$訪問調(diào)用jquery中的全局函數(shù)，直接可以通過jquery或者美元$調(diào)用，從而實(shí)現(xiàn)一些效果。

$("#Me").插件名稱();是通過一個(gè)jquery對(duì)象所調(diào)用的一個(gè)函數(shù)，什么? 你居然發(fā)現(xiàn)這個(gè)寫法外面一層多了個(gè)東東? 阿? 你問怎么回事?

The First,我們必須先了解一下閉包這個(gè)玩意兒的造型(框架)，Look!，這就是傳說中用來開發(fā)jQuery插件的東東

 
 
 
    
  
  
  
  1. （function($){  
    2. 
  
  
  
  2.     //這里是您寫東東的地方，不收地稅，工商稅，個(gè)人所得稅等..放心大膽使用。  
    3. 
  
  
  
  3. }）(jQuery); 
    4.

(function($){ //這里是您寫東東的地方，不收地稅，工商稅，個(gè)人所得稅等..放心大膽使用。})(jQuery);

這里function 后面的$參數(shù)，形參，在函數(shù)體內(nèi)部的使用呢，$就是當(dāng)前您當(dāng)前整在調(diào)用該函數(shù)的對(duì)象了，這樣就能干很多事了....你懂的。

用一個(gè)tabs面板切換插件來詳細(xì)演示一下jQuery對(duì)象級(jí)別插件的具體開發(fā),直接上代碼。

首先上HTML：

 
 
 
    
  
  
  
  1.   
    2. 
  
  
  
  2.   
    3. 
  
  
  
  3.   
    4. 
  
  
  
  4.       
    5. 
  
  
  
  5.       
    6. 
  
  
  
  6.       
    7. 
  
  
  
  7.       
    8. 
  
  
  
  8.       
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10.   
    11. 
  
  
  
  11.       
    12. 
  
  
  
  12.       
    13. 
  
  
  
  13.           
    14. 
  
  
  
  14.         
        
  
  
  
    •             
    • 選項(xiàng)1
      •   
  
  
  
    •             
    • 選項(xiàng)2
      •   
  
  
  
    •             
    • 選項(xiàng)3
      •   
  
  
  
    •         
      
    15. 
  
  
  
  15.           
    16. 
  
  
  
  16.         11111
 
  •         22222
    •  
  •         33333
    •  
  •     
    •  
  •  
  •  

    • 再上插件源碼：

     
 
 
      
  
  
  
    1. /*  
      2. 
  
  
  
    2. tabs面板插件，版本1.0(2011.08.24)  
      3. 
  
  
  
    3. 用法：$("#myDiv").tabs({switchingMode:"click"});  
      4. 
  
  
  
    4. 參數(shù)解釋：switchingMode是面板切換的模式，如switchingMode:"mouseover"則鼠標(biāo)移動(dòng)至選項(xiàng)卡切換面板,默認(rèn)為click。  
      5. 
  
  
  
    5. 整體tabs骨架不變，依然是常用的結(jié)構(gòu)如下：  
      6. 
  
  
  
    6.  
      7. 
  
  
  
    7.     選項(xiàng)卡區(qū)域ul  
      8. 
  
  
  
    8.     
         
  
  
  
      •         
      • 選項(xiàng)1
        •  
  
  
  
      •         
      • 選項(xiàng)2
        •  
  
  
  
      •     
       
      9. 
  
  
  
    9.     面板區(qū)域div  
      10. 
  
  
  
    10.     面板1
     
  •     面板2
    •  
  •  
  •  
  • 樣式：此樣式為默認(rèn)無任何效果樣式，可根據(jù)需要修改插件樣式。  
  •  
  • */  
  • ; (function ($) {  
  •     $.fn.tabs = function (options) {  
  •         var defualts = { switchingMode: "click" };  
  •         var opts = $.extend({}, defualts, options);  
  •         var obj = $(this);        
  •         var clickIndex = 0;  
  •         obj.addClass("tabsDiv");  
  •         $("ul li:first", obj).addClass("tabsSeletedLi");  
  •         $("ul li", obj).not(":first").addClass("tabsUnSeletedLi");  
  •         $("div", obj).not(":first").hide();  
  •         $("ul li", obj).bind(opts.switchingMode, function () {  
  •             if (clickIndex != $("ul li", obj).index($(this))) {  
  •                 clickIndex = $("ul li", obj).index($(this));  
  •                 $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");  
  •                 $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");  
  •                 var divid = $("a", $(this)).attr("href").substr(1);  
  •                 $("div", obj).hide();  
  •                 $("#" + divid, obj).show();  
  •             };  
  •         });  
  •     };  
  • })(jQuery); 

    • 接下來上插件樣式：

     
 
 
      
  
  
  
    1. body{background-color: black;}          
      2. 
  
  
  
    2. .tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}  
      3. 
  
  
  
    3. .tabsDiv ul{width: 500px;height: 20px;list-style: none;background-color: black;margin-bottom: 0px;margin: 0px;padding: 0px;}  
      4. 
  
  
  
    4. .tabsDiv div{width: 500px;height: 330px;background-color: white;}  
      5. 
  
  
  
    5. .tabsSeletedLi{width: 100px;height: 20px;background-color: white;float: left;text-align: center;}  
      6. 
  
  
  
    6. .tabsSeletedLi a{width: 100px;height: 20px;color: black;}  
      7. 
  
  
  
    7. .tabsUnSeletedLi{width: 100px;height: 20px;background-color: black;float: left;text-align: center;}  
      8. 
  
  
  
    8. .tabsUnSeletedLi a{width: 100px;height: 20px;color: white;} 
      9.

    最終效果圖，你懂的：

    原文：http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html

    【編輯推薦】

    1. 8月易用jQuery插件推薦:jqPlot畫圖插件
    2. jQuery***實(shí)踐
    3. 50個(gè)必備的實(shí)用jQuery代碼段
    4. jQuery是如何工作的
    5. jQuery設(shè)計(jì)思想

    名稱欄目：自己動(dòng)手開發(fā)jQuery插件
    URL地址：http://www.dlmjj.cn/article/cdhieio.html