如何修改jQuery mobile子菜单中的关闭按钮以进行初始打开

Posted 2023-03-06

【中文标题】如何修改jQuery mobile子菜单中的关闭按钮以进行初始打开

【英文标题】：How to modify close button in submenu of jQuery mobile for initial opening

【发布时间】：2020-06-20 03:51:05

【问题描述】：

我有一个主菜单，单击主菜单的一个按钮会打开一个子菜单，其中包含长列表项或短列表项。选择一个或多个项目会将左上角的灰色关闭按钮更改为绿色复选标记。如果所有项目都未选中，则绿色复选标记将变为橙色关闭按钮。

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">       
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


    <script> 

    <!-- beginning dialog submenu -->

    $(document).on("selectmenucreate", "#country-select", function(e, ui) 
      var data = $(this).data("mobile-selectmenu"), hide = "display": "none";
      data.list
        .attr("data-filter", "true")
        .find("li[data-placeholder='true']").css(hide);
      $(this).on("change", function () 
        var cases = "page": data.menuPageClose, "overlay": data.headerClose,
            btnClose = cases[data.menuType];
        if ($("option:selected", this).length === 0) 
          btnClose
            .addClass("ui-icon-delete")
            .removeClass("ui-icon-check")
            .css("backgroundColor", "orange")
            .css("width", 55)
            .css("height", 32)
            .css("border", "red solid 1px");
         else 
          btnClose
            .addClass("ui-icon-check")
            .removeClass("ui-icon-delete")
            .css("backgroundColor", "#90ee90")
            .css("width", 55)
            .css("height", 32)
            .css("border", "green solid 1px");
        
      );
    );

    $(document).on("pagecontainerbeforeshow", function(e, ui) 
      var data = $("#country-select").data("mobile-selectmenu");
      if(ui.toPage.attr("id") == data["dialogId"]) 
        if(!ui.toPage.find(".ui-filterable").length) 
          ui.toPage.find(".ui-content").enhanceWithin();
        
      
    );

    $(document).on("pagecontainershow", function(e, ui) 
      var data = $("#country-select").data("mobile-selectmenu");
      if(ui.toPage.attr("id") == data["dialogId"]) 
        ui.toPage.find(".ui-filterable input").focus();
      
    );

    $(document).on("pagecontainerhide", function(e, ui) 
      var data = $("#country-select").data("mobile-selectmenu");
      if(ui.prevPage.attr("id") == data["dialogId"]) 
        data["list"].find("li").removeClass("ui-screen-hidden");
        ui.prevPage.find(".ui-filterable input").val("");
      
    );                                                                   

    <!-- end dialog submenu -->



    <!-- beginning popup submenu -->

    $(document).on("selectmenucreate", "#city-select", function(e, ui) 
      var data = $(this).data("mobile-selectmenu"), hide = "display": "none";
      data.list.attr("data-filter", "true").find("li[data-placeholder='true']").css(hide); 
      $("#" + data.popupId).enhanceWithin().popup("option", positionTo: "window");
      $("#" + data.menuId).css("max-height", "0");
      $(this).on("change", function () 
        var cases = "page": data.menuPageClose, "overlay": data.headerClose,
            btnClose = cases[data.menuType];
        if ($("option:selected", this).length === 0) 
          btnClose
             .addClass("ui-icon-delete")
             .removeClass("ui-icon-check")
             .css("backgroundColor", "orange")
             .css("width", 55)
             .css("height", 32)
             .css("border", "red solid 1px");      
         else 
          btnClose
            .addClass("ui-icon-check")
            .removeClass("ui-icon-delete")
            .css("backgroundColor", "#90ee90")
            .css("width", 55)
            .css("height", 32)
            .css("border", "green solid 1px");
        
      ); 
    );

    $(document).on("popupbeforeposition", function(e, ui) 
      var data = $("#city-select").data("mobile-selectmenu");
      if(e.target.id == data.popupId) 
        var popup = $("#" + data.popupId), sH = $.mobile.getScreenHeight(),
            pH = popup.height(), oH = popup.outerHeight(true),
            hH = popup.find(".ui-header").outerHeight(true),
            fH = popup.find(".ui-filterable").outerHeight(true),
            iH = popup.find("li").outerHeight(true),
            maxItems = ((sH - oH + pH - hH - fH - 50) / iH)|0, maxHeight = maxItems * iH;
        $("#" + data.menuId).css("max-height", maxHeight+"px");
        popup.find(".ui-filterable input").focus();
      
    );

    $(document).on("popupafterclose", function(e, ui) 
      var data = $("#city-select").data("mobile-selectmenu");
      if(e.target.id == data.popupId) 
        data.list.find("li").removeClass("ui-screen-hidden");
        $(e.target).find(".ui-filterable input").val("");
        $("#" + data.menuId).css("max-height", "0");
      
    );

    $(document).on("popupafteropen", function(e, ui) 
      if(e.target.id == $("#city-select").data("mobile-selectmenu").popupId) 
        $(e.target).find(".ui-filterable input").focus();
      
    );

    <!-- end popup submenu -->

    </script>


    <style>

    .ui-selectmenu.ui-popup .ui-input-search 
        margin-left: .5em;
        margin-right: .5em;
    

    .ui-selectmenu.ui-dialog .ui-content 
        padding-top: 0;
        max-height: 85vh;
        overflow-y: scroll;
    
    .ui-selectmenu.ui-dialog .ui-selectmenu-list 
        margin-top: 0;
    
    .ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn 
        border-top-width: 1px;
        -webkit-border-radius: 0;
        border-radius: 0;

    
    .ui-selectmenu.ui-popup .ui-header 
        border-bottom-width: 1px;
        padding-left: 40px;
    

    .ui-selectmenu.ui-dialog .ui-header 
        border-bottom-width: 1px;
        padding-left: 40px;
    

    /* scrollable listview for select popup */
    .ui-selectmenu-list.ui-listview 
      overflow-x: hidden;
      overflow-y: auto;
    
    /* just some air around the popup */
    .ui-selectmenu.ui-popup 
      padding: 0.6em;
                                 

    </style>

    </head>

    <body>
    <div data-role="page">
        <div data-role="content">

          <div class="ui-field-contain">

            <label for="country-select">Select Country</label>
            <select name="country-select" id="country-select" multiple="multiple" data-native-menu="false">

                <option>Choose Your Country</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>
         </div>


         <div class="ui-field-contain">

            <label for="country-select">Select City</label>
            <select name="city-select" id="city-select" multiple="multiple" data-native-menu="false">

                <option>Choose Your City</option>
                <option value="LA">Los Angeles</option>
                <option value="NY">New York</option>
                <option value="SF">San Francisco</option>
                <option value="WH">Washington</option>

            </select>

         </div>


        </div>
    </div><!-- /page -->

现在，我希望橙色关闭按钮不仅在取消选择所有选项后出现，而且在对话框和弹出子菜单中首次打开子菜单时作为默认设置出现。

谢谢！

【问题讨论】：

我刚刚意识到您的页面中有多个自定义选择...因此，为了后代，我在您的问题中修复了我的实现：***.com/questions/60419526/…

【参考方案1】：

您可以通过添加以下 css 将默认样式更改为橙色按钮。

#city-select-listbox .ui-icon-delete,
#country-select-dialog .ui-icon-delete 
  background-color: orange;
  width: 55px;
  height: 32px;
  border: 1px solid red;

#city-select-listbox .ui-icon-delete,
#country-select-dialog .ui-icon-delete 
  background-color: orange;
  width: 55px;
  height: 32px;
  border: 1px solid red;

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<script>
  <!-- beginning dialog submenu -->

  $(document).on("selectmenucreate", "#country-select", function(e, ui) 
    var data = $(this).data("mobile-selectmenu"),
      hide = 
        "display": "none"
      ;
    data.list
      .attr("data-filter", "true")
      .find("li[data-placeholder='true']").css(hide);
    $(this).on("change", function() 
      var cases = 
          "page": data.menuPageClose,
          "overlay": data.headerClose
        ,
        btnClose = cases[data.menuType];
      if ($("option:selected", this).length === 0) 
        btnClose
          .addClass("ui-icon-delete")
          .removeClass("ui-icon-check")
          .css("backgroundColor", "orange")
          .css("width", 55)
          .css("height", 32)
          .css("border", "red solid 1px");
       else 
        btnClose
          .addClass("ui-icon-check")
          .removeClass("ui-icon-delete")
          .css("backgroundColor", "#90ee90")
          .css("width", 55)
          .css("height", 32)
          .css("border", "green solid 1px");
      
    );
  );

  $(document).on("pagecontainerbeforeshow", function(e, ui) 
    var data = $("#country-select").data("mobile-selectmenu");
    if (ui.toPage.attr("id") == data["dialogId"]) 
      if (!ui.toPage.find(".ui-filterable").length) 
        ui.toPage.find(".ui-content").enhanceWithin();
      
    
  );

  $(document).on("pagecontainershow", function(e, ui) 
    var data = $("#country-select").data("mobile-selectmenu");
    if (ui.toPage.attr("id") == data["dialogId"]) 
      ui.toPage.find(".ui-filterable input").focus();
    
  );

  $(document).on("pagecontainerhide", function(e, ui) 
    var data = $("#country-select").data("mobile-selectmenu");
    if (ui.prevPage.attr("id") == data["dialogId"]) 
      data["list"].find("li").removeClass("ui-screen-hidden");
      ui.prevPage.find(".ui-filterable input").val("");
    
  );

  <!-- end dialog submenu -->



  <!-- beginning popup submenu -->

  $(document).on("selectmenucreate", "#city-select", function(e, ui) 
    var data = $(this).data("mobile-selectmenu"),
      hide = 
        "display": "none"
      ;
    data.list.attr("data-filter", "true").find("li[data-placeholder='true']").css(hide);
    $("#" + data.popupId).enhanceWithin().popup("option", 
      positionTo: "window"
    );
    $("#" + data.menuId).css("max-height", "0");
    $(this).on("change", function() 
      var cases = 
          "page": data.menuPageClose,
          "overlay": data.headerClose
        ,
        btnClose = cases[data.menuType];
      if ($("option:selected", this).length === 0) 
        btnClose
          .addClass("ui-icon-delete")
          .removeClass("ui-icon-check")
          .css("backgroundColor", "orange")
          .css("width", 55)
          .css("height", 32)
          .css("border", "red solid 1px");
       else 
        btnClose
          .addClass("ui-icon-check")
          .removeClass("ui-icon-delete")
          .css("backgroundColor", "#90ee90")
          .css("width", 55)
          .css("height", 32)
          .css("border", "green solid 1px");
      
    );
  );

  $(document).on("popupbeforeposition", function(e, ui) 
    var data = $("#city-select").data("mobile-selectmenu");
    if (e.target.id == data.popupId) 
      var popup = $("#" + data.popupId),
        sH = $.mobile.getScreenHeight(),
        pH = popup.height(),
        oH = popup.outerHeight(true),
        hH = popup.find(".ui-header").outerHeight(true),
        fH = popup.find(".ui-filterable").outerHeight(true),
        iH = popup.find("li").outerHeight(true),
        maxItems = ((sH - oH + pH - hH - fH - 50) / iH) | 0,
        maxHeight = maxItems * iH;
      $("#" + data.menuId).css("max-height", maxHeight + "px");
      popup.find(".ui-filterable input").focus();
    
  );

  $(document).on("popupafterclose", function(e, ui) 
    var data = $("#city-select").data("mobile-selectmenu");
    if (e.target.id == data.popupId) 
      data.list.find("li").removeClass("ui-screen-hidden");
      $(e.target).find(".ui-filterable input").val("");
      $("#" + data.menuId).css("max-height", "0");
    
  );

  $(document).on("popupafteropen", function(e, ui) 
    if (e.target.id == $("#city-select").data("mobile-selectmenu").popupId) 
      $(e.target).find(".ui-filterable input").focus();
    
  );

  <!-- end popup submenu -->
</script>


<style>
  .ui-selectmenu.ui-popup .ui-input-search 
    margin-left: .5em;
    margin-right: .5em;
  
  
  .ui-selectmenu.ui-dialog .ui-content 
    padding-top: 0;
    max-height: 85vh;
    overflow-y: scroll;
  
  
  .ui-selectmenu.ui-dialog .ui-selectmenu-list 
    margin-top: 0;
  
  
  .ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn 
    border-top-width: 1px;
    -webkit-border-radius: 0;
    border-radius: 0;
  
  
  .ui-selectmenu.ui-popup .ui-header 
    border-bottom-width: 1px;
    padding-left: 40px;
  
  
  .ui-selectmenu.ui-dialog .ui-header 
    border-bottom-width: 1px;
    padding-left: 40px;
  
  /* scrollable listview for select popup */
  
  .ui-selectmenu-list.ui-listview 
    overflow-x: hidden;
    overflow-y: auto;
  
  /* just some air around the popup */
  
  .ui-selectmenu.ui-popup 
    padding: 0.6em;
  
</style>

</head>

<body>
  <div data-role="page">
    <div data-role="content">

      <div class="ui-field-contain">

        <label for="country-select">Select Country</label>
        <select name="country-select" id="country-select" multiple="multiple" data-native-menu="false">

          <option>Choose Your Country</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>
      </div>


      <div class="ui-field-contain">

        <label for="country-select">Select City</label>
        <select name="city-select" id="city-select" multiple="multiple" data-native-menu="false">

          <option>Choose Your City</option>
          <option value="LA">Los Angeles</option>
          <option value="NY">New York</option>
          <option value="SF">San Francisco</option>
          <option value="WH">Washington</option>

        </select>

      </div>


    </div>
  </div>
  <!-- /page -->