码迷,mamicode.com
首页 > Web开发 > 详细

自定义jquery插件

时间:2016-04-02 13:38:35      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

参考: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>

默认效果:

技术分享

修改效果:

技术分享

自定义jquery插件

标签:

原文地址:http://www.cnblogs.com/guxingzhe/p/5347320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!