您好,欢迎访问一九零五行业门户网

jquery自定义插件开发之window的实现过程_jquery

本例子实现弹窗的效果:如果亲感觉效果还不错,请继续往下阅读。
1、jquery.show.js
/** 开发者:lzugis* 开发时间:2014年6月10日* 实现功能:点击在鼠标位置显示div* 版本序号:1.0 */(function($){ $.fn.showdiv = function(options){var defaults = {};var options = $.extend(defaults, options);var showdiv=$(this);var close, title, content;close=$( ); title=$( ); content=$( ); showdiv.html(); showdiv.append(close); showdiv.append(title); showdiv.append(content); close.html(x); title.html(options.title); content.html(options.content); showdiv.css(display,block); showdiv.css(position,absolute); showdiv.css(left,($(window).width()-options.width)/2+px); showdiv.css(top,($(window).height()-options.height)/2+px); showdiv.css(width,options.width); showdiv.css(height,options.height); close.bind(click,function(){ showdiv.css(display,none); }); }; })(jquery);
2、jquery.showdiv.css
body div{font-size:12px;text-align:center;}#container{background-color:#ccc;border:1px solid #000;width:1024px;height:600px;}#showdiv{background-color:#ff0;width:100px;height:100px;display:none;z-index:99;}.title{padding:10px;background:#f39;font-weight:bold;text-align:center;color:#fff;}.close{margin:5px;position:absolute;right:0px;top::0px;padding:5px;color:#000;background:#fff;}.close:hover{cursor:pointer;background:#ccc;}.content{text-align:left;padding:10px;}
3、demo.html

以上所述是小编给大家介绍的jquery自定义插件开发之window的实现过程,希望对大家有所帮助!同时也非常感谢大家对脚本之家网站的支持!
其它类似信息

推荐信息