2011-11-10 116 views
3

我使用jQuery Mobile的framework.While的定制选择菜单阅读我发现我可以在两个ways-如何在jQuery Mobile的添加标题定制选择菜单

  • 添加标题中加入数据 - 该文档一个选项中的placeholder =“true”(这可以工作,但对于选择菜单的选项比较少,比如说5到10)
  • 另一种是使用标签,但它使标签的整个文本成为选择菜单的标题..

但在这种情况下,我得到Country*:作为选择菜单的标题,但它sh应该只有Country ... 我该怎么做? 任何人有任何想法?
这是我努力的代码...

<lable for="a1">Country*:</lable> 
<select data-native-menu="false" id="a1" > 
     <option>blah</options> 
     </select> 
+0

我很想知道标签是否会作为选择菜单的标题而来,因为我刚刚尝试过一个示例,并且标签没有作为标题出现。请您在此处发布代码示例。 – user700284

回答

3

文档:

占位符选项

是很常见的开发人员在在其选择的 元素中包含“空”选项以强制用户选择一个选项。如果您的标记中包含占位符选项 ,那么jQuery Mobile会将它们隐藏在覆盖 菜单中,仅向用户显示有效选项,并在菜单内将 占位符文本显示为标题。是 加入一个占位符选项时,框架发现:

没有值属性(或空值属性)一种 选项没有文本节点与data-placeholder="true" 属性的选项的选项。 (这允许您使用具有值和选项的文本节点作为占位符选项)。你可以通过selectmenu插件的hidePlaceholderMenuItems选项禁用此功能 ,像这样 :

$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false; 

它看起来像小列表使用占位符选项和更大的名单使用的标签。这可能是由于页面显示的方式。

当选择有少量的,将适合的 设备的屏幕上的选项,菜单将显示为一个小的覆盖与流行 过渡。

当设备的屏幕上显示的选项过多时, 框架将自动创建一个新的“页面”,其中填充了 标准列表视图。这使我们可以使用设备上包含的原生 滚动浏览长列表。 标签内的 文本用作此页面的标题。

活生生的例子:

HTML

<div data-role="page" id="home"> 
    <div data-role="content"> 

     <span>The No Value Option<pre><code><option>Choose a State...</option></code></pre></span><br /> 
     <label for="select-choice-1" class="select">Your state:</label> 
      <select name="select-choice-1" id="select-choice-1" data-native-menu="false"> 
       <option>Choose a State...</option> 
       <option value="AL">Alabama</option> 
       <option value="AK">Alaska</option> 
       <option value="AZ">Arizona</option> 
       <option value="AR">Arkansas</option> 
       <option value="CA">California</option> 
       <option value="CO">Colorado</option> 
       <option value="CT">Connecticut</option> 
       <option value="DE">Delaware</option> 
       <option value="FL">Florida</option> 
       <option value="GA">Georgia</option> 
       <option value="HI">Hawaii</option> 
       <option value="ID">Idaho</option> 
       <option value="IL">Illinois</option> 
       <option value="IN">Indiana</option> 
       <option value="IA">Iowa</option> 
       <option value="KS">Kansas</option> 
       <option value="KY">Kentucky</option> 
       <option value="LA">Louisiana</option> 
       <option value="ME">Maine</option> 
       <option value="MD">Maryland</option> 
       <option value="MA">Massachusetts</option> 
       <option value="MI">Michigan</option> 
       <option value="MN">Minnesota</option> 
       <option value="MS">Mississippi</option> 
       <option value="MO">Missouri</option> 
       <option value="MT">Montana</option> 
       <option value="NE">Nebraska</option> 
       <option value="NV">Nevada</option> 
       <option value="NH">New Hampshire</option> 
       <option value="NJ">New Jersey</option> 
       <option value="NM">New Mexico</option> 
       <option value="NY">New York</option> 
       <option value="NC">North Carolina</option> 
       <option value="ND">North Dakota</option> 
       <option value="OH">Ohio</option> 
       <option value="OK">Oklahoma</option> 
       <option value="OR">Oregon</option> 
       <option value="PA">Pennsylvania</option> 
       <option value="RI">Rhode Island</option> 
       <option value="SC">South Carolina</option> 
       <option value="SD">South Dakota</option> 
       <option value="TN">Tennessee</option> 
       <option value="TX">Texas</option> 
       <option value="UT">Utah</option> 
       <option value="VT">Vermont</option> 
       <option value="VA">Virginia</option> 
       <option value="WA">Washington</option> 
       <option value="WV">West Virginia</option> 
       <option value="WI">Wisconsin</option> 
       <option value="WY">Wyoming</option> 
      </select> 


     <br /> 

     <span>The Placeholder Option<pre><code><option value="choose-one" data-placeholder="true">Choose one...</option></code></pre></span><br /> 
     <label for="select-choice-3" class="select">Your state:</label> 
      <select name="select-choice-3" id="select-choice-3" data-native-menu="false"> 
       <option value="choose-one" data-placeholder="true">Choose one...</option> 
       <option value="AL">Alabama</option> 
       <option value="AK">Alaska</option> 
       <option value="AZ">Arizona</option> 
       <option value="AR">Arkansas</option> 
       <option value="CA">California</option> 
       <option value="CO">Colorado</option> 
       <option value="CT">Connecticut</option> 
       <option value="DE">Delaware</option> 
       <option value="FL">Florida</option> 
       <option value="GA">Georgia</option> 
       <option value="HI">Hawaii</option> 
       <option value="ID">Idaho</option> 
       <option value="IL">Illinois</option> 
       <option value="IN">Indiana</option> 
       <option value="IA">Iowa</option> 
       <option value="KS">Kansas</option> 
       <option value="KY">Kentucky</option> 
       <option value="LA">Louisiana</option> 
       <option value="ME">Maine</option> 
       <option value="MD">Maryland</option> 
       <option value="MA">Massachusetts</option> 
       <option value="MI">Michigan</option> 
       <option value="MN">Minnesota</option> 
       <option value="MS">Mississippi</option> 
       <option value="MO">Missouri</option> 
       <option value="MT">Montana</option> 
       <option value="NE">Nebraska</option> 
       <option value="NV">Nevada</option> 
       <option value="NH">New Hampshire</option> 
       <option value="NJ">New Jersey</option> 
       <option value="NM">New Mexico</option> 
       <option value="NY">New York</option> 
       <option value="NC">North Carolina</option> 
       <option value="ND">North Dakota</option> 
       <option value="OH">Ohio</option> 
       <option value="OK">Oklahoma</option> 
       <option value="OR">Oregon</option> 
       <option value="PA">Pennsylvania</option> 
       <option value="RI">Rhode Island</option> 
       <option value="SC">South Carolina</option> 
       <option value="SD">South Dakota</option> 
       <option value="TN">Tennessee</option> 
       <option value="TX">Texas</option> 
       <option value="UT">Utah</option> 
       <option value="VT">Vermont</option> 
       <option value="VA">Virginia</option> 
       <option value="WA">Washington</option> 
       <option value="WV">West Virginia</option> 
       <option value="WI">Wisconsin</option> 
       <option value="WY">Wyoming</option> 
      </select> 

     <br /> 
     <span>Smaller Option</span><br /> 
     <label for="select-choice-6" class="select">Shipping method:</label> 
     <select name="select-choice-6" id="select-choice-6" data-native-menu="false"> 
      <option value="choose-one" data-placeholder="true">Choose shipping...</option> 
      <option value="standard">Standard: 7 day</option> 
      <option value="rush">Rush: 3 days</option> 
      <option value="express">Express: next day</option> 
      <option value="overnight">Overnight</option> 
     </select> 
    </div> 
</div> 
+0

这里写的和我在我的问题中写的是一样的...... – Vivek

+0

当select有少量适合设备屏幕的选项时,菜单将显示为带弹出过渡的小覆盖图。 当设备的屏幕上显示的选项过多时,框架会自动创建一个新的“页面”,并填充选项的标准列表视图。这允许我们使用设备上包含的本地滚动来移动长列表。标签内的文本用作此页面的标题。 –

0

我终于做了添加第二个标签(#__ label_cboBancoR8),destinated可见给用户,并保留用于选择的原始标签(#label_cboBancoR8)。事情是这样的:

div id='contenedor_cboBancoR8' class='bloque select-opt mb20'> 
    <label id='__label_cboBancoR8' class='select'>BANCO</label> 
    <label id='label_cboBancoR8' for='cboBancoR8' class='select'>Selecciona tipo de banco</label> 
    <select name='cboBancoR8' id='cboBancoR8' data-native-menu='false' data-transition='none'> 
    <option value='-1' data-placeholder='true'>Selecciona tipo de banco</option> 
    </select> 
</div> 

后来我们隐藏原始标签:

$('#label_cboBancoR8').hide(); 

结果是:

enter image description here

enter image description here

呃......希望对有同样问题的人有帮助。

相关问题