JQ插件扩展示例

最新推荐文章于 2019-04-09 15:22:39 发布

原创最新推荐文章于 2019-04-09 15:22:39 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jq #插件

jquery 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{width: 100px; height: 100px; background: red;position: absolute}
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        //$.extend():扩展工具方法下面的插件形式  $.xxx()
        //$.fn.extend()：扩展到JQ对象下的插件形式 $().xx()
        //去左边空格插件扩展
        $.extend({
            leftTrim:function (str) {
                return str.replace(/^\s+/,'');
            }
        });
        //拖动插件扩展
        $.fn.extend({
            drag: function () {
                var disX = 0;
                var disY = 0;
                var _this = this;
                this.mousedown(function (ev) {
                    disX = ev.pageX - $(this).offset().left;
                    disY = ev.pageY - $(this).offset().top;
                    
                    $(document).mousemove(function (ev) {
                        _this.css('left', ev.pageX - disX);
                        _this.css('top', ev.pageY - disY);
                    });
                    
                    $(document).mouseup(function (ev) {
                       $(this).off();
                    });
                    return false;
                });
        }
        });
    </script>
    <script>
        /*var str = ' hello ';
        alert('('+$.leftTrim(str)+')');*/
        $(function () {
            $('#div1').drag();
        });
    </script>
</head>
<body>
<div id="div1">这个div可以拖动</div>
</body>
</html>