插件扩展实例

最新推荐文章于 2024-08-04 16:33:59 发布

chuansheng8940

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量131

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/strip/blog/737596

版权

jquery插件扩展实例

<!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>

转载于:https://my.oschina.net/strip/blog/737596