jQuery.ui.1.7.2-selectable中文文档

这一部分是由网友"痴呆"完成翻译的,

他的联系QQ: 25046827

 

 

<?xml version="1.0" encoding="utf-8"?> <!-- 注意事项: 1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议 2. 格式中的所有项都是选填, 如果没有, 不写就是了. 3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<!--[CDATA[这中间写内容]]> 4. 翻译过程中, 一块对应的是一个<translate />标签. 5. 希望大家工作愉快. --> <project> <translate item="selectable" version="1.7.2"> <translators> <translator nickname="痴呆" name="痴呆" mail="[email protected]" homepage="http://blog.csdn.net/chidaidl" qq="25046827" /> </translators> <overview> <original><![CDATA[JQuery UI Selectable 插件可使你通过拖动鼠标来选页面元素.你也可以按住Ctrl/Meda键，然后拖动或者点击鼠标来实现多选]]></original> <remark><![CDATA[]]></remark> </overview> <options> <option name="autoRefresh" default="true"> <types> <type name="Boolean"> <options> <option> <value><![CDATA[true]]></value> <comment><![CDATA[在每次开始选择操作时,自动重新计算可选元素的位置和大小]]></comment> </option> <option> <value><![CDATA[false]]></value> <comment><![CDATA[如果你有非常非常多的可选元素时，你可能需要设置此选项为false, 然后在需要的时候调用refresh方法]]></comment> </option> </options> <description><![CDATA[]]></description> </type> </types> <description><![CDATA[用来决定在每次选择操作前,是否重新计算元素的位置和大小]]></description> <demos> <demo> <comment><![CDATA[初始化时设置]]></comment> <code><![CDATA[$('.selector').selectable({ autoRefresh: false });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var autoRefresh = $('.selector').selectable('option', 'autoRefresh');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').selectable('option', 'autoRefresh', false);]]></code> </demo> </demos> </option> <option name="cancel" default=":input,option"> <types> <type name="Selector"> <options> <option> <value><![CDATA[:input,option]]></value> <comment><![CDATA[选择操作不能从input或者option元素开始]]></comment> </option> </options> <description><![CDATA[Selector(类型器)]]></description> </type> </types> <description><![CDATA[选择操作不能从通过选择器指定的这类元素开始]]></description> <demos> <demo> <comment><![CDATA[初始化时设置]]></comment> <code><![CDATA[$('.selector').selectable({ cancel: ':input,option' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var cancel = $('.selector').selectable('option', 'cancel');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').selectable('option', 'cancel', ':input,option');]]></code> </demo> </demos> </option> <option name="delay" default="0"> <types> <type name="Integer"> <options> <option> <value><![CDATA[0]]></value> <comment><![CDATA[默认值]]></comment> </option> </options> <description><![CDATA[Integer(整型),单位是毫秒]]></description> </type> </types> <description> <![CDATA[可选择控件从鼠标左键按下开始, 到开始选择的延时. 该选项可以被用来阻止一些不期望的点击带来的无效选择. 具体效果是: 一次选择, 从鼠标左键按下, 到delay指定的时间, 如果鼠标左键还没有松开, 那么就认为这次选择有效, 否则, 认为这次选择无效. 比如说有时候你仅仅是想点击某一元素而并不想选择，那么设置此选项到一合理值就可避免一点击就触发选择操作的情况]]></description> <demos> <demo> <comment><![CDATA[初始化时设置]]></comment> <code><![CDATA[$('.selector').selectable({ delay: 20 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var delay = $('.selector').selectable('option', 'delay');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').selectable('option', 'delay', 20);]]></code> </demo> </demos> </option> <option name="distance" default="0"> <types> <type name="Integer"> <options> <option> <value><![CDATA[0]]></value> <comment><![CDATA[默认值]]></comment> </option> </options> <description><![CDATA[Integer(整型)，单位是像素]]></description> </type> </types> <description> <![CDATA[可选择控件从鼠标左键按下开始, 到选择开始时的鼠标必须产生的位移. 该选项可以被用来阻止一些不期望的点击带来的无效选择. 具体效果是: 一次选择, 从鼠标左键按下, 只有当鼠标产生的位移达到distance指定的值时, 才会开始选择]]> </description> <demos> <demo> <comment><![CDATA[初始化时设置]]></comment> <code><![CDATA[$('.selector').selectable({ distance: 20 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var distance = $('.selector').selectable('option', 'distance');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').selectable('option', 'distance', 20);]]></code> </demo> </demos> </option> <option name="filter" default="'*'"> <types> <type name="Selector"> <options> <option> <value><![CDATA['*']]></value> <comment><![CDATA[默认值]]></comment> </option> </options> <description><![CDATA[Selector(选择器)]]></description> </type> </types> <description> <![CDATA[通过选择器来指定那些子元素可选]]> </description> <demos> <demo> <comment><![CDATA[初始化时设置]]></comment> <code><![CDATA[$('.selector').selectable({ filter: 'li' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var filter = $('.selector').selectable('option', 'filter');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').selectable('option', 'filter', 'li');]]></code> </demo> </demos> </option> <option name="tolerance" default="'touch'"> <types> <type name="String"> <options> <option> <value><![CDATA['touch']]></value> <comment><![CDATA[默认值,draggable完全进入droppable]]></comment> </option> <option> <value><![CDATA['fit']]></value> <comment><![CDATA[draggable任意部分进入droppable]]></comment> </option> </options> <description><![CDATA[Selector(选择器)]]></description> </type> </types> <description> <![CDATA[通过选择器来指定那些子元素可选]]> </description> <demos> <demo> <comment><![CDATA[初始化时设置]]></comment> <code><![CDATA[$('.selector').selectable({ tolerance: 'fit' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var tolerance = $('.selector').selectable('option', 'tolerance');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').selectable('option', 'tolerance', 'fit');]]></code> </demo> </demos> </option> </options> <events> <event name="selected"> <relatives> <innerrelative item="" type="" name=""><![CDATA[]]></innerrelative> <outerrelative name="" url=""><![CDATA[]]></outerrelative> </relatives> <trigger><![CDATA[]]></trigger> <arguments> <argument name="event"> <![CDATA[]]> </argument> <argument name="ui"> <![CDATA[ui.selected指向当前事件对应元素的Dom对象]]> </argument> </arguments> <description><![CDATA[选择完成后，为每个被添加到被选项中的元素触发此事件]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code> <![CDATA[$('.selector').selectable({ selected: function(event, ui) { ... } });]]> </code> </demo> <demo> <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]]></comment> <code> <![CDATA[$('.selector').bind('selected', function(event, ui) { ... })]]> </code> </demo> </demos> </event> <event name="selecting"> <relatives> <innerrelative item="" type="" name=""><![CDATA[]]></innerrelative> <outerrelative name="" url=""><![CDATA[]]></outerrelative> </relatives> <trigger><![CDATA[]]></trigger> <arguments> <argument name="event"> <![CDATA[]]> </argument> <argument name="ui"> <![CDATA[ui.selecting指向当前事件对应元素的Dom对象]]> </argument> </arguments> <description><![CDATA[选择进行中，为每个被添加到被选项中的元素触发此事件]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code> <![CDATA[$('.selector').selectable({ selecting: function(event, ui) { ... } });]]> </code> </demo> <demo> <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]]></comment> <code> <![CDATA[$('.selector').bind('selecting', function(event, ui) { ... })]]> </code> </demo> </demos> </event> <event name="start"> <relatives> <innerrelative item="" type="" name=""><![CDATA[]]></innerrelative> <outerrelative name="" url=""><![CDATA[]]></outerrelative> </relatives> <arguments> <argument name="event"> <![CDATA[]]> </argument> <argument name="ui"> <![CDATA[]]> </argument> </arguments> <description><![CDATA[选择开始时触发]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code> <![CDATA[$('.selector').selectable({ start: function(event, ui) { ... } });]]> </code> </demo> <demo> <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]]></comment> <code> <![CDATA[$('.selector').bind('selectorbalestart', function(event, ui) { ... })]]> </code> </demo> </demos> </event> <event name="stop"> <relatives> <innerrelative item="" type="" name=""><![CDATA[]]></innerrelative> <outerrelative name="" url=""><![CDATA[]]></outerrelative> </relatives> <arguments> <argument name="event"> <![CDATA[]]> </argument> <argument name="ui"> <![CDATA[]]> </argument> </arguments> <description><![CDATA[选择结束时触发]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code> <![CDATA[$('.selector').selectable({ stop: function(event, ui) { ... } });]]> </code> </demo> <demo> <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]]></comment> <code> <![CDATA[$('.selector').bind('selectorbalestop', function(event, ui) { ... })]]> </code> </demo> </demos> </event> <event name="unselected"> <relatives> <innerrelative item="" type="" name=""><![CDATA[]]></innerrelative> <outerrelative name="" url=""><![CDATA[]]></outerrelative> </relatives> <trigger><![CDATA[]]></trigger> <arguments> <argument name="event"> <![CDATA[]]> </argument> <argument name="ui"> <![CDATA[ui.unselected指向当前事件对应元素的Dom对象]]> </argument> </arguments> <description><![CDATA[选择结束时，为每个从被选项中删除的元素触发此事件]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code> <![CDATA[$('.selector').selectable({ unselected: function(event, ui) { ... } });]]> </code> </demo> <demo> <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]]></comment> <code> <![CDATA[$('.selector').bind('unselected', function(event, ui) { ... })]]> </code> </demo> </demos> </event> <event name="unselecting"> <relatives> <innerrelative item="" type="" name=""><![CDATA[]]></innerrelative> <outerrelative name="" url=""><![CDATA[]]></outerrelative> </relatives> <trigger><![CDATA[]]></trigger> <arguments> <argument name="event"> <![CDATA[]]> </argument> <argument name="ui"> <![CDATA[ui.unselecting指向当前事件对应元素的Dom对象]]> </argument> </arguments> <description><![CDATA[选择进行中，为每个从被选项中删除的元素触发此事件]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code> <![CDATA[$('.selector').selectable({ unselecting: function(event, ui) { ... } });]]> </code> </demo> <demo> <comment><![CDATA[动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.]]]></comment> <code> <![CDATA[$('.selector').bind('unselecting', function(event, ui) { ... })]]> </code> </demo> </demos> </event> </events> <methods> <method name="destroy"> <description><![CDATA[完全移除一个selectable控件, 使其回退到该元素被初始化成selectable控件之前的状态.]]></description> <demos> <demo> <code><![CDATA[$(".selector").selectable( 'destroy');]]></code> </demo> </demos> </method> <method name="disable"> <description><![CDATA[使selectable控件失效, 与enable对应.]]></description> <demos> <demo> <code><![CDATA[$(".selector").selectable('disable');]]></code> </demo> </demos> </method> <method name="enable"> <description><![CDATA[使selectable控件有效, 与disable对应.]]></description> <demos> <demo> <code><![CDATA[$(".selector").selectable('enable');]]></code> </demo> </demos> </method> <method name="option"> <arguments> <argument name="optionName " type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument> <argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument> </arguments> <description><![CDATA[获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]></description> <demos> <demo> <code><![CDATA[$(".selector").droppable('option', optionName[, value]);]]></code> </demo> </demos> </method> <method name="refresh"> <description><![CDATA[重新计算每个可选元素的位置和大小.当你设置autoRefresh为false时，在需要的时候可以调用此方法来重新计算可选元素的位置和大小]]></description> <demos> <demo> <code><![CDATA[$(".selector").selectable('refresh');]]></code> </demo> </demos> </method> </methods> <summarize> <![CDATA[ <!doctype html> <html lang="en"> <head> <meta http-equiv="content-language" content="text/html; charset=GB2312" /> <title>jQuery UI Selectable - Display as grid</title> <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" mce_href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <link type="text/css" href="./demos.css" mce_href="demos.css" rel="stylesheet" /> <mce:style type="text/css"><!-- #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: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 1em; text-align: center; } .selectable-item{width: 400px; display: block;height: 25px; margin-top:5px;} --></mce:style><style type="text/css" mce_bogus="1"> #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: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 1em; text-align: center; } .selectable-item{width: 400px; display: block;height: 25px; margin-top:5px;} </style> <mce:script src="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi"></mce:script> <mce:script type="text/javascript"><!-- google.load("jquery", "1.3.2"); google.load("jqueryui", "1.7.2"); google.setOnLoadCallback(function() { $("#selectable").selectable({ selected: function(event, ui) { $(ui.selected).text('selected'); } , selecting: function(event, ui) { $(ui.selecting).text('selecting'); } , start: function(event, ui) { $("#info").html(new Date().toString() + " start"); } , stop: function(event, ui) { $("#info").html(new Date().toString() + " stop"); } , unselected: function(event, ui) { $(ui.unselected).text('unselected'); } , unselecting: function(event, ui) { $(ui.unselecting).text('unselecting'); } }); }); // --></mce:script> </head> <body> <div style="display: block; width: 100%;"> <p>如下图所示，可通过拖动鼠标来选择多个元素</p> <img alt="Selectable.jpg" src="./Selectable.jpg" mce_src="Selectable.jpg"/> </div> <div class="demo"> <p>下面这个例子通过添加事件回调函数，可显示每一个selectee的状态变化</p> <ol id="selectable"> <li class="ui-state-default">1</li> <li class="ui-state-default">2</li> <li class="ui-state-default">3</li> <li class="ui-state-default">4</li> <li class="ui-state-default">5</li> <li class="ui-state-default">6</li> <li class="ui-state-default">7</li> <li class="ui-state-default">8</li> <li class="ui-state-default">9</li> <li class="ui-state-default">10</li> <li class="ui-state-default">11</li> <li class="ui-state-default">12</li> </ol> </div><!-- End demo --> <div id="info" style="width: 100%; float: left;display: block"></div> <div class="demo-description"> <p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p> </div><!-- End demo-description --> <div style="display: block; width: 100%;">Selectable 控件在多选的情况下，如果你想剔除某一已选元素是没有办法的, 除非你重新选择. 如果能实现ctrl/meta键+鼠标左键能切换选择与不选择的状态，就比较好了.</div> </body> </html> ]]--></summarize> </translate> </project>