2

jQuery 1.6.2 と jQuery Mobile 1.0b3 を使用する Web アプリケーションがあります。オプションのリストを表示する必要があるため、カスタム選択を使用しました。ヘッダー ボタンを使用して選択を閉じることも、オプションを選択することもできません。

nativeMenu = false はグローバルに設定されています。を使用して選択を作成します

 <select data-mini="true">
    <option value="1">Option1</option>
    <option value="2">Option2</option>
  </select>

HTML は次のようになります (さらに多くのオプションがあるため、選択はフルスクリーンになります):

   <div data-role="dialog" data-theme="c" data-overlay-theme="a" tabindex="0"
    class="ui-page ui-body-c ui-dialog ui-overlay-a ui-page-active" style="min-height: 480px;">
      <div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow">
        <div data-role="header" class="ui-corner-top ui-header ui-bar-a" role="banner">
          <a href="#" data-icon="delete" data-iconpos="notext"
          class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-a" data-corners="true"
          data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title="Close">
            <span class="ui-btn-inner ui-btn-corner-all">
              <span class="ui-btn-text">Close</span>
              <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
            </span>
          </a>
          <div class="ui-title"></div>
        </div>
        <div data-role="content" class="ui-corner-bottom ui-content ui-body-c" role="main">
          <ul class="ui-selectmenu-list ui-listview" id="undefined-menu" role="listbox" aria-labelledby="undefined-button"
          data-theme="c">
            <li data-option-index="0" data-icon="false" class="ui-btn ui-btn-icon-right ui-li ui-btn-active ui-btn-up-c"
            role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div"
            data-iconpos="right" data-theme="c" aria-selected="true">
              <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                  <a href="#" tabindex="-1" class="ui-link-inherit">Option1</a>
                </div>
              </div>
            </li>
            <li data-option-index="1" data-icon="false" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option"
            data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right"
            data-theme="c" aria-selected="false">
              <div class="ui-btn-inner ui-li">
                <div class="ui-btn-text">
                  <a href="#" tabindex="-1" class="ui-link-inherit">Option2</a>
                </div>
              </div>
            </li>       
        </div>
      </div>
</div>

ヘッダー ボタンは jQuery 1.8.3 および jQm 1.2.1 で動作します (オプションを選択しても機能しません) が、このバージョンを変更するとレガシー アプリで他の問題が発生するため、1.6.2 および jQm のソリューションを希望します。 1.0。選択が機能しない理由はありますか?

編集:数日間の検索の後、hashListeningEnabled = false を設定したため、ダイアログが閉じないことがわかりました。残念ながら、これを変更することはできません。これに出くわしました: https://github.com/jquery/jquery-mobile/issues/2285ですが、jQm/jQuery バージョンをアップグレードできません。だから私は選択のためのいくつかの良い代替手段を見つけることに残されています. 助言がありますか ?

4

1 に答える 1

0

うわー...これに対する答えはありません...ほぼ1年前!そして、私は同じ(または実際には同様の...すぐに)問題を抱えています。だからここで私は私の経験に行きます:

(ここで、複数のアイテムを選択できることを言及する必要がありますが、ヘッダーの上で十字ボタンを押すと...閉じるアクションは続きません.DANG!

私はこれに対するある種の回避策を見つけようとしていました..だから私は他のいくつかのjQmポップアップを変更し始めました、そして私が今直面している問題は、私の解決策がhtmlオブジェクトで異なるボタンを表示しているように見えることです(クリックするたびに)この 1 つだけのボタンは、この 1 つのボタン内に一度に 1 つずつ表示される SELECT の項目を一周します。設定されていますが、解決策がわかりません。

では、一般的な SELECT (HTML OBJECT) から、写真のような素敵なポップアップ (以下に貼り付けたコード) を表示するには何が必要ですか?

クロスリンクをクリックしても閉じないjqm内の素敵で美しい選択

(私が達成しようとしていること (ルック アンド フィール) をご覧ください) http : // i . stack . imgur . com /I5q0I.png

そして、これは私が持つべきコードです(ただし、クロスワーキングではありません。)

            <div class="ui-popup-container ui-popup-active" id="select-choice-7458-listbox-popup" tabindex="0" style="max-width: 1825px; top: 2788.5px; left: 805.5px;">
                <div id="select-choice-7458-listbox" class="ui-selectmenu ui-popup ui-body-a ui-overlay-shadow ui-corner-all">
                    <div class="ui-header ui-bar-c">
                        <h1 class="ui-title">

                        </h1>
                        <a href="#" class="ui-btn-left ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext" data-iconpos="notext" data-icon="delete" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" title="Close">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">
                                    Close
                                </span>
                                <span class="ui-icon ui-icon-delete ui-icon-shadow">
                                    &nbsp;</span>

                            </span>
                        </a>
                    </div>
                    <ul class="ui-selectmenu-list ui-listview" id="select-choice-7458-menu" role="listbox" aria-labelledby="select-choice-7458-button" data-theme="c" data-divider-theme="b">
                        <li data-option-index="0" data-icon="checkbox-off" data-placeholder="true" class="ui-selectmenu-placeholder ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <a href="#" tabindex="-1" class="ui-link-inherit"></a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="1" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <a href="#" tabindex="-1" class="ui-link-inherit">
                                        Scribbling</a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;</span>
                            </div>
                        </li>
                        <li data-option-index="2" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <a href="#" tabindex="-1" class="ui-link-inherit">
                                        Letter-like symbols</a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="3" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <a href="#" tabindex="-1" class="ui-link-inherit">
                                        Strings of letters</a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="4" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <a href="#" tabindex="-1" class="ui-link-inherit">
                                        Beginning sounds
                                    </a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="5" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <a href="#" tabindex="-1" class="ui-link-inherit">
                                        Ending and medial sounds
                                    </a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                        <li data-option-index="6" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <a href="#" tabindex="-1" class="ui-link-inherit">
                                        Conventional writing
                                    </a>
                                </div>
                                <span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
                                    &nbsp;
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
于 2014-10-08T05:28:14.153 に答える