博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 插件开发实例(一)
阅读量:6689 次
发布时间:2019-06-25

本文共 2778 字,大约阅读时间需要 9 分钟。

hot3.png

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

转载于:https://my.oschina.net/u/2391658/blog/694910

你可能感兴趣的文章
bugzilla安装笔记
查看>>
记录linux设置定时执行python脚本以及输出到指定文件
查看>>
我的友情链接
查看>>
Hadoop 2.0(YARN/HDFS)学习资料汇总
查看>>
15.汉字的繁简转换 C#
查看>>
Confluence 6 如何考虑设置一个空间的主页
查看>>
hadoop命令执行hbase应用jar包时的环境变量加载问题
查看>>
AndroidTV 网络机顶盒 Wi-Fi设置
查看>>
[精讲-5]BitLocker
查看>>
awk常用注意事项--awk如何引用外部变量
查看>>
mysql5.7制作rpm包spec文件
查看>>
mysq基础笔记(sql语句)
查看>>
XenMobile学习文章总结
查看>>
Android开发者的混淆使用手册
查看>>
Telnet服务及协议
查看>>
SpringMVC深度探险
查看>>
关于vs2010巨慢(cpu占用高)的几种解决方式
查看>>
简单3步,轻松集成Testlink和MantisBT
查看>>
Nginx 教程- 获取真实IP模块 - http_realip_module
查看>>
SQL语句教程(04) AND OR
查看>>