jQueryUI的widget的Hello World

为了看懂jQuery-File-Upload里面的代码,所以学习到这里

//main.js
//实践自定义jquery widget,风格1
(function($){
    
    //$.widget('命名空间.插件名', $.继承插件的命名空间.插件名,{ /* snip */ }); //参数1,参数2都是可选的,关键在第3个参数,调用时,使用"插件名",如这里的fileupload
    $.widget('blueimp.fileupload',{
        //在这里实现自定义插件的主体逻辑
        say: function(){
            console.log("Hello World");
        }
    });

})(jQuery);//此风格是不能省略括号后加(jQuery)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="myID"></div>
    <script src="/Sandeep/js/jquery.min.js"></script>
    <script src="/Sandeep/js/jquery.ui.widget.js"></script>
    <script src="/Sandeep/js/test.js"></script>
    <script src="/Sandeep/js/main.js"></script>
</body>

</html>
$(function(){
    
    var instance = $("#myID").fileupload();//初始自定义jquery widget插件
    $("#myID").fileupload("say");//调用自定义jquery widget中的方式一
    instance.fileupload("say");//方式二

});

参考

posted @ 2019-08-30 17:16  轴轴  阅读(208)  评论(0)  编辑  收藏  举报