转载请注明文章来源自http://www.dabaii.com/
上周五工作太忙，周末周日休息。今天继续更新。
之前我介绍了3个组件，缺没写一个demo来掩饰。呵呵，应为单独演示一个组件貌似看不出jQuery UI的强大。所以我打算至少学习完一组组件以后再写一个demo来演示他的强大。
selectable 这个组件主要用于选择对象，不如说 我有菜单5个，我点击选中其中一个。或者 用鼠标框住连续的几个。在我没有看过比较牛x的效果之前，我也不知道这个组件是干嘛的。但是本着我一贯依葫芦画瓢的态度，反正先弄明白他的属性再说。弄明白了，以后总归用得到的。
题外话，这些关于jQuery UI的文章我也是自己慢慢看的，肯定有些地方解释得活着分析得不够得当或者贴切，我都声明过了这个是我的个人笔记分享，不要当成是真理。如果你要确保资料的可靠性 请学好英语和培养好理解能力看官方的api。
首先我们要应用一下文件。
XML/HTML代码
- <link type="text/css" href="development-bundle/themes/base/ui.all.css" rel="stylesheet" />
- <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="development-bundle/ui/ui.core.js"></script>
- <script type="text/javascript" src="development-bundle/ui/ui.selectable.js"></script>
属性：
cancel：
属性是选择器，所选择的对象不加载selectable这个方法。
一下列表中 id为 a的是不能通过点击选中的。
XML/HTML代码
- <script type="text/javascript">
- $(function() {
- $("#selectable").selectable({ cancel: '#a' });
- });
- </script>
- ....
- <ol id="selectable">
- <li class="ui-widget-content">Item 1</li>
- <li class="ui-widget-content">Item 2</li>
- <li class="ui-widget-content">Item 3</li>
- <li class="ui-widget-content" id="a">Item 4</li>
- <li class="ui-widget-content">Item 5</li>
- <li class="ui-widget-content">Item 6</li>
- <li class="ui-widget-content">Item 7</li>
- </ol>
delay：
鼠标按下后停留多少毫秒以后才能框住几个。
distance：
设置鼠标框住多少距离以后才实现效果。
