【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件

Button ,可以使用 <button> <input> <a>。 <input> 中的不同类型,submit , radio , checkbox 。还能加上 icon ,split button 。

Autoconplete 为校准 文本 <input>提供了一个文本选择的菜单。当浏览者开始在<input>中输入时,会自动匹配输入的字符,显示建议。 允许通过箭头按键导航,Enter键选中,Esc键关闭菜单。当箭头键被用来导航时,每个建议都会出现在<input>中。如果Esc用来关闭导航,<input>的 value 会回复到用户输入的状态。

  • 标准button的安装启用
  • 配置选项
  • 添加icon
  • button 事件
  • button组
  • button方法
  • 使用本地数据源的autocomplete
  • autocomplete的配置选项
  • autocomplete事件
  • autocomplete独特的方法
  • 使用远程数据源的autocomplete
  • 在autocomplete的建议菜单中使用HTML

1.1 标准安装启用

当使用<a>或 <button> 元素创建 button ,一个<span>元素会被自动创建,并嵌入其中。这个<span>会包含button 的 label text.

});

<input> 元素不允许包含子元素,所以<span>不会在使用<input>创建button的时候出现。

<a>元素通过制定 href 属性,会简单地将浏览者送往新的页面或anchor。

使用 <button> 元素同上,只是不需要添加 href属性。使用<input>元素也很简单,它使用 value属性设置 button 的文本。

1.2 配置选项

Option Default Value Used to…
disabled false 禁用button实例
icons {primary:null,secondary:null} 设置button实例的icons
label value属性或下层元素的文本 设置button实例的text
text true 当使用icon-only时,隐藏button的 text

label选项配置的值会覆盖<a>元素的文本。

1.3 button的 icons

button在大多数情况下顶多有另个icon。当一个<a>或<button>元素被用来创建button,我们可以使用icons配置选项来为其指定一个或两个icons。

};

icons属性接受一个对象,它包含最多两个键,primary和secondary。这些选项的值可以是 jquery.ui.theme.css 文件中的任何 ui-icon- classes。icons使用<span>元素添加到控件中。

1.4 input 的 icons

尽管子元素<span>可以用来显示指定的icon,但是我们不能为<input>元素添加子元素。我们可以使用额外的容器,包含<span>元素和一些自定义的CSS,简单地为<input>添加我们自己的icons。

.iconic-input { display:inline-block; position:relative;} .ui-icon { z-index:2;} .iconic-input input { border:none; margin:0;} </div>

在较老版本的IE中不支持display:inline-block样式。为了防止button占满它的容器,我们需要将其浮动,设置期望宽度。

两端的icons 没有 hover states,这是因为控件为<input>应用了必须的 classnames,没有给我们自定义的容器。我们可以为icon添加必要的行为。

});

为icon添加悬停效果。多数情况下,使用<a> 和<button>元素创建 button 会更简单,更有效率。

1.5 button 的事件

使用<a>元素创建的button,会通过href跳转。在 <form>中使用 <button>或<input>元素,创建带有 type 属性的设置,会提交表单数据。

button控件只暴露了一个事件 create 事件。当 button 实例初始化创建后被触发。

我们也许想要收集一些注册信息,并使用 button 发送信息到服务器。

});

1.6 button组

button控件也可以用来结合 radio buttons 和 checkboxes 。button是 jQuery UI 控件中,独一无二的,有两个方法的控件,它还有一个 buttonset() 方法,用来创建一组由 radio buttons 和 chekboxes 组成的button。

1.6.1 Checkbox buttonsets

});

当一个checkbox被选中,它会被应用 selected 状态。在HTML5中,使用关联的<label>元素构建form时,不允许使用button 控件。

1.6.2 Radio buttonsets

与checkbox 的区别仅仅在行为上,所有的<input>都必须有 name 属性。

</div>

1.7 Button 的方法

除了 destroy , disable, enable ,widget , option 这些公共的方法,button 控件只暴露了一个自定义的方法,refresh方法。它用来以代码的方式改变checkbox 和 raido 的状态。

});

当 Select all button被点击,我们设置 cheked 属性为 true 。这会检查底层并且隐藏的check boxes,单不会对作为button显示的<label>元素做任何事情。更新这些button 的状态,让他们显示被选中,需要调用 refresh 方法。

2 autocomplete 控件

});

在配置对象中,使用了 source 选项,指定了一个本地字符串数组。source选项时强制性地,必须被定义。

2.1 使用对象数组作为数据源

var autoOpts = {
source: [
{ value: "AB", label: "Aberdeen" },
{ value: "AR", label: "Armagh" }
]
}

每个对象有两个keys : value 和 label 。value的值是选中的值,label 用来显示在建议的选择列表中。如果某一个对象只有一个 key,则它既是value 也是 label。

2.2 配置 autocomplete 选项

Option Default Value Used to…
appendTo “body” 指定将控件添加到哪个元素上
autofocus false 当显示建议列表时,focus第一个建议
delay 300 指定浏览者输入字符后,延迟显示建议列表的milliseconds数
disabled false 禁用控件
minLength 1 指定在显示建议列表前,访问者需要输入的最短字符长度
position {my:”left top”,at:”left bottom”,collision:”none”} 指定建议列表应该显示在相对<input>的位置。它和 position 功能接受一样的值
source   指定用来填充建议列表的数据源。这个选项是强制和必须被配置的。它接受一个数组,字符串,或一个函数。

2.2.1 配置最小长度

设置 minLength 选项为高于默认值1 的数,可以使建议列表变窄。在处理大量远程数据源时,这很重要,可以缩小远程数据源返回的数据。

2.2.2 将建议列表附加到一个可选的元素上

默认地,建议列表被附加到页面的<body>,position 功能用来定义列表的位置,所以他能显示到关联的<input>上。我们可以使用 appendTo 选项,改变,并制定该元素。

appendTo: "#container"

这可以使创建出来的 <ul> 被附加到 container上,而不是body上。

2.3 autocomplete 事件

Evnet Fired when…
change 列表中的一个建议被选中。这个事件会被触发,一旦列表已经关闭,并且<input>已经社区focus
close 建议列表已经关闭
create 一个控件实例被创建
focus 键盘被用来focus一个建议
open 建议目录被显示
search 请求将要显示的建议
select 一个建议被选中

当我们使用一个对象数组作为数据源,对象中有超过 label 和 value 属性之外的附加数据时,select事件此时很有用。

$(function(){
var autoOpts = {
source: [
{ 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);
}
else{
$("<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 方法

Method Used to…
close 关闭建议目录
search 从数据源请求建议列表,指定 search term 作为可选参数

2.5 使用远程数据源

2.5.1 使用一个字符串作为数据源选项的值

var autoOpts = {
source: "http://danwellman.co.uk/countries.php?callback=?"
};

因此,当使用一个字符串作为数据源选项的值时,传回来的数据应该是一个对象数组。每个对象包含至少一个key ,label。数据可以通过 cross-domain 请求获得 JSON 或 JSONP 。控件会自动在输入的字符后,添加查询字符串 term=   。

当我们从我们不能控制的公共网络服务器获取数据时,数据格式也许不正确。我们需要使用一个函数作为数据源选项的值,手工转换数据。

2.5.2 使用函数作为数据源选项的值

我们使用函数请求数据,处理数据,然后将其传给控件。

var autoOpts={
source:function(req,resp){
$.getJSON("http://danwellman.co.uk/contacts.php?callback=?",
req,
function(data){
var suggestions=[];
$.each(data,function(i,val){
var obj={};
obj.value=val.name;
obj.email=val.email;
suggestions.push(obj);
});
resp(suggestions);
});
},
select:function(e,ui){
var emailList=$("#emails"),
emails=emailList.val().split(","),//split分割出来的是数组 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();
});
//delegate() 方法为指定的元素(属于被选元素的一个或多个子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 //使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。 $("#toList").delegate("a","click",function(){
var email=$(this).parent().data("email"),
emails=$(this).val().split(",");
$(this).parent().remove();
$.each(emails,function(i,val){
if(val===email){
emails.splice(i,1);//从数组中移除某些元素, StartIndex,Count }
});
$("#emails").val(emails);
});
#formWrap{ padding:10px;position:absolute;background-color:#000; background:rgba(82,82,82,0.7);border-radius:8px; font:bold 14px "lucida grande",tahoma,verdana,arial,sans-serif; } #formWrap a:hover{color:#ff0000;} #messageForm{ width:467px;border:1px solid #666;background-color:#eee; } #messageForm fieldset{ padding:0;margin:0;position:relative;border:none #CCC; background-color:#fff; } #messageForm legend{ visibility:hidden;height:0; } #messageForm span{ display:block;width:467p;padding:10px 0;background-color:#6D84B4; border:#3B5998 #3B5998;color:#fff;text-indent:20px; } .inner-form{padding:20px;} #toList{ width:349px;min-height:27px;padding:3px 3px 0 3px; border:1px solid #6D84B4; mairgin-bottom:8px;float:left; background-color:#fff;cursor:text; } #messageForm #to{ width:10px;padding:0;position:relative;top:4px;float:left; border:none; } #messageForm input,#messageForm textarea{ display:block;width:349px;padding:3px;border:1px solid #6D84B4; float:left;outline:none; } #messageForm textarea{resize:vertical;} #messageForm label{ width:60px;margin:7px 10px 0 0;float:left;corlor:#666; font-size:11px;text-align:right; } .buttons{padding:10px 20px;background-color:#f2f2f2;} .button a{ margin:3px 10px 0 0;float:right;font-size:11px;color:#6D84B4; } .buttons button{float:right} #toList span{ width:auto;margin:0 3px 3px 0;padding:3px 20px 4px 8px; border:1px solid #9DACCC; border-radius:3px;position:relative; float:left;font-size:11px;font-weight:normal;text-indent:0; background-color:#E2E6F0;color:#1C2A47; } #toList span a{ position:absolute;right:7px;top:1px;color:#666; font-weight:bold;font-size:12px;text-decoration:none; } .ui-menu .ui-menu-item{ white-space:nowrap;padding:0 10px 0 0; } </style>

jsonp1376905372318([{"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,来高亮用户输入的字符。

$(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.value;
obj.label=val.label.replace(regEx,"<span>"+req.term+"</span>");
suggestions.push(obj);
}
});
resp(suggestions);
}
};
$("#city").autocomplete(autoOpts);
});
span { color:red !important;} </style>

在我们的配置对象中,我们指定一个新选项 html  被设为 true ,用来结合 html 扩展。

我们创建一个新的空数组,定义了一个新的正则表达式对象,它会在毫无知觉的情况下,匹配用户输入的字符。

上一篇:【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能


下一篇:【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件