1、js插件：my.js //使用命名空间.使用方式：$.myJS.show();jQuery.myJS = { show:function (){ alert("show....
1、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); };2、测试页面：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>3、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;}4、补充：一个在线制作按钮样式的网站:http://buttoncssgenerator.com 可在线生成按钮css
