代码: jquery 插件开发(自用插件)
http://www.imooc.com/learn/99 阿当大话西游之WEB组件 2016-4-19
jquery插件开发: 2016-3-1
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 讲解
http://isux.tencent.com/half-package-web-components-for-design.html 面向设计的半封装web组件开发 2016-4-6
这是个最简单的: (方法调用模式)
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var WG={
prov:11,
city:234,
test1:function(){
alert(this.city);
}
}
WG.test1();
</script>
多级类: 2016-3-17
这是类似json串的写法。 都是“名——值”的对应关系。 值可以是属性、方法,还可以是对象、数组————只要你愿意,把什么都可以塞进去
<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var WG={
city:110,
test1:function(){
alert(this.city);
},
base:{
city:110101,
test1:function(){
alert(this.city);
},
test2:function(){
alert(WG.city);
alert(WG.arr[2]);
}
},
arr:[555,444,333,222,111]
}
//-----------------------------
$("#button1").click(function(){
WG.test1();
});
$("#button2").click(function(){
WG.base.test1();
});
$("#test2").click(function(){
WG.base.test2();
}); });
</script>
<input type="button" value="一级" id="button1">
<input type="button" value="二级" id="button2">
<input type="button" value="test2" id="test2">
jQuery.fn.extend(object) ; 给jQuery对象添加方法。
jQuery.fn = jQuery.prototype = { }
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
// 2016-3-1 17:00 $(function(){ /*
插件:弹窗
调用方式:
//$('.js_design_pop').popLayer({timeout:223});//延时关闭
$('.js_design_pop').popLayer(); */
var popLayer = function (target, options) {
this.options = null;
this.target = null;
this.timeout = null;
this.init(target, options);
}
popLayer.prototype.init = function (target, options) {
this.options = options;
this.target = target;
this.timeout = null; target.fadeIn();
if(options) {
if (options.timeout !== undefined ) {
if(options.timeout > 0){
console.log(options.timeout); target.timer = setTimeout(function(){
target.hide();
$('.popmask').hide();
},options.timeout);
}
}
}
//创建遮罩层
var $mask = $('<div class="popmask"></div>');
if($('.popmask').length === 0){
$('body').append($mask);
}
$('.popmask').show(); //弹出层居中
var target = this.target;
target.css({
marginTop : -1 * (target.height() / 2),
marginLeft : -1 * (target.width() / 2)
}); //右上角关闭按钮
this.target.find('.close').click(function(){
$(this).parents('.poplayer').hide();
$('.popmask').hide();
});
//按ESC关闭所有弹层
$(document).keydown(function(ev){
if(ev.keyCode==27){
$('.poplayer').hide();
$('.popmask').hide();
}
});
/*
//弹出层拖拽
var target=this.target;
var canMove = false,Rx, Ry;
target.mousedown(function (event) {
Rx = event.pageX - (parseInt(target.css("left")) || 0);
Ry = event.pageY - (parseInt(target.css("top")) || 0);
target.css("position", "fixed").css('cursor', 'move');
canMove = true;
}).mouseup(function () {
canMove = false;
target.css('cursor', 'auto');
});
$(document).mousemove(function (event) {
if (canMove) { target.css({ top: event.pageY - Ry, left: event.pageX - Rx }); }
});*/ }
//关闭弹出层
popLayer.prototype.close = function () {
this.target.hide();
$('.popmask').hide();
} /*
//示例
//var a = new popLayer($('.js_collect_pop'),{timeout:2000});//延时关闭 var a = new popLayer($('.js_collect_pop'));
//var b = new popLayer($('.js_design_pop'));
//a.close();
});
..
...
代码: jquery 插件开发(自用插件)的更多相关文章
- jQuery插件开发——全屏切换插件
这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...
- jQuery插件开发,jquery插件
关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...
- 自己动手开发jQuery插件全面解析 jquery插件开发方法
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jquery插件开发
jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...
- jQuery插件开发(溢出滚动)
声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...
随机推荐
- [Leetcode 105]*前序后序遍历形成树
public TreeNode find(int[] preorder, int[] inorder,int j, int start, int end) { if (j > preorder. ...
- python笔记9-字符串操作
1.定义字符串 字符串有下标从0开始,用[]可以来取下标 2.字符串读取 字符串可以使用循环for,每次取一个取出,循环对象的每个元素 3.字符串修改-字符串不可修改 字符串是不可变变量,一旦定义就不 ...
- converting the moment tensor to strie-dip-rake
在多断层求解的试验中,用到了六个基本矩张量: 而显然,尚不能从图中直接读出strke,dip,rake的值,但有关资料给出了这六个基本矩张量的momet tensor: 而找到一个网站可以方便地将mo ...
- springcloud学习计划
后续参考学习spring cloud https://blog.csdn.net/forezp/article/details/70148833 https://github.com/forezp/S ...
- 我的代码-data pulling
# coding: utf-8 import datetimeimport timefrom sqlalchemy.engine import create_enginefrom sqlalchemy ...
- web-msg-send 学习 http://www.workerman.net/web-sender
WEB消息推送框架 web-msg-sender是一款web长连接推送框架,采用PHPSocket.IO开发,基于WebSocket长连接通讯,如果浏览器不支持WebSocket则自动转用comet推 ...
- 学习笔记TF033:实现ResNet
ResNet(Residual Neural Network),微软研究院 Kaiming He等4名华人提出.通过Residual Unit训练152层深神经网络,ILSVRC 2015比赛冠军,3 ...
- vim粘贴缩进问题
vim不支持直接从其他应用复制内容粘贴过来,而是模拟用户键盘输入来实现的,一般设置vim在换行时自动以上一行的的缩进为初始位置,这样就会导致复制过来的内容出现缩进错乱. set paste 解决粘贴乱 ...
- JS 点击复制
一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入 ...
- 第一章 HTML+CSS(中)
4.域元素(form表单.textarea文本域.fieldset域集合.input使用) 案例 表单 用户名: 密码: 昵称: 你喜欢的水果有? 苹果 黄瓜 香蕉 请选择性别 男 女 请选择你要的网 ...