1

我在 jquery mobile 中找到了这个代码来选择多个项目。

<div class="ui-field-contain" >
    <label for="select-custom-19">Multiple:</label>
    <select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >
        <option>Choose options</option>
        <option value="1"> 1st </option>
        <option value="2" selected="selected">2nd </option>
        <option value="3" selected="selected"> 3rd </option>
        <option value="4">4th </option>

    </select>

</div>

我找到了一种减小列表框大小的方法，如下所示：

<select data-mini="true" data-inline="true" name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >

 它更小但不是我想要的尺寸（我想要更小） - 怎么做？我试过了：style="width:5%;"但它不起作用。

我还想将此列表框修复在特定位置。例如，当我想在屏幕中的某个位置放置一个按钮时，我使用它，它工作正常：

<button style="position: absolute; top:470px; left:310px;" onclick="stopMusic()" type="button"></button>

但

 <select style="position: absolute; top:470px; left:310px;" data-mini="true" data-inline="true" name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >

不起作用。谢谢您的帮助

4

2 回答 2

1

接得好。本机选择将由框架包装，但data-wrapper-class不起作用（它似乎是一个开放的 TODO，JQM 团队从未完全实现过selectmenu）。这里的关键是找到div具有类ui-select和样式的父包装器。

您可以：

  • 为容器元素设置自定义类
  • select在小部件创建后添加一个自定义类

这是一个显示两个选项的示例：

$(document).on("selectmenucreate", "#select-custom-19", function(e, ui) {
  $(e.target).parent().addClass("my-select-class");
});
.my-select-container-class .ui-select {
  border: 1px solid red !important;
  width: 100px !important;
  position: absolute;
  right: 0;
}
.my-select-class.ui-select .ui-btn {
  background-color: aliceblue !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" />
  <script src="https://code.jquery.com/jquery-2.2.3.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
</head>
<body>
  <div data-role="page" id="page-one">
    <div data-role="content">
      <div class="ui-field-contain my-select-container-class">
        <label for="select-custom-19">Multiple:</label>
        <select name="select-custom-19" id="select-custom-19" data-mini="true" multiple="multiple" data-native-menu="false">
          <option>Choose options</option>
          <option value="1">The 1st Option</option>
          <option value="2" selected="selected">The 2nd Option</option>
          <option value="3" selected="selected">The 3rd Option</option>
          <option value="4">The 4th Option</option>
        </select>
      </div>
    </div>
  </div>
</body>
</html>

于 2020-12-11T09:05:02.560 回答
-1

这就是我写你所说的内容的方式，jquery mobile等写在头上......它不起作用仍然在相同的位置有相同的大框选择

  <html>
    <style>
    
    .my-select-container-class .ui-select {
      border: 1px solid red !important;
      width: 100px !important;
      position: absolute;
      right: 0;
    }
    .my-select-class.ui-select .ui-btn {
      background-color: red !important;
    }
    </style>
    
    <body>
    
    <div data-role="content">
    <div class="ui-field-contain my-select-container-class" >
        <label for="select-custom-19">Multiple:</label>
        <select   name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false" >
            <option>Choose options</option>
            <option value="1">The 1st Option</option>
            <option value="2" selected="selected">The 2nd Option</option>
            <option value="3" selected="selected">The 3rd Option</option>
            <option value="4">The 4th Option</option>
    
        </select>
    
    </div> 
    </div>
   
</body> 
    </html>
于 2021-01-03T22:51:05.153 回答