代码: 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 108]有序数组转二叉搜索树Convert Sorted Array to Binary Search Tree
[题目] 给出的升序排序的数组,个数必为奇数,要求形成二叉搜索(平衡)树. [思路] 辅助函数fun,[0,len]=>[0,mid-1]+[mid+1,len]. 当left>right ...
- leetcode python 008
## 字符串转化为整数## 懒得自己做int0=63435435print(int(int0))
- TensorFlow Training 优化函数
tf.train 提供了一组帮助训练模型的类和函数. 优化器 优化器基类提供了计算渐变的方法,并将渐变应用于变量.子类的集合实现了经典的优化算法,如 GradientDescent和Adagrad. ...
- ChinaCock界面控件介绍-TCCBarcodeCreator
条码生成器,可以生成各种条码,包括二维码.这是一个不可视控件.用起来依旧简单. 属性说明: BarCodeColor:生成条码的颜色 BarcodeFormat:生成条码的类型,支持的条码类型: Bo ...
- vue 使用vux封装的微信分享
main.js引入 import {WechatPlugin} from 'vux' Vue.use(WechatPlugin) 公共的jswxShare.js import Vue from 'vu ...
- gitlab修改默认端口
部署gitlab的时候,一启动,发现80和8080端口已经被占用,无奈,只得先将监听80端口的nginx和监听8080端口的jenkins停止.这会儿有空,琢磨一下如何修改gitlab的默认端口. 修 ...
- 基于scrapy-redis分布式爬虫(简易)
redis分布式部署 1.scrapy框架是否可以自己实现分布式? - 不可以.原因有二. 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器无法分配start_urls ...
- django中利用FastDFS来上传图片的流程
好处:海量问题,存储容量扩展方便,文件内容重复并且对静态文件的访问也有了提升等.
- 磁盘操作系统 cmd命令
DOS CMD :磁盘操作系统 不区分大小写 **cd \ 根目录 cls 清空屏幕 dir 显示目录 d: 进入D盘 cd 进入目录命令 dir 查看当前目录的文件与目录 del 删除文件 del ...
- SQL-记录查询篇-009
在学习记录查询之前,学习一些关键字的使用: 1.逻辑运算符:and . or . not .is null select * from table_name where id>2 and ...