Как добавить действие JQuery мобильный заголовок Collapsible? - PullRequest
Новая
       11

Как добавить действие JQuery мобильный заголовок Collapsible?

1 голос
/ 11 марта 2019

В своем заголовке Collapsible я пытаюсь добавить дополнительный тег привязки, который отталкивается от заголовка, поскольку он не поддерживается для мобильных заголовков JQuery.Есть ли способ добавить дополнительную ссылку / действие в заголовок складного объекта аккуратно?

Заранее спасибо

1 Ответ

1 голос
/ 12 марта 2019

Вы можете вставить кнопку внутри складного объекта из события $(document).on("collapsiblecreate"), но я предпочитаю использовать предварительно расширенную разметку, как описано здесь (это должно улучшить производительность при создании страницы).

Вот пример (я думаю, что все, кто использует JQM, сталкивались с такой проблемой, по крайней мере, один раз ...)

Так что, в основном, вместо того, чтобы полностью полагаться на data-role Enhancement, Вам нужно написать в своем html расширенную разметку и классы, которые JQM добавит позже во время инициализации виджета.Чтобы сообщить JQM, что разметка предварительно улучшена , добавьте атрибут атрибута data-enhanced="true" к виджету.

Таким образом, вы можете добавить любой элемент, который вы хотите, внутри любого виджета (search-inputs и т. Д.).Просто загляните внутрь инструментов разработчика Chrome: в основном вам нужно будет только скопировать и вставить разметку, улучшенную JQM, используя собственный стандартный метод, и использовать ее на странице html.

$(document).on("collapsiblecreate", ".ui-collapsible", function(e) {
  /* $(this) is the collapsible */
});
.collapsible-assist {
  position: relative;
}

.collapsible-assist .ui-collapsible-heading {
  margin-right: 2.5em;
}

.collapsible-assist.square .ui-collapsible-heading {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.collapsible-assist .assist-btn {
  position: absolute;
  right: 0;
}

.collapsible-assist.square .assist-btn {
  margin: 0;
  border-bottom-right-radius: inherit;
  border-top-right-radius: inherit;
}

.collapsible-assist .ui-collapsible-content {
  margin-top: -1px !important;
  border-top-width: 1px !important;
  border-top-right-radius: inherit;
}


/* JQM no frills */

.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
  text-shadow: none !important;
}

.ui-btn:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}


/* Speed-up some android & iOS devices */

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!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-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <div data-role="collapsible" data-enhanced="true" class="collapsible-assist square ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
        <a href="#popup" data-rel="popup" data-transition="pop" class="assist-btn ui-btn ui-btn-icon-right ui-icon-info">Help</a>
        <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">Farm animals<div class="ui-collapsible-heading-status">click to expand contents</div></a></h4>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
          <ul data-role="listview" data-enhanced="false">
            <li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Chicken</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Cow</a></li>
            <li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Duck</a></li>
          </ul>
        </div>
      </div>
      <br>
      <div data-role="collapsible" data-enhanced="true" class="collapsible-assist round ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
        <a href="#popup" data-rel="popup" data-transition="pop" class="assist-btn ui-btn ui-btn-icon-notext ui-btn-corner-all ui-icon-info">Help</a>
        <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">Legend<div class="ui-collapsible-heading-status">click to expand contents</div></a></h4>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
          <form>
            <div data-role="controlgroup">
              <input name="checkbox-1-a" id="checkbox-1-a" type="checkbox" checked>
              <label for="checkbox-1-a">One</label>
              <input name="checkbox-2-a" id="checkbox-2-a" type="checkbox">
              <label for="checkbox-2-a">Two</label>
              <input name="checkbox-3-a" id="checkbox-3-a" type="checkbox">
              <label for="checkbox-3-a">Three</label>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div data-role="popup" id="popup" class="ui-content" data-theme="a">
      <p>I'm a help popup.</p>
    </div>
  </div>
</body>

</html>
...