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】.学习笔记.10.Button 和 Autocomplete控件的更多相关文章

  1. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  2. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.8.Datepicker控件

    默认datepicker的安装启用 探索它的配置选项 安装启用一个触发按钮 配置一个供选择的动画 dateFormat选项 简单的国际化 多月datepicker 日期范围选择 datepicker的 ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件

    默认slider的安装启用 为slider自定义风格 修改配置选项 创建一个垂直的slider 设置最大最小值,和默认值 启用多个 手柄 和 范围 slider内置的回调事件 slider的方法 这个 ...

  4. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件

    accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...

  5. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件

    之前,我们已经介绍了 jQuery UI 库,CSS 框架.下面,我们将学习这些有增强可视化效果,高度可配置的用户交互组件. Tab 的特性是,点击 tab 后,会高亮该 tab,并显示他的关联con ...

  6. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件

    像jQuery提供 fn.extend() 方法从而可以简单地创建插件一样,jQuery UI也提供了机制使得创造插件变得简单,也确保了公共API功能在新的插件中被保留. 1.首先,创建一个名为  j ...

  7. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

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

    jquery.ui.all.css 1.所有主题必须的文件都包含在这个文件中.它由ui.base.css和ui.them.css两个文件中拉入的@import执行构成. jquery.ui.base. ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.9.Progressbar控件

    Progressbar控件用来显示任意进程的完成百分比. 默认安装启用 配置选项 控件暴露的事件API progressbar暴露的独一无二的方法 一些现实生活的例子 当前版本中,我们或系统必须明确进 ...

随机推荐

  1. MAC下Android的Eclipse开发环境的搭建

    一.Eclipse的下载 到网站:http://www.eclipse.org/downloads/ 上,由于我们是用Java开发的所以步骤如下: 1.  找到"Eclipse IDE fo ...

  2. VS中查看/修改Dialog控件TAB顺序的方法

    打开资源视图,打开Dialog的编辑界面 查看: 格式>Tab键顺序 修改: 格式>Tab键顺序 用鼠标左键按你想要的顺序点击各个控件的TAB标签,就设定了 那些你想要TAB键能选择到的控 ...

  3. play项目部署

    首先对于现场的数据库,一定要谨慎谨慎再谨慎,特别是保存有重要数据的. 使用expdp命令导入数据库: 事前准备: 1.确保linux服务器上已经正确安装oracle (10g以上版本) 2.有Xshe ...

  4. C语言中静态库和动态库笔记

    库 库,故名思议,是存放东西的地方,其中存放的东西可以被多个人公用. 程序中借用库的概念,描述将代码进行抽取,这种代码被大多数程序使用, 其过程具有一定的模块化.封装.抽象的特征. 按照库的使用方式, ...

  5. css 正方体

    <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf ...

  6. 脚本:SQLServer 2008 生成某数据库中的所有索引创建脚本

    --1. get all indexes from current db, place in temp table select schemaName = s.name, tablename = ob ...

  7. iOS6:在你的企业系统中支持Passbook

    前言 这是一篇翻译,感谢Jonathan Tang. 原文地址:iOS 6 Tutorial: Supporting Passbook within Your Enterprise Systems 正 ...

  8. 【Origin】 碑铭

    快意人生潇洒过, 飘渺岁月不留痕: 他朝墓穴成青冢, 宁不留名念此生. -作于二零一五年六月十日

  9. JetBrains公司介绍(Java、Python、PHP、Ruby、前端和代码测试与重构的IDE)

    JetBrains JetBrains是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是Java编程语言开发撰写时所用的集成开 ...

  10. 在Tomcat里使用配置连接池连接数据库

    一:首先在Tomcat下的conf/context.xml文件里的contenx标签里配置数据源: <Resource name="jdbc/zzz" auth=" ...