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://zsrimg.ikafan.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>

赞 (0)

相关推荐

  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

  • jQuery图片拖动组件Dropzone用法示例

    本文实例讲述了jQuery图片拖动组件Dropzone用法.分享给大家供大家参考,具体如下: dropzone 主要功能:支持拖动图片上传,提供图片预览,等功能 参考地址:http://www.dropzonejs.com 1. 安装 npm install dropzone ,会下载一个dropzone 2. dropzone文件夹dist 下有两个文件一个dropzone.js 一个dropzone.css 将这两个文件添加到页面上 3. 初始化Dropzone ,demo代码如下 <!DO

  • 浅析jquery的js图表组件highcharts

    Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对于非商用用户免费(包括个人网站.非盈利性组织.学生团体等). 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for

  • jQuery Chart图表制作组件Highcharts用法详解

    jQuery Chart图表制作组件Highcharts用法详解

    本文实例讲述了jQuery Chart图表制作组件Highcharts用法.分享给大家供大家参考,具体如下: Highcharts是一个制作图表的纯Javascript类库,主要特性如下: ① 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: ② 对个人用户完全免费: ③ 纯JS,无BS: ④ 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: ⑤ 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highchar

  • 使用jquery组件qrcode生成二维码及应用指南

    有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码. 复制代码 代码如下: <script type="text/javasc

  • jquery组件WebUploader文件上传用法详解

    jquery组件WebUploader文件上传用法详解

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法. 使用WebUploader还可以批量上传文件.支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件. 接下来我以图片上传实例,给大家讲解如何使用WebUploader. HTML 我们首先将css和相关js文件加载. <link rel="s

  • javascript拖拽上传类库DropzoneJS使用方法

    用法 1. add js and css style 复制代码 代码如下: <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.j

  • 基于jquery的图片轮播 tab切换组件

    目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码 代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn

  • jQuery移动端图片上传组件

    本文实例为大家分享了移动端图片上传组件,供大家参考,具体内容如下 Imageupload 使用File API+canvas 客户端压缩图片,并实现文件上传服务端 文件依赖 JQUERY 参数API loading:'.loading', 页面显示loading的图标selector url:'', 接收数据的api接口地址 maxFileSize:1010241024, 服务端支持的最大单文件大小 format:/^image/i, 支持的文件格式. images text ..... isC

  • jQuery之排序组件的深入解析

    jQuery之排序组件的深入解析

    1:排序(Sortable)组件可以将页面上的一组元素变成可排序的,可用于定义一个可排序的元素列表,然后,通过拖动鼠标可以调整元素在列表中的位置$('.selector').sortable(options);    简单实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

  • Confirmer JQuery确认对话框组件

    Confirmer JQuery确认对话框组件

    插件截图: 用途:点击链接或按钮时要确认是否继续当前操作. 插件代码: 复制代码 代码如下: (function($){ $.fn.confirmer = function(options){ var defaults = { msg:"Are you sure to delete it ?" } var options = $.extend(defaults, options); var control=$(this); $(control).click(function(){ret

随机推荐