Как изменить кнопку закрытия в подменю мобильного телефона jQuery для начального открытия - PullRequest
Новая
       40

Как изменить кнопку закрытия в подменю мобильного телефона jQuery для начального открытия

0 голосов
/ 07 марта 2020

У меня есть главное меню, и нажатие на кнопку главного меню открывает подменю с пунктами длинного или короткого списка. Выбор одного или нескольких элементов меняет серую кнопку закрытия в левом верхнем углу на зеленую галочку. Если все элементы не выбраны, зеленая галочка превращается в оранжевую кнопку закрытия. 

    <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 -->

Теперь я хочу, чтобы оранжевая кнопка закрытия появлялась не только после отмены выбора всех параметров, но и как настройка по умолчанию при первом открытии подменю в диалоговых и всплывающих подменю.

Спасибо!

1 Ответ

0 голосов
/ 07 марта 2020

Вы можете изменить стиль по умолчанию на оранжевую кнопку, добавив следующее 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 -->
...