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 插件开发(自用插件)的更多相关文章

  1. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

  2. jQuery插件开发,jquery插件

    关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...

  3. 自己动手开发jQuery插件全面解析 jquery插件开发方法

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  4. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  5. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  6. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  7. jQuery插件开发精品教程,让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  8. jquery插件开发

    jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...

  9. jQuery插件开发(溢出滚动)

    声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...

随机推荐

  1. js对json字符串和json对象的转换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. firstPage

    自己写的科比的一个简单介绍的网页,画面,布局还是太垃圾了,图片放大缩小标签不知道,简直难受. <!DOCTYPE html><html> <head> <me ...

  3. python小知识——__name__ = '__main__' 的作用

    很多新手刚开始学习python的时候经常会看到python 中__name__ = \'__main__\' 这样的代码,可能很多新手一开始学习的时候都比较疑惑,python 中__name__ = ...

  4. 面向对象 反射 和item系列和内置函数和__getattr__和__setattr__

    反射 反射主要用在网络编程中, python面向对象的反射:通过字符串的形式操作对象相关的属性.python的一切事物都是对象. 反射就是通过字符串的形式,导入模块:通过字符串的形式,去模块寻找指定函 ...

  5. nginx的变量参数 详解

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  6. 重启HA集群NameNode无缘无故挂掉

    重启HA集群后,两个NameNode无缘无故挂掉,查看日志时显示错误如下: 原因:journalnode的端口是8485,默认情况下是先NameNode启动后再启动journalnode,如果在Nam ...

  7. mysql建表规范及注意事项

    表设计规范 1.库名,表名,字段名必须使用小写字母,“-”分割 ,长度不得超过12字符 , 要见名识意 : 2.建议使用Innodb存储引擎 (1)什么是存储引擎 不同的技术及配套的相关功能就是存储引 ...

  8. Mac添加环境变量方法

    一句话总结:找到paths文件编辑一下把要加路径写进去 转载注明出处http://www.cnblogs.com/billyrun/p/8631165.html 1.终端输入命令open /etc 开 ...

  9. hdu5007 Post Robot AC自动机

    DT is a big fan of digital products. He writes posts about technological products almost everyday in ...

  10. 学习笔记TF044:TF.Contrib组件、统计分布、Layer、性能分析器tfprof

    TF.Contrib,开源社区贡献,新功能,内外部测试,根据反馈意见改进性能,改善API友好度,API稳定后,移到TensorFlow核心模块.生产代码,以最新官方教程和API指南参考. 统计分布.T ...