文档章节

jQuery 插件开发实例(一)

孟飞阳
 孟飞阳
发布于 2016/06/20 10:11
字数 462
阅读 22
收藏 0
点赞 0
评论 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

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 202
博文 923
码字总数 537538
作品 5
朝阳
个人站长
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中 $.fn的用法

jquery $.fn $.fx是什么意思 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个...

-wangming-
2015/02/05
0
0
jquery.fn.extend与jquery.extend

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

柒月-小妖精
2013/09/06
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
0
1
jquery中extend用法

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

woaita1314azsls
07/02
0
0
jquery中extend和fn.extend的使用

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

行者PHPer
2012/05/29
0
0
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
10个帮助你创建超棒jQuery插件的小技巧

10个帮助你创建超棒jQuery插件的小技巧 日期:2012/02/29 来源:GBin1.com 这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件,很多开发人员都开发了很多...

gbin1
2012/02/29
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
jQuery(function(){})与(function(){})(jQuery)的区别

开发jQuery插件时总结的一些经验分享一下。 一、先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); 意义为在DOM加载完毕后执行了ready()方法。 二、再看 (functio...

xiahuawuyu
2012/07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

回想过往,分析当下,着眼未来

好久没有真正的在纸质笔记本上写过东西了,感觉都快不会写字了,笔画都不知道怎么写了。接下来就说说咱们的正事。 2018年7月22日,我做了一个决定,那就是去参加安全培训(可能是我职业生涯中...

yeahlife
43分钟前
4
0
关于工作中的人际交往

关于工作中的人际交往 Intro 写了篇发泄情绪的博客,但不会发布出来。 大概就是,要么忍,要么滚。 以及一些不那么符合社会主义核心价值观,不满于大资本家与小资本家剥削的废话。

uniqptr
48分钟前
0
0
springMVC的流程

1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3.处理器映射器根据请求url找到具体的处理器,生成处理器对象及处理器拦截器(...

JavaSon712
今天
0
0
大数据教程(3.2):Linux系统软件安装之自动化脚本

博主前面文章有介绍过软件的安装,可以帮助IT人员顺利的完成功能软件安装;但是,对于我们运维人员或者需要管理软件安装的项目经理来说,有些应用一次行需要搭建很多台相同的软件环境(如tom...

em_aaron
今天
0
1
Spring Boot 2.0.3 JDBC整合Oracle 12

整合步骤 1. Oracle驱动引入 Oracle驱动一般不能通过maven仓库直接下载得到,需自行下载并导入到项目的lib目录下,建议通过如下pom依赖引入下载的Oracle驱动 <!-- Oracle 驱动 -->...

OSC_fly
今天
0
0
java 8 并行流 - 1

下面创建一个并行流,与顺序流 //顺序流Stream.iterate(0L, i -> i + 1) .limit(Integer.MAX_VALUE) .reduce(0L, Long::sum);//并行流Stream.iterate(0L, i -> i......

Canaan_
今天
0
0
数据结构与算法5

二分法采用向下取整的方法 使用有序数组的好处是查找的速度比无序数组快的多,不好的方面是因为要将所有靠后的数据移开,所以速度较慢,有序数组和无序数组的删除操作都很慢。 有序数组在查找...

沉迷于编程的小菜菜
昨天
1
1
SpringBoot | 第十一章:Redis的集成和简单使用

前言 上几节讲了利用Mybatis-Plus这个第三方的ORM框架进行数据库访问,在实际工作中,在存储一些非结构化或者缓存一些临时数据及热点数据时,一般上都会用上mongodb和redis进行这方面的需求。...

oKong
昨天
5
0
对基于深度神经网络的Auto Encoder用于异常检测的一些思考

一、前言 现实中,大部分数据都是无标签的,人和动物多数情况下都是通过无监督学习获取概念,故而无监督学习拥有广阔的业务场景。举几个场景:网络流量是正常流量还是攻击流量、视频中的人的...

冷血狂魔
昨天
0
0
并发设计之A系统调用B系统

A-->B A在发送请求之前,用乐观锁,减少对B的重复调用,这样一定程度上是幂等性。 比如A系统支付功能,要调用B系统进行支付操作,但是前端对"支付"按钮不进行控制,即用户会不断多次点击支付...

汉斯-冯-拉特
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部