本文介绍了如何在页面加载上加载控制键功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我有一个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 = http://code.jquery.com/ui/1.11.2/jquery-ui.js > < / script > 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 < 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 style = width:34px;高度:34px; > 2 < / li > < li class = ui-state-default Id = 3 style = width:34px;高度:34px; > 3 < / li > < li class = ui-state-default Id = 4 style = width:34px;高度:34px; > 4 < / li > < li class = ui-state-default Id = 5 style = width:34px;高度:34px; > 5 < / li > < li class = ui-state-default Id = 6 style = width:34px;高度:34px; > 6 < / li > < li class = ui-state-default Id = 7 style = width:34px;高度:34px; > 7 < / li > < li class = ui-state-default Id = 8 style = width:34px;高度:34px; > 8 < / li > < li class = ui-state-default Id = 9 style = width:34px;高度:34px; > 9 < / li > < li class = ui-state-default Id = 10 style = width:34px;高度:34px; > 10 < / li > < li class = ui-state-default Id = 11 style = width:34px;高度:34px; > 11 < / li > < li class = ui-state-default Id = 12 style = width:34px;高度:34px; > 12 < / li > < li class = ui-state-default Id = 13 style = width:34px;高度:34px; > 13 < / li > < li class = ui-state-default Id = 14 style = width:34px;高度:34px; > 14 < / li > < li class = ui-state-default Id = 15 style = width:34px;高度:34px; > 15 < / li > < li class = ui-state-default Id = 16 style = width:34px;高度:34px; > 16 < / li > < li class = ui-state-default Id = 17 style = width:34px;高度:34px; > 17 < / li > < li class = ui-state-default Id = 18 style = width:34px;高度:34px; > 18 < / li > < li class = ui-state-default Id = 19 style = width:34px;高度:34px; > 19 < / li > < li class = ui-state-default Id = 20 style = width:34px;高度:34px; > 20 < / li > < li class = ui-state-default Id = 21 style = width:34px;高度:34px; > 21 < / li > < li class = ui-state-default Id = 22 style = width:34px;高度:34px; > 22 < / li > < li class = ui-state-default Id = 23 style = width:34px;高度:34px; > 23 < / li > < li class = ui-state-default Id = 24 style = width:34px;高度:34px; > 24 < / li > < li class = ui-state-default Id = 25 style = width:34px;高度:34px; > 25 < / li > < li class = ui-state-default Id = 26 style = width:34px;高度:34px; > 26 < / li > < li class = ui-state-default Id = 27 style = width:34px;高度:34px; > 27 < / li > < li class = ui-state-default Id = 28 style = width:34px;高度:34px; > 28 < / li > < li class = ui-state-default Id = 29 style = width:34px;高度:34px; > 29 < / li > < li class = ui-state-default Id = 30 style = width:34px;高度:34px; > 30 < / li > < li class = ui-state-default Id = 31 style = width:34px;高度: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() {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 keyboardThis is my codeJavascript 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() { 这篇关于如何在页面加载上加载控制键功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
07-18 01:27
查看更多