昆明建设局官方网站阿里网站建设工具

昆明建设局官方网站,阿里网站建设工具,中铁韩城建设公司网站,怎么让自己的网站通过域名访问jQuery UI Widget Factory#xff08;部件工厂#xff09;实例 Widget Factory 是 jQuery UI 的核心机制#xff08;$.widget()#xff09;#xff0c;它允许你以标准、模块化的方式创建可重用、可配置、可扩展的状态ful 插件#xff08;部件#xff09;。所有 jQuery …jQuery UI Widget Factory部件工厂实例Widget Factory是 jQuery UI 的核心机制$.widget()它允许你以标准、模块化的方式创建可重用、可配置、可扩展的状态ful 插件部件。所有 jQuery UI 官方组件如 Dialog、Accordion、Autocomplete 等都是基于 Widget Factory 构建的。使用 Widget Factory 创建的插件支持选项options方法methods事件回调callbacks私有/公有方法自动销毁destroy继承与扩展下面提供几个渐进实例从基础到高级帮助你理解并自定义部件。1.最基础自定义部件创建一个简单的“问候”部件。!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlejQuery UI Widget Factory 基础示例/titlescriptsrc//code.jquery.com/jquery-3.6.0.min.js/scriptscriptsrc//code.jquery.com/ui/1.13.2/jquery-ui.min.js/script/headbodydividgreetingdata-name世界/divscript// 创建一个名为 custom.greeting 的部件$.widget(custom.greeting,{// 默认选项options:{name:陌生人,message:你好},// 构造器初始化时调用_create:function(){this.element.text(this.options.message, this.options.name);this._refresh();},// 私有方法更新显示_refresh:function(){this.element.addClass(ui-greeting);},// 公有方法更改问候语say:function(newMessage){this.option(message,newMessage);this._create();// 重新渲染},// 销毁时清理_destroy:function(){this.element.removeClass(ui-greeting).text();}});// 使用部件$(function(){$(#greeting).greeting({name:$(#greeting).data(name),// 从 data 属性读取message:欢迎});// 3秒后调用公有方法setTimeout(function(){$(#greeting).greeting(say,再见);},3000);});/script/body/html2.带事件回调的计数器部件支持点击增加计数并触发自定义事件。dividcounter/divbuttonidinc1/buttonscript$.widget(custom.counter,{options:{value:0,step:1,change:null// 回调事件},_create:function(){this.element.text(this.options.value).addClass(ui-counter);this._on(this.element,{click:this.increment});},increment:function(){this.option(value,this.options.valuethis.options.step);this._trigger(change,null,{value:this.options.value});// 触发事件},// 公有方法获取/设置值value:function(newValue){if(newValueundefined){returnthis.options.value;}this.option(value,newValue);this.element.text(newValue);}});$(function(){$(#counter).counter({change:function(event,data){console.log(计数变为data.value);}});$(#inc).click(function(){$(#counter).counter(increment);});});/script3.继承现有部件扩展 Dialog创建一个带默认标题和按钮的“确认对话框”。buttonidopenConfirm打开确认框/buttonscript// 继承 $.ui.dialog$.widget(custom.confirmDialog,$.ui.dialog,{options:{title:确认操作,modal:true,buttons:{确定:function(){$(this).confirmDialog(close);alert(已确认);},取消:function(){$(this).confirmDialog(close);}}}});$(function(){$(#openConfirm).click(function(){$(div你确定要执行此操作吗/div).confirmDialog(open);});});/script4.完整工具提示部件类似 Tooltip自定义一个简单 Tooltip。spanclasshas-tiptitle这是一个自定义提示悬停我/spanscript$.widget(custom.myTooltip,{options:{content:},_create:function(){this.tooltip$(div).addClass(ui-mytooltip).text(this.element.attr(title)).hide().appendTo(body);this._on(this.element,{mouseenter:this._show,mouseleave:this._hide});this.element.removeAttr(title);},_show:function(){this.tooltip.show().position({my:left center,at:right10 center,of:this.element});},_hide:function(){this.tooltip.hide();},destroy:function(){this.tooltip.remove();$.Widget.prototype.destroy.call(this);}});$(function(){$(.has-tip).myTooltip();});/scriptstyle.ui-mytooltip{background:#333;color:white;padding:8px;border-radius:4px;}/styleWidget Factory 核心方法总结_create()初始化_init()每次调用无参数方法时如.widget()_setOption(key, value)选项改变时自动调用可重写_trigger(type, event, data)触发事件option()获取/设置选项_on()/_off()事件绑定自动清理使用 Widget Factory 创建的插件命名空间推荐格式namespace.widgetName如ui.dialog、custom.progressLoader如果你想看一个进度加载器部件、可拖拽面板、或基于现有组件的复杂扩展请告诉我具体需求