zoukankan      html  css  js  c++  java
  • jquery自定义控件拖拽框dragbox

    概述:

    在做项目的过程中遇到了拖拽框的使用,虽然网上有很多类似的插件,但总归不如自己的好使,于是就自己写了一个,在此总结下来,以便后用。


    效果:



    提供方法:

    setTitle(title):设置标题;

    setContent(content):设置内容;

    setsize(width, height):设置大小;

    hide():隐藏;

    show():显示;


    使用方法:

    创建对象

                var dragbox = $("#dragbox").DragBox({
                    title:"拖拽的框子",
                    content:"拖拽的框子",
                    200,
                    height:100
                });
    调用方法

    dragbox.setSize(250,200);
    var content = $("<h1 />").html("我是中国人!");
    dragbox.setContent(content);
    dragbox.show();

    代码:

    style.css

    body,html,.dragbox{
        font-size: 12px;
    }
    .dragbox .close{
        float: right;
        margin: 10px 8px;
         10px;
        height: 10px;
        background: url("img/iw_close.gif") no-repeat;
    }
    .dragbox .close:hover{
        cursor: pointer;
    }
    
    .dragbox .title{
        border: 1px solid #bbbbbb;
        padding:7px 10px;
        font-weight:bold ;
    }
    
    .dragbox .content{
        border: 1px solid #bbbbbb;
        border-top: none;
        padding: 7px 10px;
        box-shadow: 1px 1px 1px #dddddd;
    }

    jquery.custom.dragbox.js

    (function($){
        $.fn.DragBox = function(options){
            var defaults = {
                title:"dragbox",
                content:"dragbox",
                200,
                height:100
            };
            var options = $.extend(defaults,options);
            var _title = options.title;
            var _content = options.content;
            var _width = options.width,  _height = options.height;
    
            var _dragBox = $(this);
            _dragBox.css("width",_width+"px").addClass("dragbox");
            var _close = $("<div />").appendTo(_dragBox).addClass("dragbox close");
            var _titleBox = $("<div />").appendTo(_dragBox).addClass("dragbox title").html(_title);
            var _contentBox = $("<div />").appendTo(_dragBox).addClass("dragbox content").css("height",_height+"px").append(_content);
    
            var _x,_y;
            var _flag = false;
    
            _titleBox.on("mousedown",function(e){
                _flag = true;
                _titleBox.css("cursor","move");
                _x= e.pageX - parseInt(_dragBox.css("left"));
                _y= e.pageY - parseInt(_dragBox.css("top"));
                var docWidth = $(document).width(),docHeight = $(document).height();
                var boxWidth = _dragBox.width(),boxHeight = _dragBox.height();
                $(document).on("mousemove",function(e){
                    if(_flag){
                        var x = e.pageX-_x,y = e.pageY-_y;
                        _dragBox.css({"left":x+"px","top":y+"px"});
                    }
                });
                $(document).on("mouseup",function(e){
                    _flag = false;
                    _titleBox.css("cursor","default");
                });
            })
    
            _close.on("click",function(){
                _dragBox.fadeOut();
            })
    
            function show(){
                _dragBox.fadeIn();
            }
            function hide(){
                _close.click();
            }
            function setTitle(title){
                _titleBox.html(title);
            }
            function setContent(content){
                _contentBox.html(content);
            }
            function setSize(width,height){
                _dragBox.css("width",width+"px");
                _contentBox.css("height",height+"px");
            }
            this.show = show;
            this.hide = hide;
            this.setTitle = setTitle;
            this.setContent = setContent;
            this.setSize = setSize;
            return this;
        }
    })(jQuery);

    调用代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <style>
            #dragbox{
                position: absolute;
                top:50px;
                left: 50px;
            }
        </style>
        <script src="http://localhost/jquery/jquery-1.8.3.js"></script>
        <script src="js/jquery.custom.dragbox.js"></script>
        <script>
            $(function(){
                var dragbox = $("#dragbox").DragBox({
                    title:"拖拽的框子",
                    content:"拖拽的框子",
                    200,
                    height:100
                });
    
                $("#show").on("click",function(){
                    dragbox.setSize(250,200);
                    var content = $("<h1 />").html("我是中国人!");
                    dragbox.setContent(content);
                    dragbox.show();
                })
            });
        </script>
    </head>
    <body>
    <button id="show">显示拖拽框</button>
    <div id="dragbox"></div>
    </body>
    </html>







  • 相关阅读:
    C# ListView应用
    C# 使用System.Speech 进行语音播报和识别
    支付宝支付-扫码支付详解
    使用git提交项目到码云
    C# byte[]数组和string的互相转化 (四种方法)
    C#中字节数组byte[]、图片image、流stream,字符串string、内存流MemoryStream、文件file,之间的转换
    C# 结构体和List<T>类型数据转Json数据保存和读取
    对 JSON 数据进行序列化和反序列化
    win10与虚拟机fedora14使用samba文件共享
    serialVersionUID, ObjectInputStream与ObjectOutputStream类,Serializable接口,serialVersionUID的作用和用法
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539824.html
Copyright © 2011-2022 走看看