jQuery插件练习

最新推荐文章于 2018-05-24 21:30:23 发布

greatverve

最新推荐文章于 2018-05-24 21:30:23 发布

阅读量800

点赞数

分类专栏： JS.JQuery 文章标签： jquery插件 function button input filter border

本文链接：https://blog.csdn.net/greatverve/article/details/3596996

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

简化后的插件：

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'><ul><li>提示</li></ul><input type='button' value='close' οnclick='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'><ul><li>提示</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;
 }
 

end

greatverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件练习

简化后的插件：SimplePlugin.htm：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="t
复制链接

扫一扫

专栏目录