文档章节

jQuery 插件开发实例(一)

孟飞阳
 孟飞阳
发布于 2016/06/20 10:11
字数 462
阅读 25
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 208
博文 981
码字总数 546304
作品 5
朝阳
个人站长
私信 提问
jquery插件开发所需要的方法

jquery插件开发所需要的方法 摘要:插件是一个好东西,它是一个完全独立的模块。不会受到其它模块的影响,可以随时引用,不会冲突。维护起来方便简单,一些比较通用的独立模块,我们都倾向于...

昙花一现
2018/01/17
0
0
jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给...

crazyinsomnia
2010/01/10
1K
1
jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn....

i33
2012/06/29
0
0
jquery中extend用法

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。 jQuery便是一个封装得非常好的类,比...

woaita1314azsls
2018/07/02
0
0
8款实用jQuery插件实例欣赏及源码下载

jQuery的确是一款非常轻巧强大的JS框架,相信每一位WEB开发者都非常喜欢他。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插...

yykj
2012/12/12
5
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
9
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
3
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
5
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部