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