自定义jquery插件

参考：http://blog.csdn.net/bao19901210/article/details/21540137/

自己看代码理解：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $.fn.smartTraffic = function(options) {
                var defualt = {
                    background:'red',
                    test : function() {
                        this.second();
                        //alert("action test function");
                    },
                    second : function() {
                        //alert("action second function");
                        tryMyself();
                    }
                };

                function tryMyself() {
                    alert("tryMyself");
                }
                var opt = $.extend(defualt, options||{});
                $(this).css({
                    backgroundColor: opt.background
                });
                opt.test();
            };

        })(jQuery);
        $(function() {
            $('#test').smartTraffic({background: 'yellow'});
        });
    </script>
</head>
<body>
<div id="test" style="width: 100px; height: 100px; border:1px blue solid;"></div>
</body>
</html>

默认效果：

修改效果：

posted @ 2016-04-02 12:01  居无常  阅读(211)  评论(0)  编辑  收藏  举报