jquery.ui.widget详解
案例详解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<style type="text/css">
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
//扩展autocomplete组件，重写autocomplete的_renderMenu方法，将提示条目分类别显示
//$.widget接受三个参数，第一个参数是新的组件的名称，必须以custom.开头，.后面的才是新组件的名称，调用或者初始化方式与autocomplete相同
//第二个参数是扩展或者重写的组件，这里是$.ui.autocomplete，自动完成组件
//第三个参数是对象，包含了重写的属性或者方法，这里重写了_renderMenu方法
$.widget("custom.catcomplete", $.ui.autocomplete, {
//该方法在渲染下拉列表之前被调用，可以通过修改此方法达到将选项分类的目的
//传入的ul参数是选项的父容器，可以将选项增加到容器中
//传入的items参数是即将显示的数据列表
_renderMenu : function(ul, items) {
var that = this;
currentCategory = "";
//遍历items对象数组，将他们分类，下面的这种方法必须保证同类别的数据放在一起才可以。
$.each(items, function(index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
//扩展combobox组件，使其可以支持自动完成功能,重要！！！
$.widget("custom.combobox", {
//本人猜测这个方法应该是创建该组件时调用的，实践证明也是的，即$("#combobox").combobox();这句话
_create : function() {
console.log("call _create");
this.wrapper = "";
}
});
</script>
<script type="text/javascript">
$(function() {
var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL",
"ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",
"Python", "Ruby", "Scala", "Scheme" ];
var objects = [ {
label : "America",
value : "美国"
}, {
label : "China",
value : "中国"
}, {
label : "Japan",
value : "日本"
} ];
var categories = [ {
label : "anders",
category : ""
}, {
label : "andreas",
category : ""
}, {
label : "antal",
category : ""
}, {
label : "annhhx10",
category : "Products"
}, {
label : "annk K12",
category : "Products"
}, {
label : "annttop C13",
category : "Products"
}, {
label : "anders andersson",
category : "People"
}, {
label : "andreas andersson",
category : "People"
}, {
label : "andreas johnson",
category : "People"
} ];
var autocomplete = $("#tags").autocomplete({
//设置自动完成输入框的数据源，可以是字符串数组，可以使对象数组，也可以是url字符串(返回一个json数据)
//如果是对象数组，每个对象可以有两个属性，label和value，label代表显示的值，value代表选中后填入输入框的值，数据过滤是过滤label的
//source : availableTags,//为什么设置成url后就不能根据用户输入过滤数据了呢，而且文件中是对象数组无法自动提示啊
//自动提示框会根据用户输入的字符自动筛选符合条件的字符串，默认筛选规则是整个字符串内容包含用户输入的字符即符合条件，可以修改这个默认行为
//source如果设置成function函数，函数有两个参数，第一个参数可以获取用户输入的字符，第二个参数是一个函数，调用这个函数并且传入一个数组即可，数组即前面所说的数组，但是不能是url了，因为调用response函数已经不会帮我们再次去请求了
source : function(request, response) {
console.log($.ui.autocomplete.escapeRegex(request.term));
//创建一个正则表达式，$.ui.autocomplete.escapeRegex方法说是可以将字符串中的特殊字符作为普通字符处理，即如果传入的是"[]"，处理后返回"\[\]"，其实就是加了转义字符而已
//第二个参数"i"表示该正则表达式忽略大小写比较
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
//$.grep方法可以看做是一个过滤数组元素的方法，将数组中不符合条件的元素剔除
//第一个参数是源数组，第二个参数是一个回调函数，参数是数组的每一项，如果方法返回true，该元素会被加到目的数组中，否则被过滤
response($.grep(availableTags, function(item) {
return matcher.test(item);
}));
},
//这个配置项不知道是干嘛的。。。
appendTo : "body",
//可以设置成true或者false
//如果设置成true，当下拉列表显示时，自动聚焦到列表第一项
//如果设置成false，当下拉列表显示时，将不会自动聚焦，默认为false
autoFocus : true,
//设置下拉列表显示的延迟时间，单位毫秒，默认值是300
delay : 100,
//设置自动完成框的禁用状态，true表示禁用，false表示启用
disabled : false,
//设置搜索的最小字符数，即输入至少minLength个字符，才会去匹配提示，
//数据比较少的情况下可以设置成0，但是如果数据太多，有几千条，就需要用这个限制来过滤数据了
minLength : 1,
//设置下拉列表相对于自动完成输入框的位置
position : {
//设定下拉列表的定位点，即at属性会以这个点为参照物，设定下拉列表相对于输入框的位置
//第一个值是水平方向，可选left,right,center
//第二个值是竖直方向，可选left,right,center
my : "left top",
//设定相对位置
at : "left bottom"
},
//扩展点，不知道干嘛的，没看见被调用，应该不是这么使用
_renderItem : function(ul, item) {
alert("_renderItem");
return $("<li>").attr("data-value", item.value).append($("<a>").text(item.label)).appendTo(ul);
},
//扩展点，不知道干嘛的，没看见被调用，应该不是这么使用
_renderMenu : function(ul, items) {
var that = this;
$.each(items, function(index, item) {
that._renderItemData(ul, item);
});
$(ul).find("li:odd").addClass("odd");
},
//扩展点，不知道干嘛的，没看见被调用，应该不是这么使用
_resizeMenu : function() {
this.menu.element.outerWidth(500);
},
//当文本框内容修改后失去焦点时触发该事件，也可以使用绑定的方式将该事件绑定到提示框上
//autocomplete.on("autocompletechange",function(event,ui){});
//ui.item代表你选中的那一项的对象，包含label和value属性，如果没选中ui.item为null
change : function(event, ui) {
if (ui.item == null) {
console.log("No Choose");
} else {
console.log("Choose" + ui.item.value);
}
},
//当智能提示框关闭后会触发此事件,ui是空对象
close : function(event, ui) {
console.log("close");
},
//当自动完成组件创建时回调此方法,ui是空对象
create : function(event, ui) {
console.log("create");
},
//当提示列表中的某一项获取焦点时触发此事件,其中ui.item就是获得焦点的那一项
//只有使用键盘选择某一项时，才会更新文本框中的值，使用鼠标不更新文本框的值，但是都会触发此事件
focus : function(event, ui) {
console.log("focus:" + ui.item.value);
},
//当提示列表打开后触发此事件,ui是空的对象
open : function(event, ui) {
console.log("open");
},
//在search事件触发之后，列表显示之前会触发此事件，其中ui.content是即将显示在列表中的内容，已经标准化过了，是包含label和value的对象数组
response : function(event, ui) {
console.log("content length:" + ui.content.length);
//在每个对象的label属性中增加一个索引，使用$.each()方法遍历对象数组，第一个参数是数组，第二个参数是回调方法，每遍历一个对象会回调一次该方法，该方法第一个参数是索引，第二个参数是对象，如果该方法返回false，表示跳出遍历，如果返回true，继续下一个对象遍历。
$.each(ui.content, function(i, obj) {
obj.label += i;
if (i == 5) {
return false;
}
});
},
//在minLength满足后，delay之后会首先触发该事件，具体作用不详，传进来的ui是一个空的对象
search : function(event, ui) {
console.log("search");
},
//当列表中的某一个像被选中后触发此事件，参数和focus是一样的
select : function(event, ui) {
console.log("select:" + ui.item.value);
//event.preventDefault();使用这个函数可以阻止事件的默认行为，比如选择某一项的默认行为就是更新文本框的值，如果调用该方法，则不会更新文本框的值。但是不能阻止列表关闭。
}
});
$("#close").button().click(function() {
autocomplete.autocomplete("close");//关闭智能提示框
});
$("#destroy").button().click(function() {
autocomplete.autocomplete("destroy");//销毁智能提示框，输入框将不再具有提示功能
});
$("#disable").button().click(function() {
autocomplete.autocomplete("disable");//禁用智能提示框，输入框将不再具有提示功能
});
$("#enable").button().click(function() {
autocomplete.autocomplete("enable");//启用智能提示框，输入框将不再具有提示功能
});
$("#isDisabled").button().click(function() {
var isDisabled = autocomplete.autocomplete("option", "disabled");//获取智能提示是否禁用的状态
console.log("isDisabled:" + isDisabled);
});
$("#option").button().click(function() {
var option = autocomplete.autocomplete("option");//获取智能提示框所有配置信息
var optionStr = "";
//遍历配置信息
for ( var p in option) {
optionStr += p + ":" + option[p] + "\n";
}
console.log("Option:\n" + optionStr);
});
$("#setDelay").button().click(function() {
autocomplete.autocomplete("option", "delay", 2000);//设置下拉列表延迟时间为2s
});
$("#search").button().click(function() {
//调用之后会触发search事件，可以设置回调方法，实践证明，不能触发search事件的回调方法，funk，那这个方法作用是啥啊？
autocomplete.autocomplete("search", "");
});
//创建catcomplete组件
$("#catcomplete").catcomplete({
source : categories
});
//创建combobox组件
var combobox = $("#combobox").combobox();
//遍历一下combobox对象的属性和方法
var optionStr = "";
for ( var p in combobox) {
optionStr += p + "\n";
}
console.log(optionStr);
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">autocomplete: </label> <input id="tags" />
</div>
<!--
<button id="close">关闭智能提示框</button>
<button id="destroy">销毁智能提示框</button>
<button id="disable">禁用智能提示</button>
<button id="enable">启用智能提示</button>
<button id="isDisabled">获取智能提示是否禁用状态</button>
<button id="option">获取智能提示框所有配置信息</button>
<button id="setDelay">设置列表延迟时间</button>
<button id="search">触发search事件</button>
-->
<div class="ui-widget">
<label for="catcomplete">catcomplete: </label><input id="catcomplete" />
</div>
<div class="ui-widget">
<label>Your preferred programming language: </label> <select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
<button id="toggle">Show underlying select</button>
</body>
</html>
jquery.ui.widget详解的更多相关文章
- jquery ui tabs详解(中文)
1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...
- Jquery UI dialog 详解 (中文)
转载▼ 1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口.当属性为false的时候,一开始隐藏窗口,知道.dialog("op ...
- jquery的css详解（二）
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- Jquery ui widget开发
Jquery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget.在jquery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等), ...
- jQuery.attr() 函数详解
一,jQuery.attr() 函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）
使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...
- JQuery UI Widget Factory官方Demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery UI Widget(1.8.1)工作原理--转载
先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...
随机推荐
- KEngine：Unity3D资源的打包、加载、调试监控
资源模块做什么? 资源模块——ResourceModule,是KEngine中最核心的模块,其他模块基本或多或少的对它有依赖,它主要的功能是:资源打包.路径定义.资源管理.资源调试. 资源模块对Uni ...
- 关闭Eclipse回车自动添加大括号
如图:
- 实战SQL注入
SQL注入是啥就不解释了.下面演示一个SQL注入的例子 SQL注入点可以自己尝试或用SQL注入漏洞扫描工具去寻找,这里用大名鼎鼎的sqlmap演示一个现成的案例. 1.漏洞试探 root@kali:~ ...
- Broadmann分区
来源: http://blog.sina.com.cn/s/blog_60a751620100k2hj.html Brodmann areas Name 中文名 Function 1 Somatose ...
- Castle.Net 基本应用
什么是Castle Castle是针对.NET平台的一个开源项目,从数据访问框架ORM到IOC容器,再到WEB层的MVC框架.AOP,基本包括了整个开发过程中的所有东西,为我们快速的构建企业级的应用程 ...
- VFS分析(二)基本数据结构(持续更新)
nameidata /mnt/dir1/dir2/ nameidata结构体是一个临时的结构体, 目标是为了找到最后的dentry.
- [数据库]漫谈ElasticSearch关于ES性能调优几件必须知道的事(转)
ElasticSearch是现在技术前沿的大数据引擎,常见的组合有ES+Logstash+Kibana作为一套成熟的日志系统,其中Logstash是ETL工具,Kibana是数据分析展示平台.ES让人 ...
- [py]给函数传递数组和字典
一 , 1.1传元组 def fun(x): print x t=(1,2) fun(t) 1.2传元组 #传元组 def fun(x,y): print x,y # t=(1,2) t=(1,2,3 ...
- ssh 免密码设置失败原因总结
先复习一下设置ssh免密码操作的步骤: 进入主目录 cd 生成公钥 ssh-keygen -t rsa -P '' (注:最后是二个单引号,表示不设置密码) 然后分发公钥到目标机器 ssh-copy- ...
- mybatis 3.2.8 + log4j2.0.2 控制台输出sql语句
mybatis3.2.7有一个bug,使用log4j2 (2.0.2)版本时,会找不到类 ,导致启动失败,详见 https://github.com/mybatis/mybatis-3/issues/ ...