jQuery UI Selectmenu

jQuery UI Selectmenu

jQuery UI Selectmenu用于扩展本机HTML select元素的功能。它提供了行为和外观方面的自定义功能,远远超出了本机选择的限制。
jQuery UI Selectmenu小部件提供了对select元素的适当替换,并充当了返回原始select元素的代理,从而控制了其提交表单或序列化状态。

jQuery UI selectmenu()方法的示例

让我们以一个简单的示例来演示Selectmenu的功能。
 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#speed").selectmenu();
    $( "#files").selectmenu();
    $( "#number")
      .selectmenu()
      .selectmenu( "menuWidget")
        .addClass( "overflow");
  });
  </script>
  <style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    select {
      width: 200px;
    }
    .overflow {
      height: 200px;
    }
  </style>
</head>
<body>
<div class="demo">
<form action="#">
<fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
 <label for="files">Select a file</label>
    <select name="files" id="files">
      <optgroup label="Scripts">
        <option value="jquery">jQuery.js</option>
        <option value="jqueryui">ui.jQuery.js</option>
      </optgroup>
      <optgroup label="Other files">
        <option value="somefile">Some unknown file</option>
        <option value="someotherfile">Some other file with a very long option text</option>
      </optgroup>
    </select>
 <label for="number">Select a number</label>
    <select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
      <option>20</option>
    </select>
  </fieldset>
</form>
</div>
</body>
</html>
以下是可与该方法一起使用的不同选项的列表。
选项 说明
appendTo 用于附加菜单。默认值为NULL。
disabled 如果将此选项设置为true,则会禁用"选择"菜单。默认值为FALSE。
icons 此选项用于指定按钮。
position 它标识菜单相对于关联的按钮元素的位置。
width 它指定菜单的宽度(以像素为单位)。默认值为NULL。
初始化Selectmenu
disabled选项:
让我们以一个示例来演示上述表选项。以下示例指定了如何在jQuery UI Selectmenu示例中使用Disabled选项。
 $(".selector").selectmenu({
  disabled: true
});
有两种方法可以使用选项"禁用":
1)获取禁用选项:
 var disabled = $(".selector").selectmenu( "option", "disabled");
1)设置禁用选项:
 $(".selector").selectmenu( "option", "disabled", true );

jQueryUI selectmenu()示例2

在下面的示例中,我们使用set方法:
让我们以一个示例来演示selectmenu的用法()。
 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#speed").selectmenu();
  $( "#files").selectmenu().selectmenu( "option", "disabled", true );;
 $( "#number")
      .selectmenu()
      .selectmenu( "menuWidget")
        .addClass( "overflow");
  });
  </script>
  <style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    select {
      width: 200px;
    }
    .overflow {
      height: 200px;
    }
  </style>
</head>
<body>
<div class="demo">
<form action="#">
  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
 <label for="files">Select a file</label>
    <select name="files" id="files">
      <optgroup label="Scripts">
        <option value="jquery">jQuery.js</option>
        <option value="jqueryui">ui.jQuery.js</option>
      </optgroup>
      <optgroup label="Other files">
        <option value="somefile">Some unknown file</option>
        <option value="someotherfile">Some other file with a very long option text</option>
      </optgroup>
    </select>
    <label for="number">Select a number</label>
    <select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
    </select>
  </fieldset>
</form>
</div>
 </body>
</html>
以下是可与此jQueryUI Selectmenu方法一起使用的不同操作(方法)的列表。
动作 说明
close 此方法用于关闭菜单。它不接受任何参数。
destroy 它用于完全删除Selectmenu功能并将元素返回到其初始状态。它不接受任何参数。
disable 它用于禁用选择菜单功能。它不接受任何参数。
enable 用于启用选择菜单。它不接受任何参数。
instance 此方法检索Selectmenu的实例对象。它不接受任何参数。
menuWidget 它返回包含菜单元素的jQuery对象。它不接受任何参数。
open 用于打开菜单。它不接受任何参数。
option 它将获取一个具有键/值对的对象,这些键/值对指定当前的Selectmenu选项哈希。
refresh 它用于解析原始元素并重新呈现菜单。它不接受任何参数。
widget 它返回一个具有button元素的jQuery对象。