Tìm kiếm

Code Select JS Mod

5 bài đăng
19.03.2017 / 17:07
#1
mad
mad [OFF]
Bài đăng: 2434
Member
Nhào vô cắn tao đi, tao sợ mày à cắn bừa.

Hỗ trợ:

TEXT
  1. PC window, Smart Phone

Mình không nói nhiều bây giờ share code đây:

JAVASCRIPT
  1. //SET
  2. thisSelect={};
  3. SelectCreate={};
  4. optionArray={};
  5. iAr={};
  6. function createSelect(getID){
  7. thisSelect[getID]=$('select.js_select#'+getID);
  8. thisSelect[getID].wrap('<div class="select ID_'+getID+'" style="width: '+thisSelect[getID].outerWidth()+'px"></div>');
  9. SelectCreate[getID]=$('.select.ID_'+getID);
  10. if(thisSelect[getID].attr('v')=='' || !thisSelect[getID].attr('v')){
  11. optionArray[getID]='';
  12. for(iAr[getID]=0;iAr[getID]<thisSelect[getID].find('option').length;iAr[getID]++){
  13. optionArray[getID]+='<div class="optionArray" title="'+thisSelect[getID].find('option:eq('+iAr[getID]+')').text()+'" value="'+thisSelect[getID].find('option:eq('+iAr[getID]+')').val()+'">'+thisSelect[getID].find('option:eq('+iAr[getID]+')').text()+'</div>';
  14. }
  15. SelectCreate[getID].append('<input type="checkbox" id="checkbox_select['+getID+']"><label for="checkbox_select['+getID+']"><div class="selectOption"><div class="selectThis"></div><div class="selectEvent"><i class="fa fa-caret-down"></i><i class="fa fa-caret-up"></i></div><div class="selectList"></div></div></label>');
  16. SelectCreate[getID].find('.selectOption .selectThis').text(thisSelect[getID].find('option:checked').html()).attr('title',SelectCreate[getID].find('option:checked').html());
  17. SelectCreate[getID].find('.selectOption .selectList').html(optionArray[getID]);
  18. SelectCreate[getID].find('.selectOption .selectList .optionArray').click(function(){
  19. SelectCreate[getID].find('.selectThis').text($(this).text()).attr('title',$(this).text());
  20. thisSelect[getID].val($(this).attr('value')).change();
  21. });
  22. SelectCreate[getID].find('input[type="checkbox"]').change(function(){
  23. SelectCreate[getID].find('.optionArray').removeClass('focused');
  24. countArray=SelectCreate[getID].find('.optionArray').length;
  25. ThisFocus=0;
  26. if((SelectCreate[getID].find('input[type="checkbox"]:checked').val() ? true : false)==true){
  27. $(document).unbind().on("keydown",function(){
  28. if(event.keyCode==38/* UP */){
  29. if(ThisFocus==0){
  30. ThisFocus=countArray-1;
  31. }else{
  32. ThisFocus=ThisFocus-1;
  33. }
  34. }
  35. if(event.keyCode==40/* DOWN */){
  36. if(ThisFocus==countArray-1){
  37. ThisFocus=0;
  38. }else{
  39. ThisFocus=ThisFocus+1;
  40. }
  41. }
  42. if(event.keyCode==13/* ENTER */){
  43. SelectCreate[getID].find('.selectThis').text(SelectCreate[getID].find('.optionArray:eq('+ThisFocus+')').text()).attr('title',SelectCreate[getID].find('.optionArray:eq('+ThisFocus+')').text());
  44. thisSelect[getID].val(SelectCreate[getID].find('.optionArray:eq('+ThisFocus+')').attr('value')).change();
  45. SelectCreate[getID].find('label').click();
  46. }
  47. SelectCreate[getID].find('.optionArray').removeClass('focused');
  48. SelectCreate[getID].find('.optionArray:eq('+ThisFocus+')').addClass('focused');
  49. SelectCreate[getID].find('.selectList').scrollTop(SelectCreate[getID].find('.optionArray:eq('+ThisFocus+')').outerHeight()*ThisFocus);
  50. })
  51. }else{
  52. $(document).unbind();
  53. }
  54. });
  55. }else if(thisSelect[getID].attr('v')=='manager'){
  56. optionArray[getID]='';
  57. for(iAr[getID]=0;iAr[getID]<thisSelect[getID].find('option').length;iAr[getID]++){
  58. optionArray[getID]+='<div class="optionArray_2" title="'+thisSelect[getID].find('option:eq('+iAr[getID]+')').text()+'" value="'+thisSelect[getID].find('option:eq('+iAr[getID]+')').val()+'">'+thisSelect[getID].find('option:eq('+iAr[getID]+')').text()+'</div>';
  59. }
  60. SelectCreate[getID].append('<input type="checkbox" id="checkbox_select['+getID+']"><label for="checkbox_select['+getID+']"><div class="selectOption_2"><div class="selectThis_2"></div><div class="selectEvent_2"><i class="fa fa-caret-down"></i><i class="fa fa-caret-up"></i></div><div class="selectList_2"></div></div></label>');
  61. SelectCreate[getID].find('.selectOption_2 .selectThis_2').text(thisSelect[getID].find('option:checked').html()).attr('title',SelectCreate[getID].find('option:checked').html());
  62. SelectCreate[getID].find('.selectOption_2 .selectList_2').html(optionArray[getID]);
  63. LocationID[getID]=thisSelect[getID].find('option:checked').val();
  64. SelectCreate[getID].find('.selectOption_2 .selectList_2 .optionArray_2').click(function(){
  65. SelectCreate[getID].find('.selectThis_2').text($(this).text()).attr('title',$(this).text());
  66. thisSelect[getID].val($(this).attr('value')).change();
  67. })
  68. SelectCreate[getID].find('input[type="checkbox"]').change(function(){
  69. countArray=SelectCreate[getID].find('.optionArray_2').length;
  70. ThisFocus=0;
  71. if((SelectCreate[getID].find('input[type="checkbox"]:checked').val() ? true : false)==true){
  72. $(document).unbind().on("keydown",function(){
  73. if(event.keyCode==38/* UP */){
  74. if(ThisFocus==0){
  75. ThisFocus=countArray-1;
  76. }else{
  77. ThisFocus=ThisFocus-1;
  78. }
  79. }
  80. if(event.keyCode==40/* DOWN */){
  81. if(ThisFocus==countArray-1){
  82. ThisFocus=0;
  83. }else{
  84. ThisFocus=ThisFocus+1;
  85. }
  86. }
  87. if(event.keyCode==13/* ENTER */){
  88. SelectCreate[getID].find('.selectThis_2').text(SelectCreate[getID].find('.optionArray_2:eq('+ThisFocus+')').text()).attr('title',SelectCreate[getID].find('.optionArray_2:eq('+ThisFocus+')').text());
  89. thisSelect[getID].val(SelectCreate[getID].find('.optionArray_2:eq('+ThisFocus+')').attr('value')).change();
  90. SelectCreate[getID].find('input[type="checkbox"]').change();
  91. }
  92. SelectCreate[getID].find('.optionArray_2').removeClass('focused');
  93. SelectCreate[getID].find('.optionArray_2:eq('+ThisFocus+')').addClass('focused');
  94. SelectCreate[getID].find('.selectList_2').scrollTop(SelectCreate[getID].find('.optionArray_2:eq('+ThisFocus+')').outerHeight()*ThisFocus);
  95. })
  96. }else{
  97. $(document).unbind();
  98. }
  99. });
  100. }
  101. SelectCreate[getID].attr('v',thisSelect[getID].attr('v'));
  102. }
  103. $(function(){
  104. activeSelect=$('select.js_select');
  105. for(i=0;i<activeSelect.length;i++){
  106. createSelect($('select.js_select:eq('+i+')').attr('id'));
  107. }
  108. })

CSS:

CSS
  1. .select{
  2. display: inline-block;
  3. -webkit-user-select: none;
  4. -moz-user-select: none;
  5. -ms-user-select: none;
  6. -o-user-select: none;
  7. user-select: none;
  8. }
  9. .select[v]{
  10.     max-width: calc(100% - 80px);
  11. }
  12. .select:not([v]){
  13. max-width: 100%;
  14. }
  15. .select select,.select input[type="checkbox"]{
  16. display: none;
  17. }
  18. .select input[type="checkbox"]:checked+label .selectList{
  19. display: block!important;
  20. }
  21. .selectOption{
  22. position: relative;
  23. }
  24. .selectThis {
  25.     display: inline-block;
  26.     padding: 6px;
  27.     width: calc(100% - 25px);
  28.     background: #2b2b2b;
  29.     box-sizing: border-box;
  30.     text-shadow: 0px -1px 0px #000;
  31.     box-shadow: 0px 0px 1px 0px #666 inset, 0px 1px 0px 0px #555 inset;
  32.     color: #fff;
  33.     border: 1px solid #000;
  34.     border-right: 0px;
  35.     overflow: hidden;
  36.     vertical-align: top;
  37.     white-space: nowrap;
  38.     text-overflow: ellipsis;
  39. }
  40. .selectEvent{
  41.     display: inline-block;
  42.     padding: 6px 0px;
  43.     width: 25px;
  44.     background-image: linear-gradient(to bottom, #2d2d2d,#101010);
  45.     box-sizing: border-box;
  46.     text-align: center;
  47.     text-shadow: 0px -1px 0px #000;
  48.     box-shadow: 0px 0px 1px 0px #666 inset, 0px 1px 0px 0px #555 inset;
  49.     color: #fff;
  50.     border: 1px solid #000;
  51. cursor: pointer;
  52. }
  53. .select label .selectThis:active+.selectEvent,
  54. .select label .selectEvent:active{
  55.     background-image: linear-gradient(to bottom, #161616,#101010);
  56.     box-shadow: 0px 1px 1px 0px #000 inset;
  57. }
  58. .select input[type="checkbox"]:checked+label .selectEvent .fa-caret-down,
  59. .select input[type="checkbox"]+label .selectEvent .fa-caret-up{
  60. display: none!important;
  61. }
  62. .select input[type="checkbox"]+label .selectEvent .fa-caret-down,
  63. .select input[type="checkbox"]:checked+label .selectEvent .fa-caret-up{
  64. display: inline-block!important;
  65. }
  66. .selectList{
  67. display: none;
  68.     position: absolute;
  69.     width: 100%;
  70. max-height: 124px;
  71. overflow: auto;
  72.     background: #2b2b2b;
  73.     border: 1px solid #000;
  74.     border-top: 0px;
  75.     box-sizing: border-box;
  76.     z-index: 999;
  77.     transition: 100ms opacity ease-out;
  78.     word-wrap: break-word;
  79. white-space: nowrap;
  80. }
  81. .optionArray{
  82.     padding: 6px;
  83.     border-bottom: 1px solid #262626;
  84.     color: #999;
  85.     cursor: pointer;
  86.     transition: 100ms background ease-out, 100ms color ease-out;
  87.     overflow: hidden;
  88.     text-overflow: ellipsis;
  89. }
  90. .optionArray:last-child{
  91. border-bottom: 0px;
  92. }
  93. .optionArray:hover, .optionArray.focused{
  94.     background: #2196F3;
  95.     color: #fff;
  96. }
  97.  
  98. .select input[type="checkbox"]:checked+label .selectList_2{
  99. display: block!important;
  100. }
  101. .selectOption_2{
  102. position: relative;
  103. }
  104. .selectThis_2{
  105.     display: inline-block;
  106.     padding: 3px 6px;
  107.     width: calc(100% - 25px);
  108.     background-image: linear-gradient(to bottom, #b9b9b9,#e2e2e2);
  109.     box-sizing: border-box;
  110.     box-shadow: 0px 0px 1px 0px #fff inset, 0px 1px 0px 0px #c8c8c8 inset;
  111.     color: #000;
  112.     border: 1px solid #000;
  113.     border-right: 0px;
  114.     overflow: hidden;
  115.     vertical-align: top;
  116.     white-space: nowrap;
  117.     text-overflow: ellipsis;
  118. }
  119. .selectEvent_2{
  120.     display: inline-block;
  121.     padding: 3px 0px;
  122.     width: 25px;
  123.     background-image: linear-gradient(to bottom, #2d2d2d,#101010);
  124.     box-sizing: border-box;
  125.     text-align: center;
  126.     text-shadow: 0px -1px 0px #000;
  127.     box-shadow: 0px 0px 1px 0px #666 inset, 0px 1px 0px 0px #555 inset;
  128.     color: #fff;
  129.     border: 1px solid #000;
  130. cursor: pointer;
  131. }
  132. .select label .selectThis_2:active+.selectEvent_2,
  133. .select label .selectEvent_2:active{
  134.     background-image: linear-gradient(to bottom, #161616,#101010);
  135.     box-shadow: 0px 1px 1px 0px #000 inset;
  136. }
  137. .select input[type="checkbox"]:checked+label .selectEvent_2 .fa-caret-down,
  138. .select input[type="checkbox"]+label .selectEvent_2 .fa-caret-up{
  139. display: none!important;
  140. }
  141. .select input[type="checkbox"]+label .selectEvent_2 .fa-caret-down,
  142. .select input[type="checkbox"]:checked+label .selectEvent_2 .fa-caret-up{
  143. display: inline-block!important;
  144. }
  145. .selectList_2{
  146. display: none;
  147.     position: absolute;
  148.     width: 100%;
  149. max-height: 75px;
  150. overflow: auto;
  151.     background: #2b2b2b;
  152.     border: 1px solid #000;
  153.     border-top: 0px;
  154.     box-sizing: border-box;
  155.     z-index: 1000;
  156.     transition: 100ms opacity ease-out;
  157.     word-wrap: break-word;
  158. white-space: nowrap;
  159. }
  160. .optionArray_2{
  161.     box-sizing: border-box;
  162.     padding: 3px 6px;
  163.     border-bottom: 1px solid #262626;
  164.     color: #999;
  165.     cursor: pointer;
  166.     transition: 100ms background ease-out, 100ms color ease-out;
  167.     overflow: hidden;
  168.     text-overflow: ellipsis;
  169. }
  170. .optionArray_2:last-child{
  171. border-bottom: 0px;
  172. }
  173. .optionArray_2:hover, .optionArray_2.focused{
  174.     background: #2196F3;
  175.     color: #fff;
  176. }

Cách sử dụng:

* Style Default;

HTML5
  1. <select id="server" class="js_select">
  2. <option value="0">Chọn 0</option>
  3. <option value="1">Chọn 1</option>
  4. <option value="2">Chọn 2</option>
  5. </select>>

Style Black White;

HTML5
  1. <select id="server2" class="js_select" v="manager">
  2. <option value="0">Chọn 0</option>
  3. <option value="1">Chọn 1</option>
  4. <option value="2">Chọn 2</option>
  5. </select>>

Lưu ý mỗi select đều phải có 1 ID nhé!

Và mỗi select ID phải khác nhau.

Đã chỉnh sửa. mad (19.03.2017 / 17:08)
19.03.2017 / 18:17
#2
tnit2510
tnit2510 [OFF]
Bài đăng: 970
Member
[IMAGE]

Cho xin cái css kiểu này đi mad. Mấy cái Home, Chức năng đó

Đã chỉnh sửa. chuotiube (19.03.2017 / 18:17)
19.03.2017 / 21:32
#3
mad
mad [OFF]
Bài đăng: 2434
Member
Nhào vô cắn tao đi, tao sợ mày à cắn bừa.

wap đó của trieu luan ý xin là cho thôi

20.03.2017 / 17:22
#4
olachemgio
olachemgio [OFF]
Bài đăng: 580
Member
Từ bỏ là hạnh phúc =))

Code có tác dùng gì ạ

20.03.2017 / 17:37
#5
MrKen
MrKen [OFF]
Bài đăng: 2653
Trùm!
Vẫn là A N H

đăng code mà khôn có demo à =))

Người dùng đã xem (47)
nhox49, phuongk, khanh2002hn, nhoc49, mcvp9x, Yaka99, Zinesking, adu2002hn, quality, DucVuPro, SangLT, Poker, mellody, Lount, monaechi, kimycelove, popokeen, Vnhaha, locga113z, Buianhduong, Hgimmortal, dingyuan, minhduc, VazDN, MnpNgok, Hoccode, VinaDP, hidden, Koollzboy, b0ysh0ckhn, Gamex9x, minhmon2000, PMTpro, Tieu.ka, Jichan, hanhphucao, MrKen, Smile, namnamnam2, manhhung, thanhtung698, kayer, mad, tnit2510, ducnghia, dat2013, Hashirama,
Chủ đề tương tự
Gợi Ý Code Forum PHP
code minhmon đây
Code Đếm Số Người Dùng
Share code chatbox cho wapbuilder tên wapego
Chia sẻ code mạng xã hội giống hệt facebook - Social Engine bản 4.5 Null