jquery ui 中的插件开发

最新推荐文章于 2024-12-06 10:39:54 发布

weixin_33862993

最新推荐文章于 2024-12-06 10:39:54 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuzai/p/4289674.html

1 $.widget()　　　　　　

必须引用

 <script src="@Url.Content("~/Scripts/jquery-ui-latest.js?v="+ViewBag.vv+"1")" type="text/javascript"></script>

(function ($) {
    $.widget("hw.CamScan", {
        options: {
          //插件的参数
        },
        ///create the widget 根据配置显示对应的ui
        _create: function () {
            var self = this;
           
           //这里初始化信息

        },
   
        _hasNoControl: function (idPrefix) {
//插件中定义的内部方法        

        },
     
    
      
        ScanUpload: function (Value, fileName) {
//插件中定义的外部方法   
        },
      
        destroy: function () {
            this.element.empty();
            $.Widget.prototype.destroy.apply(this, arguments);
        }
    });
})(jQuery);

3 如何使用

            $("#sa").CamScan({

                scanurl: "http://localhost:56630/",
                scanaction: "testplub/ScanUpload",
                userid: "99999",
                CAMurl: "http://localhost:56630/",
                CAMaction: "testplub/CamUpload"
            });

4如何调用插件中的方法

$("#sa").CamScan("ScanUpload", "params", "filename")

其中 params filename 对应上面 ScanUpload 中的 value 和 filename

5 如何获取到插件中事件

插件中使用 trigger

jQuery("#" + id).trigger('ScanUploadscuess', fileName + ".jpg 上传成功！");         //成功触发一个事件

页面加载时使用 bind

  $("#sa").bind("CamSMsuccess", function (e, value) { alert(value); });

6 trigger多个参数 (与插件无关)

jQuery("#" + id).trigger('jsimg', [image, saomiaoid]);         //成功触发一个事件

调用方法

 $("#@ViewBag.tabcid" + "_scancontrol").bind("jsimg", function (e, img,id) {
其中 img id 即为 传出的参数

}

通过 jquery trigger 和 bind 方法我们可以获取到插件中定义的事件

转载于:https://www.cnblogs.com/xuzai/p/4289674.html