管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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 = '<div class="icon-zoom">\

　　<span title="zoom in" class="zoom-in">zoom in</span>\

　　<span title="zoom out" class="zoom-out">zoom out</span>\

　　</div>';

　　$.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.target;

　　if( i<=-1 || i>=lvls.length ) return;

　　var 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)

　　在页面上调用

　　

复制代码 代码如下:

　　<script src="js/jquery-1.4.4.min.js"></script>

　　<script src="js/jquery.ui.widget.js"></script>

　　<!-- 自定义的 -->

　　<script src="js/jquery.ui.wo.divZoom.js"></script>

　　<script type="text/javascript">

　　$(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);

　　}

　　});

　　});

　　</script>

　　示例代码：

　　

复制代码 代码如下:

　　<!DOCTYPE HTML>

　　<html lang="en-US">

　　<head>

　　<meta charset="UTF-8">

　　<title>jQueryUI</title>

　　<style type="text/css">

　　#receptacle{width:800px;height:500px;background:#cde;position:relative;}

　　#receptacle .demo{width:80px;height:80px;position:absolute;}

　　.demo .cont{width:80px;height:80px;display:block;background:#07a;}

　　.demo-a{top:30px;left:122px;}

　　.demo-b{top:100px;left:400px;}

　　.icon-zoom {

　　position:absolute; width:63px; height:20px; overflow:hidden;

　　background:url(http://files.glzy8.com/file_images/photoshop/201011/icon-zoom.png) no-repeat; cursor:pointer;

　　}

　　.icon-zoom span { width:20px; display:block; text-indent:-999em; float:left; }

　　</style>

　　<!--<script src="js/jquery.ui.core.js"></script>

　　<script src="jquery-1.4.4.min.js"></script>

　　<script src="jquery.ui.widget.js"></script>

　　<!-- 自定义的 -->

　　<script src="jquery.ui.wo.divZoom.js"></script>

　　<script type="text/javascript">

　　$(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);

　　}

　　});

　　});

　　</script>

　　</head>

　　<body>

　　<p>

　　<a href="http://www.cnblogs.com/ambar/archive/2010/11/12/how-to-user-jquery-ui-widget.html">原文</a>

　　</p>

　　<div id="receptacle">

　　<div class="demo demo-a">

　　<a class="cont" href="#a">a</a>

　　</div>

　　<div class="demo demo-b">

　　<a class="cont" href="#b">b</a>

　　</div>

　　</div>

　　</body>

　　</html>

教程首页 更多教程