jQuery 插件開發實例（一）

時間 2019-11-17

原文原文鏈接

一、js插件：my.js

//使用命名空間.使用方式：$.myJS.show();
jQuery.myJS = {
    show:function (){
        alert("show....");
    },
    hide:function (){
        alert("hide...");
    }
};

//使用全局函數.使用方式：$.testA();
jQuery.testA = function (){
    alert("global function....");
};
jQuery.testB = function (){
    alert("global function....");
};

//閉包結構：(function($){$.fn.extend({ pluginName1:function(){},pluginName2:function(){} })})(jQuery);
//對象級別,經過閉包.咱們在寫jQuery插件時,也能夠使用$這個別名,而不會與prototype引發衝突.使用方式：$("#test").pluginA();
(function($){
    $.fn.extend({
      pluginA:function(){
           alert("pluginA....");
      },    
      pluginB:function(){
           alert("pluginB....");
      }    
    });
})(jQuery);
//在JQuery名稱空間下申明一個名字，使用方式：$("#test").pluginC();
$.fn.pluginC = function() {
    alert("pluginC....");
};

//添加參數,使用方式：$("#test").pluginD();  或 $("#test").pluginD({attr1:'attribute3'});
$.fn.pluginD = function(options) {
    var defaults = {
        attr1:'attribute1',
        attr2:'attribute2'

    };
    var opts = $.extend(defaults,options);
    alert(opts.attr1);    
};

二、測試頁面：my.html

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="my.css" type="text/css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="my.js"></script>
    <script>
    $(function(){
        $("#show").click(function(){
            $.myJS.show();
        });
        $("#hide").click(function(){
            $.myJS.hide();
        });    
        $("#global").click(function(){
            $.testA();
        });    
        $("#pluginA").click(function(){
            $("#pluginA").pluginA();
        });    
        $("#pluginC").click(function(){
            $("#pluginC").pluginC();
        });    
        $("#pluginD").click(function(){
            //defult opts:$("#pluginD").pluginD();
            $("#pluginD").pluginD({attr1:'attribute3'});
        });    
    });

    </script>
</head>
<body>
    <div class='menu'>
        <button type="button" id="show">show</button>
        <button type="button" id="hide">hide</button>
        <button type="button" id="global">global</button>
        <button type="button" id="pluginA">pluginA</button>
        <button type="button" id="pluginC">pluginC</button>
        <button type="button" id="pluginD">pluginD</button>
    </div>
</body>    
</html>

三、my.css

button {
    width:100px;
    text-align:center;
    line-height:100%;
    padding-top:0.5em;
    padding-right:2em;
    padding-bottom:0.55em;
    padding-left:2em;
    font-family:Courier New,sans-serif;
    font-size:14px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    text-decoration:none;
    margin:0 10px 0 0;
    vertical-align:text-bottom;
    display:inline-block;
    cursor:pointer;
    zoom:1.2;  /*元素大小*/
    outline-width:medium;
    outline-color:invert;
    font-size-adjust:none;
    font-stretch:normal;

    border-top-left-radius:0.6em; /*設置圓角度數，越大表示越圓*/
    border-top-right-radius:0.6em;
    border-bottom-left-radius:0.6em;
    border-bottom-right-radius:0.6em;

    box-shadow:0px 1px 2px rgba(0,0,0,0.2);
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    color:#fefee9;

    border-top-color:#FFF; /*線的邊框顏色*/
    border-right-color:#FFF;
    border-bottom-color:#FFF;
    border-left-color:#FFF;

    border-top-width:1px;
    border-right-width:1px;
    border-bottom-width:1px;
    border-left-width:1px;
    border-top-style:solid;
    border-right-style:solid;
    border-bottom-style:solid;
    border-left-style:solid;
    background-image:none;
    background-attachment:scroll;
    background-repeat:repeat;
    background-position-x:0%;
    background-position-y:0%;
    background-size:auto;
    background-origin:padding-box;
    background-clip:padding-box;
    background-color:#f78d1d;
}

button:hover {
    background: #f47c20;
}

.menu {
    margin:50px 0 0 50px;

}

四、補充：一個在線製做按鈕樣式的網站:http://buttoncssgenerator.com 可在線生成按鈕cssjavascript