jquery ui 中的插件开发

1  $.widget()　　　　　　

必须引用

 <script src="@Url.Content("~/Scripts/jquery-ui-latest.js?v="+ViewBag.vv+"")" 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: "",
                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 方法我们可以获取到 插件中定义的事件