如何在页面加载上加载控制键功能 [英] How Do I Load Control Key Functionality On Page Load
问题描述
我有一个Jquery可选列表 我的应用程序,如果 用户按住控件 key 它允许他们 选择多个项目 out 选择他们 序列中的class =code-keyword>。
我会喜欢 允许用户 能够 使用此功能,不包含 按 键盘
这是我的代码
Javascript链接
< link rel = stylesheet href = http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css >
< script src = http ://code.jquery.com/jquery-1.10.2.js > < / script >
< ; script src < span class =code-keyword> = http://code.jquery.com/ui/1.11.2/jquery-ui.js > < / script < span class =code-keyword>>
css style
<风格>
#反馈 { font-size : 1.4em; }
# selectable 。 ui-selecting {背景 : #FECA40; }
#可选择。 ui-selected {背景 : #F39814; color : white; }
#可选择 { list-style-type : none; margin : 0; padding : 0; width : 450px; }
#可选择 li { margin : 3px; padding : 1px; float : left; width : 100px; height : 80px; font-size : 4em ; text-align : center; }
。 resultarea {
background : #cedc98;
border-top : 1px solid#000000;
border-bottom : 1px solid#000000;
颜色 : #333333;
font-size : 14px;
}
< / style >
Javascript
< pre lang =xml> < script >
$(function(){
$(#select)。select();
});
< / script >
< script 类型 = text / javascript >
$(function(){
$(#select)。selectlect({
selected:function() {
$('#result')。val('');
$(.ui-selected,this).each(function(){
var index = $( #selectable li)。index(this);
//document.getElementById(\"#CapturedValues\").value = document.getElementById(#CapturedValues)。value +(#+(index + 1));
// document.getElementById(result)。value.append(#+(index + 1));
$('#result')。val($('#result')。val()+#+(index + 1));
// $('#CapturedValues')。val($('#result')。val());
// document.getElementById(HiddenResult)。value = document.getElementById('inflowperc')。value;
//document.getElementById(\"CapturedValues)。val(result.append(#+(index + 1)));
//alert(document.getElementById(\"CapturedValues)。val(result.append(#+(index + 1))));
});
;
}
});
});
< / script >
Html
< ol id = 可选 >
< li class = ui-state-default Id = 1 style = 宽度:34px;高度:34px; > 1 < / li >
< li class = ui-state-default Id = 2 < span class =code-attribute> style = width:34px;高度:34px; > 2 < / li >
< li class = ui-state-default Id = 3 < span class =code-attribute> style = width:34px;高度:34px; > 3 < / li >
< li class = ui-state-default Id = 4 < span class =code-attribute> style = width:34px;高度:34px; > 4 < / li >
< li class = ui-state-default Id = 5 < span class =code-attribute> style = width:34px;高度:34px; > 5 < / li >
< li class = ui-state-default Id = 6 < span class =code-attribute> style = width:34px;高度:34px; > 6 < / li >
< li class = ui-state-default Id = 7 < span class =code-attribute> style = width:34px;高度:34px; > 7 < / li >
< li class = ui-state-default Id = 8 < span class =code-attribute> style = width:34px;高度:34px; > 8 < / li >
< li class = ui-state-default Id = 9 < span class =code-attribute> style = width:34px;高度:34px; > 9 < / li >
< li class = ui-state-default Id = 10 < span class =code-attribute> style = width:34px;高度:34px; > 10 < / li >
< li class = ui-state-default Id = 11 < span class =code-attribute> style = width:34px;高度:34px; > 11 < / li >
< li class = ui-state-default Id = 12 < span class =code-attribute> style = width:34px;高度:34px; > 12 < / li >
< li class = ui-state-default Id = 13 < span class =code-attribute> style = width:34px;高度:34px; > 13 < / li >
< li class = ui-state-default Id = 14 < span class =code-attribute> style = width:34px;高度:34px; > 14 < / li >
< li class = ui-state-default Id = 15 < span class =code-attribute> style = width:34px;高度:34px; > 15 < / li >
< li class = ui-state-default Id = 16 < span class =code-attribute> style = width:34px;高度:34px; > 16 < / li >
< li class = ui-state-default Id = 17 < span class =code-attribute> style = width:34px;高度:34px; > 17 < / li >
< li class = ui-state-default Id = 18 < span class =code-attribute> style = width:34px;高度:34px; > 18 < / li >
< li class = ui-state-default Id = 19 < span class =code-attribute> style = width:34px;高度:34px; > 19 < / li >
< li class = ui-state-default Id = 20 < span class =code-attribute> style = width:34px;高度:34px; > 20 < / li >
< li class = ui-state-default Id = 21 < span class =code-attribute> style = width:34px;高度:34px; > 21 < / li >
< li class = ui-state-default Id = 22 < span class =code-attribute> style = width:34px;高度:34px; > 22 < / li >
< li class = ui-state-default Id = 23 < span class =code-attribute> style = width:34px;高度:34px; > 23 < / li >
< li class = ui-state-default Id = 24 < span class =code-attribute> style = width:34px;高度:34px; > 24 < / li >
< li class = ui-state-default Id = 25 < span class =code-attribute> style = width:34px;高度:34px; > 25 < / li >
< li class = ui-state-default Id = 26 < span class =code-attribute> style = width:34px;高度:34px; > 26 < / li >
< li class = ui-state-default Id = 27 < span class =code-attribute> style = width:34px;高度:34px; > 27 < / li >
< li class = ui-state-default Id = 28 < span class =code-attribute> style = width:34px;高度:34px; > 28 < / li >
< li class = ui-state-default Id = 29 < span class =code-attribute> style = width:34px;高度:34px; > 29 < / li >
< li class = ui-state-default Id = 30 < span class =code-attribute> style = width:34px;高度:34px; > 30 < / li >
< li class = ui-state-default Id = 31 < span class =code-attribute> style = width:34px;高度:34px; > 31 < /li>
<li class=\" ui-state-default\" Id=\"32\" < span class=\"code-attribute\">style=\"width: 34px; height: 34px;\">32</li>
<li class=\"ui-state-default\" Id=\"33\" style=\"width: 34px; height: 34px;\">33</li>
<li class=\"ui-state-default\" Id=\"34\" style=\"width: 34px; height: 34px;\">34</li>
<li class=\"ui-state-default\" Id=\"35\" style=\"width: 34px; height: 34px;\">35</li>
<li class=\"ui-state-default\" Id=\"36\" style=\"width: 34px; height: 34px;\">36</li>
<li class=\"ui-state-default\" Id=\"37\" style=\"width: 34px; height: 34px;\">37</li>
<li class=\"ui-state-default\" Id=\"38\" style=\"width: 34px; height: 34px;\">38</li>
<li class=\"ui-state-default\" Id=\"39\" style=\"width: 34px; height: 34px;\">39</li>
<li class=\"ui-state-default\" Id=\"40\" style=\"width: 34px; height: 34px;\">40</li>
<li class=\"ui-state-default\" Id=\"41\" style=\"width: 34px; height: 34px;\">41</li>
<li class=\"ui-state-default\" Id=\"42\" style=\"width: 34px; height: 34px;\">42</li>
<li class=\"ui-state-default\" Id=\"43\" style=\"width: 34px; height: 34px;\">43</li>
<li class=\"ui-state-default\" Id=\"44\" style=\"width: 34px; height: 34px;\">44</li>
<li class=\"ui-state-default\" Id=\"45\" style=\"width: 34px; height: 34px;\">45</li>
<li class=\"ui-state-default\" Id=\"46\" style=\"width: 34px; height: 34px;\">46</li>
<li class=\"ui-state-default\" Id=\"47\" style=\"width: 34px; height: 34px;\">47</li>
<li class=\"ui-state-default\" Id=\"48\" style=\"width: 34px; height: 34px;\">48</li>
<li class=\"ui-state-default\" Id=\"49\" style=\"width: 34px; height: 34px;\">49</li>
<li class=\"ui-state-default\" Id=\"50\" style=\"width: 34px; height: 34px;\">50</li>
<li class=\"ui-state-default\" Id=\"51\" style=\"width: 34px; height: 34px;\">51</li>
<li class=\"ui-state-default\" Id=\"52\" style=\"width: 34px; height: 34px;\">52</li>
<li class=\"ui-state-default\" Id=\"53\" style=\"width: 34px; height: 34px;\">53</li>
<li class=\"ui-state-default\" Id=\"54\" style=\"width: 34px; height: 34px;\">54</li>
<li class=\"ui-state-default\" Id=\"55\" style=\"width: 34px; height: 34px;\">55</li>
<li class=\"ui-state-default\" Id=\"56\" style=\"width: 34px; height: 34px;\">56</li>
<li class=\"ui-state-default\" Id=\"57\" style=\"width: 34px; height: 34px;\">57</li>
<li class=\"ui-state-default\" Id=\"58\" style=\"width: 34px; height: 34px;\">58</li>
<li class=\"ui-state-default\" Id=\"59\" style=\"width: 34px; height: 34px;\">59</li>
<li class=\"ui-state-default\" Id=\"60\" style=\"width: 34px; height: 34px;\">60</li>
<li class=\"ui-state-default\" Id=\"61\" style=\"width: 34px; height: 34px;\">61</li>
<li class=\"ui-state-default\" Id=\"62\" style=\"width: 34px; height: 34px;\">62</li>
<li class=\"ui-state-default\" Id=\"63\" style=\"width: 34px; height: 34px;\">63</li>
<li class=\"ui-state-default\" Id=\"64\" style=\"width: 34px; height: 34px;\">64</li>
<li class=\"ui-state-default\" Id=\"65\" style=\"width: 34px; height: 34px;\">65</li>
<li class=\"ui-state-default\" Id=\"66\" style=\"width: 34px; height: 34px;\">66</li>
<li class=\"ui-state-default\" Id=\"67\" style=\"width: 34px; height: 34px;\">67</li>
<li class=\"ui-state-default\" Id=\"68\" style=\"width: 34px; height: 34px;\">68</li>
<li class=\"ui-state-default\" Id=\"69\" style=\"width: 34px; height: 34px;\">69</li>
<li class=\"ui-state-default\" Id=\"70\" style=\"width: 34px; height: 34px;\">70</li>
<li class=\"ui-state-default\" Id=\"71\" style=\"width: 34px; height: 34px;\">71</li>
<li class=\"ui-state-default\" Id=\"72\" style=\"width: 34px; height: 34px;\">72</li>
<li class=\"ui-state-default\" Id=\"73\" style=\"width: 34px; height: 34px;\">73</li>
<li class=\"ui-state-default\" Id=\"74\" style=\"width: 34px; height: 34px;\">74</li>
<li class=\"ui-state-default\" Id=\"75\" style=\"width: 34px; height: 34px;\">75</li>
<li class=\"ui-state-default\" Id=\"76\" style=\"width: 34px; height: 34px;\">76</li>
<li class=\"ui-state-default\" Id=\"77\" style=\"width: 34px; height: 34px;\">77</li>
<li class=\"ui-state-default\" Id=\"78\" style=\"width: 34px; height: 34px;\">78</li>
<li class=\"ui-state-default\" Id=\"79\" style=\"width: 34px; height: 34px;\">79</li>
<li class=\"ui-state-default\" Id=\"80\" style=\"width: 34px; height: 34px;\">80</li>
<li class=\"ui-state-default\" Id=\"81\" style=\"width: 34px; height: 34px;\">81</li>
<li class=\"ui-state-default\" Id=\"82\" style=\"width: 34px; height: 34px;\">82</li>
<li class=\"ui-state-default\" Id=\"83\" style=\"width: 34px; height: 34px;\">83</li>
<li class=\"ui-state-default\" Id=\"84\" style=\"width: 34px; height: 34px;\">84</li>
<li class=\"ui-state-default\" Id=\"85\" style=\"width: 34px; height: 34px;\">85</li>
<li class=\"ui-state-default\" Id=\"86\" style=\"width: 34px; height: 34px;\">86</li>
<li class=\"ui-state-default\" Id=\"87\" style=\"width: 34px; height: 34px;\">87</li>
<li class=\"ui-state-default\" Id=\"88\" style=\"width: 34px; height: 34px;\">88</li>
<li class=\"ui-state-default\" Id=\"89\" style=\"width: 34px; height: 34px;\">89</li>
<li class=\"ui-state-default\" Id=\"90\" style=\"width: 34px; height: 34px;\">90</li>
<li class=\"ui-state-default\" Id=\"91\" style=\"width: 34px; height: 34px;\">91</li>
<li class=\"ui-state-default\" Id=\"92\" style=\"width: 34px; height: 34px;\">92</li>
<li class=\"ui-state-default\" Id=\"93\" style=\"width: 34px; height: 34px;\">93</li>
<li class=\"ui-state-default\" Id=\"94\" style=\"width: 34px; height: 34px;\">94</li>
<li class=\"ui-state-default\" Id=\"95\" style=\"width: 34px; height: 34px;\">95</li>
<li class=\"ui-state-default\" Id=\"96\" style=\"width: 34px; height: 34px;\">96</li>
<li class=\"ui-state-default\" Id=\"97\" style=\"width: 34px; height: 34px;\">97</li>
<li class=\"ui-state-default\" Id=\"98\" style=\"width: 34px; height: 34px;\">98</li>
<li class=\"ui-state-default\" Id=\"99\" style=\"width: 34px; height: 34px;\">99</li>
<li class=\"ui-state-default\" Id=\"100\" style=\"width: 34px; height: 34px;\">100</li>
</ol>
<span class=\"resultarea\">Selected Product</span>>
<input type=\"text\" id=\"result\" name=\"result\" class=\"resultarea\"></input>
(function() {
( \"#selectable\" ).selectable();
});
</script>
<script type=\"text/javascript\">
(function() {
I have a Jquery selectable list on one of my applications, if a user holds down the control key it allows them to select multiple items with out having to select them in a sequence.
I would like to allow the users to be able to use this functionality without having to press the Ctrl button on their keyboard
This is my code
Javascript link
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
css style
<style>
#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; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
Javascript
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
<script type="text/javascript">
$(function() {
$( "#selectable" ).selectable({
selected: function() {
$('#result').val('');
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
//document.getElementById("#CapturedValues").value = document.getElementById("#CapturedValues").value + (" #" + (index + 1));
// document.getElementById("result").value.append(" #" + (index + 1));
$('#result').val($('#result').val() + " #" + (index + 1));
// $('#CapturedValues').val($('#result').val());
// document.getElementById("HiddenResult").value = document.getElementById('inflowperc').value;
//document.getElementById("CapturedValues").val(result.append(" #" + (index + 1)));
//alert(document.getElementById("CapturedValues").val(result.append(" #" + (index + 1))));
});
;
}
});
});
</script>
Html
<ol id="selectable">
<li class="ui-state-default" Id="1" style="width: 34px; height: 34px;">1</li>
<li class="ui-state-default" Id="2" style="width: 34px; height: 34px;">2</li>
<li class="ui-state-default" Id="3" style="width: 34px; height: 34px;">3</li>
<li class="ui-state-default" Id="4" style="width: 34px; height: 34px;">4</li>
<li class="ui-state-default" Id="5" style="width: 34px; height: 34px;">5</li>
<li class="ui-state-default" Id="6" style="width: 34px; height: 34px;">6</li>
<li class="ui-state-default" Id="7" style="width: 34px; height: 34px;">7</li>
<li class="ui-state-default" Id="8" style="width: 34px; height: 34px;">8</li>
<li class="ui-state-default" Id="9" style="width: 34px; height: 34px;">9</li>
<li class="ui-state-default" Id="10" style="width: 34px; height: 34px;">10</li>
<li class="ui-state-default" Id="11" style="width: 34px; height: 34px;">11</li>
<li class="ui-state-default" Id="12" style="width: 34px; height: 34px;">12</li>
<li class="ui-state-default" Id="13" style="width: 34px; height: 34px;">13</li>
<li class="ui-state-default" Id="14" style="width: 34px; height: 34px;">14</li>
<li class="ui-state-default" Id="15" style="width: 34px; height: 34px;">15</li>
<li class="ui-state-default" Id="16" style="width: 34px; height: 34px;">16</li>
<li class="ui-state-default" Id="17" style="width: 34px; height: 34px;">17</li>
<li class="ui-state-default" Id="18" style="width: 34px; height: 34px;">18</li>
<li class="ui-state-default" Id="19" style="width: 34px; height: 34px;">19</li>
<li class="ui-state-default" Id="20" style="width: 34px; height: 34px;">20</li>
<li class="ui-state-default" Id="21" style="width: 34px; height: 34px;">21</li>
<li class="ui-state-default" Id="22" style="width: 34px; height: 34px;">22</li>
<li class="ui-state-default" Id="23" style="width: 34px; height: 34px;">23</li>
<li class="ui-state-default" Id="24" style="width: 34px; height: 34px;">24</li>
<li class="ui-state-default" Id="25" style="width: 34px; height: 34px;">25</li>
<li class="ui-state-default" Id="26" style="width: 34px; height: 34px;">26</li>
<li class="ui-state-default" Id="27" style="width: 34px; height: 34px;">27</li>
<li class="ui-state-default" Id="28" style="width: 34px; height: 34px;">28</li>
<li class="ui-state-default" Id="29" style="width: 34px; height: 34px;">29</li>
<li class="ui-state-default" Id="30" style="width: 34px; height: 34px;">30</li>
<li class="ui-state-default" Id="31" style="width: 34px; height: 34px;">31</li>
<li class="ui-state-default" Id="32" style="width: 34px; height: 34px;">32</li>
<li class="ui-state-default" Id="33" style="width: 34px; height: 34px;">33</li>
<li class="ui-state-default" Id="34" style="width: 34px; height: 34px;">34</li>
<li class="ui-state-default" Id="35" style="width: 34px; height: 34px;">35</li>
<li class="ui-state-default" Id="36" style="width: 34px; height: 34px;">36</li>
<li class="ui-state-default" Id="37" style="width: 34px; height: 34px;">37</li>
<li class="ui-state-default" Id="38" style="width: 34px; height: 34px;">38</li>
<li class="ui-state-default" Id="39" style="width: 34px; height: 34px;">39</li>
<li class="ui-state-default" Id="40" style="width: 34px; height: 34px;">40</li>
<li class="ui-state-default" Id="41" style="width: 34px; height: 34px;">41</li>
<li class="ui-state-default" Id="42" style="width: 34px; height: 34px;">42</li>
<li class="ui-state-default" Id="43" style="width: 34px; height: 34px;">43</li>
<li class="ui-state-default" Id="44" style="width: 34px; height: 34px;">44</li>
<li class="ui-state-default" Id="45" style="width: 34px; height: 34px;">45</li>
<li class="ui-state-default" Id="46" style="width: 34px; height: 34px;">46</li>
<li class="ui-state-default" Id="47" style="width: 34px; height: 34px;">47</li>
<li class="ui-state-default" Id="48" style="width: 34px; height: 34px;">48</li>
<li class="ui-state-default" Id="49" style="width: 34px; height: 34px;">49</li>
<li class="ui-state-default" Id="50" style="width: 34px; height: 34px;">50</li>
<li class="ui-state-default" Id="51" style="width: 34px; height: 34px;">51</li>
<li class="ui-state-default" Id="52" style="width: 34px; height: 34px;">52</li>
<li class="ui-state-default" Id="53" style="width: 34px; height: 34px;">53</li>
<li class="ui-state-default" Id="54" style="width: 34px; height: 34px;">54</li>
<li class="ui-state-default" Id="55" style="width: 34px; height: 34px;">55</li>
<li class="ui-state-default" Id="56" style="width: 34px; height: 34px;">56</li>
<li class="ui-state-default" Id="57" style="width: 34px; height: 34px;">57</li>
<li class="ui-state-default" Id="58" style="width: 34px; height: 34px;">58</li>
<li class="ui-state-default" Id="59" style="width: 34px; height: 34px;">59</li>
<li class="ui-state-default" Id="60" style="width: 34px; height: 34px;">60</li>
<li class="ui-state-default" Id="61" style="width: 34px; height: 34px;">61</li>
<li class="ui-state-default" Id="62" style="width: 34px; height: 34px;">62</li>
<li class="ui-state-default" Id="63" style="width: 34px; height: 34px;">63</li>
<li class="ui-state-default" Id="64" style="width: 34px; height: 34px;">64</li>
<li class="ui-state-default" Id="65" style="width: 34px; height: 34px;">65</li>
<li class="ui-state-default" Id="66" style="width: 34px; height: 34px;">66</li>
<li class="ui-state-default" Id="67" style="width: 34px; height: 34px;">67</li>
<li class="ui-state-default" Id="68" style="width: 34px; height: 34px;">68</li>
<li class="ui-state-default" Id="69" style="width: 34px; height: 34px;">69</li>
<li class="ui-state-default" Id="70" style="width: 34px; height: 34px;">70</li>
<li class="ui-state-default" Id="71" style="width: 34px; height: 34px;">71</li>
<li class="ui-state-default" Id="72" style="width: 34px; height: 34px;">72</li>
<li class="ui-state-default" Id="73" style="width: 34px; height: 34px;">73</li>
<li class="ui-state-default" Id="74" style="width: 34px; height: 34px;">74</li>
<li class="ui-state-default" Id="75" style="width: 34px; height: 34px;">75</li>
<li class="ui-state-default" Id="76" style="width: 34px; height: 34px;">76</li>
<li class="ui-state-default" Id="77" style="width: 34px; height: 34px;">77</li>
<li class="ui-state-default" Id="78" style="width: 34px; height: 34px;">78</li>
<li class="ui-state-default" Id="79" style="width: 34px; height: 34px;">79</li>
<li class="ui-state-default" Id="80" style="width: 34px; height: 34px;">80</li>
<li class="ui-state-default" Id="81" style="width: 34px; height: 34px;">81</li>
<li class="ui-state-default" Id="82" style="width: 34px; height: 34px;">82</li>
<li class="ui-state-default" Id="83" style="width: 34px; height: 34px;">83</li>
<li class="ui-state-default" Id="84" style="width: 34px; height: 34px;">84</li>
<li class="ui-state-default" Id="85" style="width: 34px; height: 34px;">85</li>
<li class="ui-state-default" Id="86" style="width: 34px; height: 34px;">86</li>
<li class="ui-state-default" Id="87" style="width: 34px; height: 34px;">87</li>
<li class="ui-state-default" Id="88" style="width: 34px; height: 34px;">88</li>
<li class="ui-state-default" Id="89" style="width: 34px; height: 34px;">89</li>
<li class="ui-state-default" Id="90" style="width: 34px; height: 34px;">90</li>
<li class="ui-state-default" Id="91" style="width: 34px; height: 34px;">91</li>
<li class="ui-state-default" Id="92" style="width: 34px; height: 34px;">92</li>
<li class="ui-state-default" Id="93" style="width: 34px; height: 34px;">93</li>
<li class="ui-state-default" Id="94" style="width: 34px; height: 34px;">94</li>
<li class="ui-state-default" Id="95" style="width: 34px; height: 34px;">95</li>
<li class="ui-state-default" Id="96" style="width: 34px; height: 34px;">96</li>
<li class="ui-state-default" Id="97" style="width: 34px; height: 34px;">97</li>
<li class="ui-state-default" Id="98" style="width: 34px; height: 34px;">98</li>
<li class="ui-state-default" Id="99" style="width: 34px; height: 34px;">99</li>
<li class="ui-state-default" Id="100" style="width: 34px; height: 34px;">100</li>
</ol>
<span class="resultarea">Selected Product</span>>
<input type="text" id="result" name="result" class="resultarea"></input>
(function() {
( "#selectable" ).selectable(); }); </script> <script type="text/javascript">
(function() {
这篇关于如何在页面加载上加载控制键功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!