jquery ui 中的插件开发

1  $.widget()      

必须引用

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


2.

(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 方法我们可以获取到 插件中定义的事件

 

posted @ 2015-02-13 09:31  蚂蚁金服官方博客  阅读(198)  评论(0编辑  收藏  举报