jquery plugin_01.........-原创手记-慕课网

jquery plugin_01.........

qaytix 2017-11-29 22:16:35 浏览 1834

qaytix

关注TA

手记 104

粉丝 37

获赞 165


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <li>qqq</li>
    <li>www</li>
    <li>ddd</li>
    <li>fff</li>
    <li>rrr</li>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    /*初始化对象，构造函数*/
    var Beautifier=function(el,opt){
        self=el,
        defaults={
            'color':'red',
            'fontSize':'30px'
        },
        //封装对象自带的全局属性
        //有{}主要是为了创建一个新对象，保留对象的默认值。
        settings= $.extend({}, defaults, opt)
    }

    /*object行为*/
    Beautifier.prototype.beautify=function(){
        //行为的属性方法
            return self.css({
                'color':settings.color,
                'fontSize':settings.fontSize
            })
    }

    //在插件中使用Beautifier对象
    $.fn.myPlugin=function(el,options){
        /*对象创建以后，自动生成对象的构造函数*/
        var filter=new Beautifier(this,options);
        //调用其方法
        return filter.beautify();
    }

    $(function(){
        $("li").myPlugin({
        'color':'green',
        'fontSize':'40px'
        });
    });
</script>

优秀的轮播图片插件 www.dowebok.com/demo/222/

相关标签: Html/CSS

0人推荐

发表评论