index.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  7. <link rel="stylesheet" href="../../css/drop.css" />
  8. <link rel="stylesheet" href="../resources/css/base.css" />
  9. <link rel="stylesheet" href="chosen.css" />
  10. </head>
  11. <body>
  12. text<br/>
  13. text<br/>
  14. text<br/>
  15. text<br/>
  16. text<br/>
  17. text<br/>
  18. text<br/>
  19. text<br/>
  20. text<br/>
  21. text<br/>
  22. text<br/>
  23. text<br/>
  24. text<br/>
  25. text<br/>
  26. text<br/>
  27. text<br/>
  28. text<br/>
  29. text<br/>
  30. text<br/>
  31. <br/>
  32. Favorite pizza style: <br/>
  33. <div class="drop-chosen-target chosen-container chosen-container-single chosen-with-drop" style="width: 350px">
  34. <a class="chosen-single chosen-default" tabindex="-1"><span>Choose a style...</span><div><b></b></div></a>
  35. </div>
  36. <br/>
  37. <br/>
  38. text<br/>
  39. text<br/>
  40. text<br/>
  41. text<br/>
  42. text<br/>
  43. text<br/>
  44. text<br/>
  45. text<br/>
  46. text<br/>
  47. text<br/>
  48. <script src="../resources/js/log.js"></script>
  49. <script src="../resources/js/jquery.js"></script>
  50. <script src="chosen.js"></script>
  51. <script src="../../drop.js"></script>
  52. <script>
  53. $(function(){
  54. var $target, $drop;
  55. $target = $('.drop-chosen-target').drop({
  56. className: 'drop-chosen',
  57. attach: 'bottom-left',
  58. content: ''
  59. });
  60. $drop = $target.data().drop.$drop;
  61. $drop.append('<select><option>Plain</option><option>Pepperoni</option><option>Supreme</option></select>');
  62. $drop.on('openDrop', function(event){
  63. $target.addClass('chosen-container-active');
  64. }).on('closeDrop', function(event){
  65. $target.removeClass('chosen-container-active');
  66. });
  67. $drop.on('openDrop', function(event) {
  68. var $select = $drop.find('select');
  69. if (!$drop.find('.chosen-container').length) {
  70. $select
  71. .css('width', $target.outerWidth())
  72. .chosen({
  73. allow_single_deselect: true,
  74. disable_search_threshold: 0
  75. })
  76. ;
  77. }
  78. setTimeout(function(){
  79. $drop.find('.chosen-search input').click().focus().keyup();
  80. $target.drop('positionDrop');
  81. }, 0);
  82. });
  83. });
  84. </script>
  85. <style>
  86. .drop-chosen-target > a {
  87. outline: none;
  88. }
  89. .drop.drop-chosen {
  90. background: transparent;
  91. }
  92. .drop.drop-chosen .chosen-container > .chosen-single {
  93. display: none;
  94. }
  95. .drop.drop-chosen .chosen-container .chosen-drop {
  96. position: static;
  97. }
  98. </style>
  99. </body>
  100. </html>