按住Ctrl键来选择不连续的元素
$('.selector').selectable(options);
但是在jQuery UI库中的主题包中并未提供ui-selecting和ui-selected类的样式，因此在使用选择组件时，还需要自己来创建这些样式
复制代码 代码如下:
h1 {
color:#006;
font-size:24px;
font-weight:bold;
margin-bottom:0px;
}
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #00BF00;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
width: 85%;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 16px;
height: 18px;
}
新手上路
2：过滤选择项
可以对子元素进行过滤，已指定哪些子元素是能够可选的，为此，可以在调用selectable()方法时将filter属性设置为一个jQuery选择器，此时只有与选择器相匹配的
元素才能够成为选择项
复制代码 代码如下:
* {
}
body {
text-align:center;
margin:0 auto;
padding:0;
}
#wrap {
margin: 10px auto 10px auto;
padding: 5px;
width: 520px;
height:220px;
background: #fff;
border: 5px solid #000;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
margin-bottom:0px;
text-align:center;
}
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
}
#selectable li {
margin: 5px;
padding:2px;
font-size: 16px;
height: 20px;
cursor:pointer;
border: 1px solid #aaaaaa;
background: #ffffff;
color: #222222;
width:114px;
float:left;
}
#result {
clear:both;
}
城市列表
- 重庆
- 北京
- 上海
- 广州
- 深圳
- 成都
- 天津
- 南京
- 杭州
- 武汉
- 西安
- 长沙
- 厦门
- 郑州
- 太原
- 青岛
效果图：
3：选择事件回调函数
选择事件提供了6个事件
selected, 事件类型为selectableseleted, 当把某个元素添加到选项中并且结束选择操作后触发
selecting: 事件类型为selectableselecting, 在选择过程中，当选定某个元素时触发
start: 事件类型为selectablestart, 当开始选择操作时触发
stop: 事件类型为selectablestop，当结束选择操作时触发
unselected: 事件类型为selectableunselected, 当从选定项中移除每个元素，并且结束选择操作后触发
unselecting: 事件类型为selectableunselecting, 在选择过程中，当从选定项中移除每个元素时触发
复制代码 代码如下:
* {
}
body {
text-align:center;
margin:0 auto;
padding:0;
}
#wrap {
margin: 10px auto 10px auto;
padding: 5px;
width: 520px;
height:220px;
background: #fff;
border: 5px solid #000;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
margin-bottom:0px;
text-align:center;
}
#feedback {
font-size: 1.4em;
}
#selectable .ui-selecting {
background: #FECA40;
}
#selectable .ui-selected {
background: #F39814;
color: white;
}
#selectable {
list-style-type: none;
margin: 0;
padding: 0;
}
#selectable li {
margin: 5px;
padding:2px;
font-size: 16px;
height: 20px;
cursor:pointer;
border: 1px solid #aaaaaa;
background: #ffffff;
color: #222222;
width:114px;
float:left;
}
#result {
clear:both;
}
城市列表
- 重庆
- 北京
- 上海
- 广州
- 深圳
- 成都
- 天津
- 南京
- 杭州
- 武汉
- 西安
- 长沙
- 厦门
- 郑州
- 太原
- 青岛
效果和上例相同
