javascript jQuery插件练习

相由心生而已吗

相由心生而已吗

2016-02-19 16:06

下面图老师小编跟大家分享一个简单易学的javascript jQuery插件练习教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!
简化后的插件:
SimplePlugin.htm:
代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
title简化后的插件/title
script type="text/ecmascript" src="../js/jquery-1.2.6.js"/script
script type="text/ecmascript" src="../js/jquery.SimplePlugin.js"/script
script type="text/ecmascript"
$(function() {
$("input").click(function(){
$("body").dialog();
})
});
function f(){
$("body").find("#MaskID").hide(1000);
$("body").find("#DivDialog").hide(1000);
}
/script
/head
body
input type="button" value="hi plugin" /
/body
/html


jquery.SimplePlugin.js:

代码如下:
$.fn.dialog=function(){
this.MaskDiv=function()//自定义一个函数
{
//创建遮罩背景,这里没有设置透明度,为了简单。zIndex决定了遮罩。
$("body").append("div ID=MaskID/div");
$("body").find("#MaskID").width("888px").height("666px")
.css({position:"absolute",top:"0px",left:"0px",background:"#ccc",zIndex:"10000"});
}
this.MaskDiv();//调用自定义函数。
$("body").append("div ID=DivDialog style='display:none'ulli提示/li/ulinput type='button' value='close' onclick='f();' //div");
var obj=$("body").find("#DivDialog");
obj.width("200px").height("200px");
obj.css({position:"absolute",top:"100px",left:"100px",background:"#FFCC66",zIndex:"10001"}).show("slow");

return this;
}

完整的插件:
myplugin.html:

代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title练习jQuery插件/title
script type="text/ecmascript" src="../js/jquery-1.2.6.js"/script
script type="text/ecmascript" src="../js/jquery.firstplugin.js" /script
script type="text/ecmascript" src="../js/jquery.dialog.js"/script
style type='text/css'
*{padding:0; margin:0} /*此行样式一定要加,不然可能会引起BUG出现。*/

#MyDiv{
position:absolute;
width:200px;
height:200px;
font-size:12px;
background:#666;
border:1px solid #000;
z-index:10001;
display:none;
text-align:center;
}
/style
script type="text/ecmascript"
$(document).ready(function() {
$("input").click(function(){
$("body").dialog();
})
})
/script
/head

body
div
input type="button" value="hi plugin" /
/div
/body
/html

jquery.dialog.js:
代码如下:
// JScript 文件
$.fn.dialog=function(){
this.MaskDiv=function()//自定义一个函数
{
var wnd = $(window), doc = $(document);
if(wnd.height() doc.height()){ //当高度少于一屏
wHeight = wnd.height();
}else{//当高度大于一屏
wHeight = doc.height();
}
//创建遮罩背景
$("body").append("div ID=MaskID/div");
$("body").find("#MaskID").width(wnd.width()).height(wHeight)
.css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000"});
}
this.sPosition=function(obj)//自定义一个带参数的函数
{
var MyDiv_w = parseInt(obj.width());
var MyDiv_h = parseInt(obj.height());

var width =parseInt($(document).width());
var height = parseInt($(window).height());
var left = parseInt($(document).scrollLeft());
var top = parseInt($(document).scrollTop());

var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距
return Array(Div_topposition,Div_leftposition);
}
this.MaskDiv();
$("body").append("div ID=DivDialog style='display:none'ulli提示/li/ul/div");
var obj=$("body").find("#DivDialog");
obj.width("200px").height("200px");
PosT=this.sPosition(obj);
obj.css({position:"absolute",top:PosT[0]+"px",left:PosT[1]+"px",background:"#FFCC66",zIndex:"10001"}).show("slow");
return this;
}
展开更多 50%)
分享

猜你喜欢

javascript jQuery插件练习

Web开发
javascript jQuery插件练习

jQuery 位置插件

Web开发
jQuery 位置插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

10个超棒的jQuery/JavaScript表单插件推荐

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
10个超棒的jQuery/JavaScript表单插件推荐

jQuery select控制插件

Web开发
jQuery select控制插件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery知识:20个jQuery教程+11个jQuery插件

Web开发
JQuery知识:20个jQuery教程+11个jQuery插件

Javascript 验证表单插件

Web开发
Javascript 验证表单插件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jQuery 各种浏览器下获得日期区别

jQuery 各种浏览器下获得日期区别

IE与firefox之jquery用法区别

IE与firefox之jquery用法区别
下拉加载更多内容 ↓