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
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、补充:一个在线制作按钮样式的网站: 可在线生成按钮css