JqueryUI - Selectmenu - Custom Rendering

SUBMITTED BY: jlolk3r

DATE: Feb. 1, 2016, 8:44 a.m.

FORMAT: HTML

SIZE: 4.4 kB

Raw Download

HITS: 3310

Report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>jQuery UI Selectmenu - Custom Rendering</title>
  7. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  8. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  9. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  10. <link rel="stylesheet" href="/resources/demos/style.css">
  11. <script>
  12. $(function() {
  13. $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
  14. _renderItem: function( ul, item ) {
  15. var li = $( "<li>", { text: item.label } );
  17. if ( item.disabled ) {
  18. li.addClass( "ui-state-disabled" );
  19. }
  21. $( "<span>", {
  22. style: item.element.attr( "data-style" ),
  23. "class": "ui-icon " + item.element.attr( "data-class" )
  24. })
  25. .appendTo( li );
  27. return li.appendTo( ul );
  28. }
  29. });
  31. $( "#filesA" )
  32. .iconselectmenu()
  33. .iconselectmenu( "menuWidget" )
  34. .addClass( "ui-menu-icons" );
  36. $( "#filesB" )
  37. .iconselectmenu()
  38. .iconselectmenu( "menuWidget" )
  39. .addClass( "ui-menu-icons customicons" );
  41. $( "#people" )
  42. .iconselectmenu()
  43. .iconselectmenu( "menuWidget")
  44. .addClass( "ui-menu-icons avatar" );
  45. });
  46. </script>
  47. <style>
  48. h2 {
  49. margin: 30px 0 0 0
  50. }
  51. fieldset {
  52. border: 0;
  53. }
  54. label {
  55. display: block;
  56. }
  57. select {
  58. width: 200px;
  59. }
  61. /* select with custom icons */
  62. .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item {
  63. padding: 0.5em 0 0.5em 3em;
  64. }
  65. .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
  66. height: 24px;
  67. width: 24px;
  68. top: 0.1em;
  69. }
  70. .ui-icon.video {
  71. background: url("images/24-video-square.png") 0 0 no-repeat;
  72. }
  73. .ui-icon.podcast {
  74. background: url("images/24-podcast-square.png") 0 0 no-repeat;
  75. }
  76. .ui-icon.rss {
  77. background: url("images/24-rss-square.png") 0 0 no-repeat;
  78. }
  80. /* select with CSS avatar icons */
  81. option.avatar {
  82. background-repeat: no-repeat !important;
  83. padding-left: 20px;
  84. }
  85. .avatar .ui-icon {
  86. background-position: left top;
  87. }
  88. </style>
  89. </head>
  90. <body>
  92. <div class="demo">
  94. <form action="#">
  95. <h2>Selectmenu with framework icons</h2>
  96. <fieldset>
  97. <label for="filesA">Select a File:</label>
  98. <select name="filesA" id="filesA">
  99. <option value="jquery" data-class="ui-icon-script">jQuery.js</option>
  100. <option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>
  101. <option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>
  102. <option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
  103. <option value="somefile" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>
  104. </select>
  105. </fieldset>
  107. <h2>Selectmenu with custom icon images</h2>
  108. <fieldset>
  109. <label for="filesB">Select a podcast:</label>
  110. <select name="filesB" id="filesB">
  111. <option value="mypodcast" data-class="podcast">John Resig Podcast</option>
  112. <option value="myvideo" data-class="video">Scott González Video</option>
  113. <option value="myrss" data-class="rss">jQuery RSS XML</option>
  114. </select>
  115. </fieldset>
  117. <h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
  118. <fieldset>
  119. <label for="people">Select a Person:</label>
  120. <select name="people" id="people">
  121. <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
  122. <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
  123. <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
  124. </select>
  125. </fieldset>
  126. </form>
  128. </div>
  131. </body>
  132. </html>
comments powered by Disqus