jQueryUI如何自定义组件

如何开始使用 首先用$.widget()方法开始定义你的组件，它只接收三个参数：第一个是组件名称，第二个是可选的基类组件（默认的基类是$.Widget），第三个是组件的原型。组件名称必须包含命名空间，要注意的是，官方组件的命名空间是以‘ui’开头的，比如:‘ui.tabs’。我在下面的用‘我’的拼音(‘wo’)。 $.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype) $.Widget基类含有一个重要的属性‘options’，它用来定义公有参数，组件初始化时外部调用的参数会覆盖内部定义的参数；以及三个重要的私有的方法‘_create’、‘_init’、‘’，前两个相当于构造函数的作用，按顺序执行，_create()方法执行之后会触发'create'事件。 _trigger()方法会将参数中的指定函数标准化为W3C事件，并且触发这个自定义事件。另外还有三个公有方法‘enable’，‘disable’，‘destroy’，分别表示启用、禁用和销毁组件。 这里很有意思的，是私有方法和公有方法的实现。jQuerUI Widget暴露的方法都是不以‘_’开头的： // prevent calls to internal methods if ( isMethodCall &&options.charAt( 0 ) === "_" ) { return returnValue} 实际上，jQueryUI Widget还是保留了原始的API，比如这样使用： var $div = $('.demo:first')var api = $div.data('divZoom')// console.dir(api)api.zoomIn()// 对比 $div.divZoom('zoomIn')一个实现完全私有变量的小技巧： (function($) { var privateVar = ''$.widget(wo.divZoom,{})})(jQuery) 所有代码 /* * @by ambar * @create 2010-10-20 * @update 2010-10-25 */ (function($) { var html = '\ zoom in\ zoom out\ '$.widget("wo.divZoom",{ _init : function() { var self = this, opt = self.options, tgt = opt.target, $el = self.element // 初始一次 if($('div.icon-zoom',$el).length) return$el.append(html)self.target = ( tgt == '' ? $el : $el.find(tgt) )// 检测初始值 var level = self.target.attr(opt.dataPrefix)self.target.attr(opt.dataPrefix,level || opt.level[0])self.btnZoomIn = $el.find('span.zoom-in').click( $.proxy(self.zoomIn,self) )self.btnZoomOut = $el.find('span.zoom-out').click( $.proxy(self.zoomOut,self) )}, destroy : function(){ this.element.find('div.icon-zoom').remove()}, options : { level : [120,160,200], target : '', speed : 'normal', dataPrefix : 'data-zoom-level', zooming : null, select : null, show : null }, currentLevel : function(){ var self = this, opt = self.options, lvl = Number(self.target.attr(opt.dataPrefix))return $.inArray(lvl,opt.level)}, zoomIn : function() { this.zoom(this.currentLevel() + 1)}, zoomOut : function() { this.zoom(this.currentLevel() - 1)}, zoom : function(i){ var self = this, opt = self.options,lvls = opt.level,$tgt = self.targetif( i=lvls.length ) returnvar value = lvls[i], originalValue = lvls[self.currentLevel()], style = { width:value, height:value }var data = { target : $tgt, css : style, originalCss : {width:originalValue,height:originalValue} }var goon = self._trigger('start',null,data)if(!goon) return$tgt.animate(style, { duration : opt.speed, step : function(val) { var css = { width:val, height:val }self._trigger('zooming',null,$.extend({},data,{css:css}))}, complete : function(){ $tgt.attr(opt.dataPrefix,value)self._trigger('stop',null,data)} })} })})(jQuery) 在页面上调用 $(function() { $('div.demo').divZoom({ target : '>a', level : [80,120,160,200], zooming : function(e,ui){ // console.log(e,ui.css)}, start : function(e,ui){ console.log('开始',this,e.type,ui)}, stop : function(e,ui) { console.log('结束',ui.css)} })}) 示例：/Files/ambar/demos/divZoom/demo.htmTag标签: jquery,jqueryui,widget,class [jquery]Web 前端设计模式--Dom重构... (佚名，10-28)

使用jquery中的load事件。

load事件可以载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。

参数url,[data,[callback]]

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

例子$("#test").load("index.html")在元素test中载入index页面

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的<script>标签，输入jquery代码：

$('body').append('<input type="button" value="确定">')

3、浏览器运行index.html页面，此时成功通过jquery动态创建了一个确定按钮。

---