Saturday, September 21, 2019

jQuery UI Selectmenu

jQuery UI Selectmenu is used to extend the functionality of a native HTML select element. It provides the customization functionality in behavior and appearance far beyond the limitation of a native select.
The jQuery UI Selectmenu widget provides a proper replacement of select element and act as a proxy back to the original select element controlling its state for form submission or serialization.

Example of jQuery UI selectmenu() method

Let's take a simple example to demonstrate the functionality of Selectmenu.

  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 - Default functionality</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.     $( "#speed" ).selectmenu();  
  14.    
  15.     $( "#files" ).selectmenu();  
  16.    
  17.     $( "#number" )  
  18.       .selectmenu()  
  19.       .selectmenu( "menuWidget" )  
  20.         .addClass( "overflow" );  
  21.   });  
  22.   </script>  
  23.   <style>  
  24.     fieldset {  
  25.       border: 0;  
  26.     }  
  27.     label {  
  28.       display: block;  
  29.       margin: 30px 0 0 0;  
  30.     }  
  31.     select {  
  32.       width: 200px;  
  33.     }  
  34.     .overflow {  
  35.       height: 200px;  
  36.     }  
  37.   </style>  
  38. </head>  
  39. <body>  
  40. <div class="demo">  
  41. <form action="#">  
  42. <fieldset>  
  43.     <label for="speed">Select a speed</label>  
  44.     <select name="speed" id="speed">  
  45.       <option>Slower</option>  
  46.       <option>Slow</option>  
  47.       <option selected="selected">Medium</option>  
  48.       <option>Fast</option>  
  49.       <option>Faster</option>  
  50.     </select>  
  51.  <label for="files">Select a file</label>  
  52.     <select name="files" id="files">  
  53.       <optgroup label="Scripts">  
  54.         <option value="jquery">jQuery.js</option>  
  55.         <option value="jqueryui">ui.jQuery.js</option>  
  56.       </optgroup>  
  57.       <optgroup label="Other files">  
  58.         <option value="somefile">Some unknown file</option>  
  59.         <option value="someotherfile">Some other file with a very long option text</option>  
  60.       </optgroup>  
  61.     </select>  
  62.  <label for="number">Select a number</label>  
  63.     <select name="number" id="number">  
  64.       <option>1</option>  
  65.       <option selected="selected">2</option>  
  66.       <option>3</option>  
  67.       <option>4</option>  
  68.       <option>5</option>  
  69.       <option>6</option>  
  70.       <option>7</option>  
  71.       <option>8</option>  
  72.       <option>9</option>  
  73.       <option>10</option>  
  74.       <option>11</option>  
  75.       <option>12</option>  
  76.       <option>13</option>  
  77.       <option>14</option>  
  78.       <option>15</option>  
  79.       <option>16</option>  
  80.       <option>17</option>  
  81.       <option>18</option>  
  82.       <option>19</option>  
  83.       <option>20</option>  
  84.     </select>  
  85.   </fieldset>  
  86. </form>  
  87. </div>  
  88. </body>  
  89. </html>  

Following is a list of different options that can be used with this method.
OptionDescription
appendToIt is used to append the menu. Its default value is NULL.
disabledIf you set this option to true, it disables the Selectmenu. Its default value is FALSE.
iconsThis option is used to specify a button.
positionIt identifies the position of the menu in relation to the associated button element.
widthIt specifies the width of the menu in pixels. Its default value is NULL.
Initialize the Selectmenu with the disabled options specified:
Let's take an example to demonstrate the above table options. The following example specifies how to use the disabled option in the jQuery UI Selectmenu example.
  1. $( ".selector" ).selectmenu({  
  2.   disabled: true  
  3. });   
There are two ways to use the option "disable":
1) Get the disable option:
  1. var disabled = $( ".selector" ).selectmenu( "option", "disabled" );  
1) Set the disable option:
  1. $( ".selector" ).selectmenu( "option", "disabled", true );  

jQueryUI selectmenu() example 2

In the following example, we are using set method:
Let's take an example to demonstrate the usage of selectmenu().
  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 - Default functionality</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.     $( "#speed" ).selectmenu();  
  14.   $( "#files" ).selectmenu().selectmenu( "option", "disabled", true );;  
  15.  $( "#number" )  
  16.       .selectmenu()  
  17.       .selectmenu( "menuWidget" )  
  18.         .addClass( "overflow" );  
  19.   });  
  20.   </script>  
  21.   <style>  
  22.     fieldset {  
  23.       border: 0;  
  24.     }  
  25.     label {  
  26.       display: block;  
  27.       margin: 30px 0 0 0;  
  28.     }  
  29.     select {  
  30.       width: 200px;  
  31.     }  
  32.     .overflow {  
  33.       height: 200px;  
  34.     }  
  35.   </style>  
  36. </head>  
  37. <body>  
  38. <div class="demo">  
  39.    
  40. <form action="#">  
  41.   <fieldset>  
  42.     <label for="speed">Select a speed</label>  
  43.     <select name="speed" id="speed">  
  44.       <option>Slower</option>  
  45.       <option>Slow</option>  
  46.       <option selected="selected">Medium</option>  
  47.       <option>Fast</option>  
  48.       <option>Faster</option>  
  49.     </select>  
  50.  <label for="files">Select a file</label>  
  51.     <select name="files" id="files">  
  52.       <optgroup label="Scripts">  
  53.         <option value="jquery">jQuery.js</option>  
  54.         <option value="jqueryui">ui.jQuery.js</option>  
  55.       </optgroup>  
  56.       <optgroup label="Other files">  
  57.         <option value="somefile">Some unknown file</option>  
  58.         <option value="someotherfile">Some other file with a very long option text</option>  
  59.       </optgroup>  
  60.     </select>  
  61.    
  62.     <label for="number">Select a number</label>  
  63.     <select name="number" id="number">  
  64.       <option>1</option>  
  65.       <option selected="selected">2</option>  
  66.       <option>3</option>  
  67.       <option>4</option>  
  68.       <option>5</option>  
  69.       <option>6</option>  
  70.       <option>7</option>  
  71.       <option>8</option>  
  72.       <option>9</option>  
  73.       <option>10</option>  
  74.       <option>11</option>  
  75.       <option>12</option>  
  76.       <option>13</option>  
  77.       <option>14</option>  
  78.       <option>15</option>  
  79.       <option>16</option>  
  80.       <option>17</option>  
  81.       <option>18</option>  
  82.       <option>19</option>  
  83.     </select>  
  84.   </fieldset>  
  85. </form>  
  86.    
  87. </div>  
  88.  </body>  
  89. </html>  

Following is a list of different actions (methods) that can be used with this jQueryUI Selectmenu method.
ActionDescription
closeThis method is used to close the menu. It does not accept any argument.
destroyIt is used to remove the Selectmenu functionality completely and return the element back to its pre-init state. It does not accept any argument.
disableIt is used to disable the Selectmenu functionality. It does not accept any argument.
enableIt is used to enable the Selectmenu. It does not accept any argument.
instanceThis method retrieves the instance object of Selectmenu. It does not accept any argument.
menuWidgetIt returns the jQuery object containing the menu element. It does not accept any argument.
openIt is used to open the menu. It does not accept any argument.
optionIt gets an object having the key/value pairs specifying the current Selectmenu options hash.
refreshIt is used to parse the original element and re-render the menu. It does not accept any argument.
widgetIt returns a jQuery object having the button element.
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...