君，已阅读到文档的结尾了呢~~
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
Yahoo User Interface Library简介
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口Button ，可以使用 &button& &input& &a&。 &input& 中的不同类型，submit , radio , checkbox 。还能加上 icon ，split button 。
Autoconplete 为校准 文本 &input&提供了一个文本选择的菜单。当浏览者开始在&input&中输入时，会自动匹配输入的字符，显示建议。 允许通过箭头按键导航，Enter键选中，Esc键关闭菜单。当箭头键被用来导航时，每个建议都会出现在&input&中。如果Esc用来关闭导航，&input&的 value 会回复到用户输入的状态。
标准button的安装启用
button 事件
button方法
使用本地数据源的autocomplete
autocomplete的配置选项
autocomplete事件
autocomplete独特的方法
使用远程数据源的autocomplete
在autocomplete的建议菜单中使用HTML
1.1 标准安装启用
当使用&a&或 &button& 元素创建 button ，一个&span&元素会被自动创建，并嵌入其中。这个&span&会包含button 的 label text.
1 &a href="" id="myButton"&A link button&/a&2 &button id="myButton2"& button &/button&3 &input id="myButton3" value="An input button"&4
$(function(){ 5
$("#myButton").button(); 6
$("#myButton2").button(); 7
$("#myButton3").button(); 8
&input& 元素不允许包含子元素，所以&span&不会在使用&input&创建button的时候出现。
&a&元素通过制定 href 属性，会简单地将浏览者送往新的页面或anchor。
使用 &button& 元素同上，只是不需要添加 href属性。使用&input&元素也很简单，它使用 value属性设置 button 的文本。
1.2 配置选项
Default Value
禁用button实例
{primary:null,secondary:null}
设置button实例的icons
value属性或下层元素的文本
设置button实例的text
当使用icon-only时，隐藏button的 text
label选项配置的值会覆盖&a&元素的文本。
1.3 button的 icons
button在大多数情况下顶多有另个icon。当一个&a&或&button&元素被用来创建button，我们可以使用icons配置选项来为其指定一个或两个icons。
var buttonOpts={ 2
primary:"ui-icon-disk", 4
secondary:"ui-icon-triangle-1-s" 5
text:false 7
icons属性接受一个对象，它包含最多两个键，primary和secondary。这些选项的值可以是 jquery.ui.theme.css 文件中的任何 ui-icon- classes。icons使用&span&元素添加到控件中。
1.4 input 的 icons
尽管子元素&span&可以用来显示指定的icon，但是我们不能为&input&元素添加子元素。我们可以使用额外的容器，包含&span&元素和一些自定义的CSS，简单地为&input&添加我们自己的icons。
1 &style& 2
.iconic-input { display:inline-block; position:relative;} 3
.ui-icon { z-index:2;} 4
.iconic-input input { border:none; margin:0;} 5 &/style& 6 &/script& 7 &div class="iconic-input ui-button-text-icons ui-state-default ui-corner-all"& 8 &span class="ui-button-icon-primary ui-icon ui-icon-disk"&&/span& 9 &input id="myButton" type="button" value="Input icons" class="ui-button-text"&10 &span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-s"&&/span&11 &/div&
在较老版本的IE中不支持display:inline-block样式。为了防止button占满它的容器，我们需要将其浮动，设置期望宽度。
两端的icons 没有 hover states，这是因为控件为&input&应用了必须的 classnames，没有给我们自定义的容器。我们可以为icon添加必要的行为。
$("#myButton").button().hover(function(){ 2
$(this).parent().addClass("ui-state-hover"); 3
},function(){ 4
$(this).parent().removeClass("ui-state-hover"); 5
为icon添加悬停效果。多数情况下，使用&a& 和&button&元素创建 button 会更简单，更有效率。
1.5 button 的事件
使用&a&元素创建的button，会通过href跳转。在 &form&中使用 &button&或&input&元素，创建带有 type 属性的设置，会提交表单数据。
button控件只暴露了一个事件 create 事件。当 button 实例初始化创建后被触发。
我们也许想要收集一些注册信息，并使用 button 发送信息到服务器。
1 &form method="post" action="aa.php"& 2 &label for="name"&Name:
3 &input type="text" id="name" name="name"& 4 &/label& 5 &label for="email"&Email:
6 &input type="text" id="email" name="email"& 7 &/label& 8 &button type="submit" id="myButton"&Register&/button& 9 &/form&10 11
$(function(){ 12
$("#myButton").button().click(function(e){ 13
e.preventDefault(); 14
var form=$("form"), 15
formData={ 16
name:form.find("#name").val(), 17
email:form.find("#email").val() 18
console.log(formData); 20
$.post("aa.php",formData,function(){ 21
$("#myButton").button("option","disabled",true); 22
form.find("label").remove(); 23
$("&label /&").text("Thanks for registering!").prependTo(form); 24
1.6 button组
button控件也可以用来结合 radio buttons 和 checkboxes 。button是 jQuery UI 控件中，独一无二的，有两个方法的控件，它还有一个 buttonset() 方法，用来创建一组由 radio buttons 和 chekboxes 组成的button。
1.6.1 Checkbox buttonsets
1 &div id="buttons"& 2 &h2&Programming Languages&/h2& 3 &p&Select all languages you know:&/p& 4 &label for="js"&JavaScript&/label& 5 &input id="js" type="checkbox"& 6 &label for="py"&Python&/label& 7 &input id="py" type="checkbox"& 8 &label for="cSharp"&C#&/label& 9 &input id="cSharp" type="checkbox"&10 &label for="jv"&Java&/label&11 &input id="jv" type="checkbox"&12 &/div&13
$(function(){ 14
$("#buttons").buttonset(); 15
当一个checkbox被选中，它会被应用 selected 状态。在HTML5中，使用关联的&label&元素构建form时，不允许使用button 控件。
1.6.2 Radio buttonsets
与checkbox 的区别仅仅在行为上，所有的&input&都必须有 name 属性。
1 &div id="buttons"& 2 &h2&Programming Languages&/h2& 3 &p&Select all languages you know:&/p& 4 &label for="js"&JavaScript&/label& 5 &input id="js" type="radio" name="lang"& 6 &label for="py"&Python&/label& 7 &input id="py" type="radio" name="lang"& 8 &label for="cSharp"&C#&/label& 9 &input id="cSharp" type="radio" name="lang"&10 &label for="jv"&Java&/label&11 &input id="jv" type="radio" name="lang"&12 &/div&
1.7 Button 的方法
除了 destroy , disable, enable ,widget , option 这些公共的方法，button 控件只暴露了一个自定义的方法，refresh方法。它用来以代码的方式改变checkbox 和 raido 的状态。
1 &div id="buttons"& 2 &h2&Programming Languages&/h2& 3 &p&Select all languages you know:&/p& 4 &label for="js"&JavaScript&/label& 5 &input id="js" type="checkbox"& 6 &label for="py"&Python&/label& 7 &input id="py" type="checkbox"& 8 &label for="cSharp"&C#&/label& 9 &input id="cSharp" type="checkbox"&10 &label for="jv"&Java&/label&11 &input id="jv" type="checkbox"&12 &/div&13 &br&14 &button type="button" id="select"&Select all&/button&15 &button type="button" id="deselect"&Deselect all&/button&16 17
$(function(){ 18
$("#buttons").buttonset(); 19
$("#select").button().click(function(){ 20
$("#buttons").find("input").attr("checked",true).button("refresh"); 21
$("#deselect").button().click(function(){ 23
$("#buttons").find("input").attr("checked",false).button("refresh"); 24
当 Select all button被点击，我们设置 cheked 属性为 true 。这会检查底层并且隐藏的check boxes，单不会对作为button显示的&label&元素做任何事情。更新这些button 的状态，让他们显示被选中，需要调用 refresh 方法。
2 autocomplete 控件
1 &label&Enter your city:&/label& 2 &input id="city"& 3
$(function(){
var autoOpts = {
"Aberdeen", "Armagh", "Bangor", "Bath", "Canterbury",
"Cardiff",
"Derby", "Dundee", "Edinburgh", "Exeter", "Glasgow", 10
"Gloucester", 11
"Hereford", "Inverness", "Leeds", "London", "Manchester", 12
"Norwich", 13
"Newport", "Oxford", "Plymouth", "Preston", "Ripon", 14
"Southampton", 15
"Swansea", "Truro", "Wakefield", "Winchester", "York" 16
$("#city").autocomplete(autoOpts); 19
在配置对象中，使用了 source 选项，指定了一个本地字符串数组。source选项时强制性地，必须被定义。
2.1 使用对象数组作为数据源
1 var autoOpts = {
{ value: "AB", label: "Aberdeen" },
{ value: "AR", label: "Armagh" }
每个对象有两个keys ： value 和 label 。value的值是选中的值，label 用来显示在建议的选择列表中。如果某一个对象只有一个 key，则它既是value 也是 label。
2.2 配置 autocomplete 选项
Default Value
指定将控件添加到哪个元素上
当显示建议列表时，focus第一个建议
指定浏览者输入字符后，延迟显示建议列表的milliseconds数
指定在显示建议列表前，访问者需要输入的最短字符长度
{my:&left top&,at:&left bottom&,collision:&none&}
指定建议列表应该显示在相对&input&的位置。它和 position 功能接受一样的值
指定用来填充建议列表的数据源。这个选项是强制和必须被配置的。它接受一个数组，字符串，或一个函数。
2.2.1 配置最小长度
设置 minLength 选项为高于默认值1 的数，可以使建议列表变窄。在处理大量远程数据源时，这很重要，可以缩小远程数据源返回的数据。
2.2.2 将建议列表附加到一个可选的元素上
默认地，建议列表被附加到页面的&body&，position 功能用来定义列表的位置，所以他能显示到关联的&input&上。我们可以使用 appendTo 选项，改变，并制定该元素。
1 appendTo: "#container"
这可以使创建出来的 &ul& 被附加到 container上，而不是body上。
2.3 autocomplete 事件
Fired when&
列表中的一个建议被选中。这个事件会被触发，一旦列表已经关闭，并且&input&已经社区focus
建议列表已经关闭
一个控件实例被创建
键盘被用来focus一个建议
建议目录被显示
请求将要显示的建议
一个建议被选中
当我们使用一个对象数组作为数据源，对象中有超过 label 和 value 属性之外的附加数据时，select事件此时很有用。
1 &label&Enter your city:&/label& 2 &input id="city"& 3
$(function(){
var autoOpts = {
{ value: "AB", label: "Aberdeen", population: 212125 },
{ value: "AR", label: "Armagh", population: 54263 }
select:function(e,ui){
if($("#pop").length){
$("#pop").text(ui.item.label+"'s population is : "+ui.item.population);
$("&p&&/p&").attr("id","pop").text(ui.item.label+"'s population is : "+ui.item.population).insertAfter("#city");
$("#city").autocomplete(autoOpts);
我们使用select 事件，来获得 label 和 我们额外的属性。
2.4 Autocomplete 方法
关闭建议目录
从数据源请求建议列表，指定 search term 作为可选参数
2.5 使用远程数据源
2.5.1 使用一个字符串作为数据源选项的值
1 var autoOpts = {
source: "http://danwellman.co.uk/countries.php?callback=?"
因此，当使用一个字符串作为数据源选项的值时，传回来的数据应该是一个对象数组。每个对象包含至少一个key ，label。数据可以通过 cross-domain 请求获得 JSON 或 JSONP 。控件会自动在输入的字符后，添加查询字符串 term=&& 。
当我们从我们不能控制的公共网络服务器获取数据时，数据格式也许不正确。我们需要使用一个函数作为数据源选项的值，手工转换数据。
2.5.2 使用函数作为数据源选项的值
我们使用函数请求数据，处理数据，然后将其传给控件。
1 &div id="formWrap"&
2 &form id="messageForm" action="#" method="post"&
3 &fieldset&
4 &legend&New message form&/legend&
5 &span&New message&/span&
6 &div class="inner-form ui-helper-clearfix"&
7 &label for="toList"&To:&/label&
8 &div id="toList" class="ui-helper-clearfix"&
9 &input id="to" type="text"& 10 &input id="emails" type="hidden"& 11 &/div& 12 &label for="message"&Message:&/label& 13 &textarea id="message" name="message" rows="2" cols="50"& 14 &/textarea& 15 &/div& 16 &div class="button ui-helper-clearfix"& 17 &button type="submit"&Send&/button& 18 &a href="#" title="Cancel"&Cancel&/a& 19
20 &/div& 21 &/fieldset& 22 &/form& 23 &/div& 24 &input id="country"& 25 &script src="jq/jquery-1.4.4.js"&&/script& 26 &script src="jq/jquery-ui-1.8.9.js"&&/script& 27 &script src="jq/jquery-ui-i18n.min-1.8.9.js"&&/script& 28 &script& 29 var autoOpts={
source:function(req,resp){
$.getJSON("http://danwellman.co.uk/contacts.php?callback=?",
33 function(data){
34 var suggestions=[];
$.each(data,function(i,val){
36 var obj={};
obj.value=val.
obj.email=val.
suggestions.push(obj);
resp(suggestions);
select:function(e,ui){
45 var emailList=$("#emails"),
emails=emailList.val().split(","),//split分割出来的是数组 47
span=$("&span&"+ui.item.value+"&/span&"),
a=$("&a href='#' class='remove' title='Remove'&x&/a&").appendTo(span);
span.insertBefore("#to");
emails.push(ui.item.email);
emailList.val(emails.join(","));
$("#to").remove();
$("&input id='to'&").insertBefore("#emails").autocomplete(autoOpts);
$("#to").autocomplete(autoOpts);
$("#toList").click(function(){
$("#to").focus();
60 //delegate() 方法为指定的元素（属于被选元素的一个或多个子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 61 //使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 62
$("#toList").delegate("a","click",function(){
63 var email=$(this).parent().data("email"),
emails=$(this).val().split(",");
$(this).parent().remove();
$.each(emails,function(i,val){
68 if(val===email){
emails.splice(i,1);//从数组中移除某些元素, StartIndex,Count 70
$("#emails").val(emails);
75 &/script& 76 &style& 77
#formWrap{ 78
padding:10px;position:absolute;background-color:#000; 79
background:rgba(82,82,82,0.7);border-radius:8px; 80
font:bold 14px "lucida grande",tahoma,verdana,arial,sans-serif; 81 } 82
#formWrap a:hover{color:#ff0000;} 83
#messageForm{ 84
width:<span style="background-color: #f5f5f5; color: #px;border:1px solid #666;background-color:#eee; 85 } 86
#messageForm fieldset{ 87
padding:0;margin:0;position:relative;border:none #CCC; 88
background-color:#fff; 89 } 90
#messageForm legend{ 91
visibility:hidden;height:0; 92 } 93
#messageForm span{ 94
display:block;width:<span style="background-color: #f5f5f5; color: #p;padding:10px 0;background-color:#6D84B4; 95
border:#3B8;color:#fff;text-indent:20px; 96 } 97
.inner-form{padding:20px;} 98
#toList{ 99
width:<span style="background-color: #f5f5f5; color: #px;min-height:27px;padding:3px 3px 0 3px;100
border:1px solid #6D84B4; mairgin-bottom:8px;float:left;101
background-color:#fff;cursor:text;102 }103
#messageForm #to{104
width:10px;padding:0;position:relative;top:4px;float:left;105
border:none;106 }107
#messageForm input,#messageForm textarea{108
display:block;width:<span style="background-color: #f5f5f5; color: #px;padding:3px;border:1px solid #6D84B4;109
float:left;outline:none;110 }111
#messageForm textarea{resize:vertical;}112
#messageForm label{113
width:60px;margin:7px 10px 0 0;float:left;corlor:#666;114
font-size:11px;text-align:right;115 }116
.buttons{padding:10px 20px;background-color:#f2f2f2;}117
.button a{118
margin:3px 10px 0 0;float:right;font-size:11px;color:#6D84B4;119 }120
.buttons button{float:right}121
#toList span{122
width:auto;margin:<span style="background-color: #f5f5f5; color: #px 3px 0;padding:3px 20px 4px 8px;123
border:1px solid #9DACCC; border-radius:3px;position:relative;124
float:left;font-size:11px;font-weight:normal;text-indent:0;125
background-color:#E2E6F0;color:#1C2A47;126 }127
#toList span a{128
position:absolute;right:7px;top:1px;color:#666;129
font-weight:bold;font-size:12px;text-decoration:none;130 }131
.ui-menu .ui-menu-item{132
white-space:nowrap;padding:<span style="background-color: #f5f5f5; color: #px 0 0;133 }134 &/style&
1 jsonp8([{"name":"Admiral Ackbar","email":"akbar@alliance.org"},{"name":"Admiral Ozzel","email":"ozzy@empire.org"}])
我们使用&div&，设置它的样式，是它看起来像一个 &input&，在它里面使用一个无样式的真实的&input& 。这个真实的&input&是必须的，这样浏览者能输入，autocomplete与其关联。我们使用&div&元素师因为我们不能在&input&中插入&span&元素。我们也需要一个隐藏的&input&，它被用来存储实际的 e-mail 地址。
在脚本里，我们使用一个函数作为数据源选项的值。每次&input&里的文本改变，这个函数就会被调用。这个函数接受两个参数，第一个是 req ，包含一个叫做 term 的属性，是输入到&input&里的字符。第二个， resp ，是一个回调函数，我们在显示建议目录时会调用的。
这个函数中，我们首先做JSON 请求。建一个空数组，将请求到的每个 json 对象中的 item。
我们使用 jQuery 的 each() 方法处理每一个返回的item。我们创建一个新的对象，给它加上value和email属性。控件会显示value属性。
每个新创建的对象都被加入建议数组，这个数组会传给resp的回调函数。
我们使用 select 配置选项，来处理不标准的远程数据。这个函数接受两个参数，event 对象 和一个 ui 对象。
在这个函数中，我们首先缓存隐藏的&input&的选择器，并通过它的吻遍，创建一个数组存储分隔后的e-mail地址。
我们然后创建一个&span&元素，并通过 ui.item.value 设置它的文本为被选择的值。偶们也创建了一个 &a& 元素，将它附加到这个新的 &span&上。这个元素用来移除 收件人列表中的&span&。我们也在 &span& 上添加了e-mail 地址作为 data，所以每个收件人名字都能关联到它的 e-mail 地址。
然后我们将这个&span&元素插入到 &div& 元素，对它使用样式，使它看起来像一个 &input& ，然后，通过 ui.item.email 将它的 email 属性添加到 emails 数组，作为 隐藏的 &input& 的值。
2.6 在建议列表中播放HTML
默认地，autocomplete 控件会仅仅播放每个建议的文本。这里有一个扩展插件，可以帮助我们在建议列表中显示html，来高亮用户输入的字符。
1 &label for"city"&Enter a city&/label& 2 &input id="city"& 3
4 &script src="jq/jquery.ui.autocomplete.html.js"&&/script& 5
$(function(){
var data = [
{ value: "Aberdeen", label: "Aberdeen" },
{ value: "York", label: "York" }
autoOpts={
html:true,
source:function(req,resp){
var suggestions=[],
regEx=new RegExp("^"+req.term,"i");
$.each(data,function(i,val){
if(val.label.match(regEx)){
var obj={};
obj.value=val.
obj.label=val.label.replace(regEx,"&span&"+req.term+"&/span&");
suggestions.push(obj);
resp(suggestions);
$("#city").autocomplete(autoOpts);
29 30 &style&31
span { color:red !important;}32 &/style&
在我们的配置对象中，我们指定一个新选项 html& 被设为 true ，用来结合 html 扩展。
我们创建一个新的空数组，定义了一个新的正则表达式对象，它会在毫无知觉的情况下，匹配用户输入的字符。
阅读(...) 评论()&>&&>&&>&&>&jQuery UI 1.8 The User Interface Library for jQuery
jQuery UI 1.8 The User Interface Library for jQuery
上传大小：5.01MB
jQuery UI 1.8 The User Interface Library for jQuery
嵌到我的页面
<input type="text" value="">
综合评分：0（0位用户评分）
所需积分：2
下载次数：0
审核通过送C币
创建者：hbwang_716
创建者：yp2008gf
创建者：luoruiyuan_1
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
jQuery UI 1.8 The User Interface Library for jQuery
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：