zoukankan      html  css  js  c++  java

  • 一个弹出层插件

    弹出层插件，现在用的是越来越多，网上也有很多开源的类似插件，功能都很强大，于是我也模仿了一个，原来其实很简单，无非是创建节点，显示该节点，如果支持可拖拽，那就在对象上加上mousedown,mousemove,mouseup这三个事件，修改坐标值就OK.下面就是我的一个实现

    js部分

       /*
   * title:@谈出层插件
   * autor:@aliang
   * 2012-12-20
   * */
   $(function(){
       $.fn.dialog=function(options){
        var defaults={
            Event:"click",
            title:"title",
            type:"text",
            content:"content",
            500,
            height:400,
            isAuto:false,
            closeId:"closeId",
            _move:false,    // 弹出层移动标记
            drag:true       //是否支持拖动
        }
        var _x,_y;
        var options= $.extend(defaults,options);
        $("body").prepend("<div class='zhezhao' id='fb"+options.title+"'></div><div class='dialog' id='"+options.title+"'><div class='title' id='t"+options.title+"'><h4></h4><span class='close' id='c"+options.title+"'>X</span></div><div class='content'></div></div>");
        /*绑定对象*/
         $bg=$("#fb"+options.title+"")  //遮罩层
        $this=$(this);
        $title=$("#t"+options.title+"");  //谈出层拖动对象
        $name=$("#"+options.title+" h4")
        $close=$("#c"+options.title+"");    //谈出层关闭按钮对象
        $content=$("#"+options.title+" .content") //谈出层内容对象
        $dialog=$("#"+options.title+"");     //弹出层对象
        /*初始化*/
           $dialog.css({left:(($(document).width())/2-(parseInt(options.width)/2)-5)+"px",top:((document.documentElement.clientHeight)/2-(parseInt(options.height)/2))+"px",options.width,height:options.height});
           $content.css({height:parseInt(options.height)-30})
           $dialog.css({"z-index":1001})
           $name.html(options.title);
           $content.html(options.content);
           $dialog.hide();
           $bg.hide();
        /*绑定事件*/
         $close.live("click",function(){
             $bg.hide();
           $dialog.hide();
         });
         $title.live("mousedown",function(e){

             if(!options.drag) return;
             options._move=true;
            _x= e.pageX-parseInt($dialog.css("left"))//获取事件坐标距谈出层左边的距离
            _y= e.pageY-parseInt($dialog.css("top")) //获取事件坐标距谈出层头上的距离
             $dialog.css({"z-index":2000})
             this.setCapture && this.setCapture();
         });
         $(document).live("mousemove",function(e){
            if(options._move){
               var x= e.pageX-_x;
               var y= e.pageY-_y;
                var maxX=document.body.clientWidth-$dialog.get(0).clientWidth;
                var maxY=document.body.clientHeight-$dialog.get(0).clientHeight;
                x=(x<=0)?0:x;
                y=(y<=0)?0:y;
                x=(x>=maxX)?maxX:x;
                y=(y>=maxY)? maxY:y;
                console.log("X:"+x,"Y:"+y)
                console.log(document.body.clientHeight )
               $dialog.css({left:x,top:y});
            }
         });
         $(document).live("mouseup",function(){
             options._move=false
             $dialog.css({"z-index":101})
             this.releaseCapture && this.releaseCapture();
         })
        $(this).live("click",function(){
            if($dialog.size()>0) return
            else $dialog.show();
        })

      $(this).click(function(){
           $bg.show();
           $dialog.show();
      })

       }
   })

    css部分：

    .dialog{position: absolute;border: 5px solid #d08686 ;}
.dialog .title{background: #d08686;height: 23px;padding: 7px 10px 0;color: #ffffff;cursor: move;}
.dialog .title h4{float: left; padding: 0; margin: 0;font-size: 14px;line-height: 16px; font-weight: bold;display: inline;}
.dialog .title span{float: right;cursor: pointer;font-size: 20px; font-weight: bold; color: #ffffff; margin-top: -5px;}
.dialog .content{background: #ffffff;}
.zhezhao{  100%;height: 100%;background: black; position: fixed !important;position: absolute;top: 0;left: 0;filter: alpha(opacity=0.2);opacity: 0.2;z-index: 100;}

    html部分:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html,body{ height:100%}
    </style>
    <link rel="stylesheet" href="../css/dialog.css">
</head>
<body>

<input type="button" value="test" id="test">
<script src="../js/jquery-1.8.0.js"></script>
<Script src="../js/dialog.js"></Script>
<script>
    $(function(){
        $("#test").dialog({
            Event:"click",
            title:"我是一个谈出层",
            type:"text",
            content:"<div><input type='button' value='test'></div>",
            500,
            height:300,
            isAuto:false,
            closeId:"closeId",
            drag:true

        });
    })

</script>
</body>
</html>

    实现：

    是不是很简单，如有疑问或建议请加qq:531294008，注明aliangDialog便可。
  • 相关阅读:
    JS实现checkbox全选功能
    JS回车检索
    MockServer 之postman
    Locust性能测试
    Bitter.Core系列二：Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore ORM 之数据库连接
    MSSQL 经典语句查看表字典结构语句
    使用 Path.Combine 构建跨平台文件路径拼接
    迁移备份WSL2下的子系统/迁移Windows 10 Docker Data目录/踩坑记录
    MSSQL 20212 高可用集群方案2012的AlwaysOn高性能组件
    MSSQL 经典SQL 语句WITH递归
  • 原文地址：https://www.cnblogs.com/haohaoday/p/2828101.html
Copyright © 2011-2022 走看看