0

これでは意味がありません。シンプルな折りたたみ可能なセットを使用して、スタイルを解除し、リンクなどの色を変更しようとしています。最初のタスク - アイコンを変更し、左ではなく右に移動します。data-iconpos="right"以前と同じ方法で使用しようとしていますdata-collapsed="true"が、うまくいかないようです。a、b、cではなく、テーマの変更のように、そのような所定のjQueryデータ関数は機能していないようです。ここで何が欠けていますか？ドキュメントによると、これは非常に簡単なはずです。

ライブ ビュー: https://www.ubat.com/mobile/test.html

ページコード:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="css/jquery-1.5.min.js" type="text/javascript"></script>

<script src="css/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//use.typekit.net/kxv5fxv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>My Title</h1>
  </div>
  <!-- /header -->

  <div data-role="content">
    <p>Hello world</p>

    <div data-role="collapsible-set">
      <div data-role="collapsible" data-collapsed="true" data-iconpos="right">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
      </div>
      <div data-role="collapsible" data-collapsed="true">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
      </div>
    </div>


  </div>
  <!-- /content --> 

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

</body>
</html>
4

2 に答える 2

1

jQuery Mobile の非常に古い (アルファ!) バージョンを使用しています。最新のものは1.2.0で、カスタム アイコンの位置を持つ折りたたみ可能なセットは、バージョン1.1.0まで提供されませんでした。

コードを機能させるには、jQuery と jQuery Mobile の両方のバージョンをアップグレードしてください。

于 2012-10-10T18:05:47.197 に答える
0

jQuery Mobileでよく遭遇するのは、実行時にさらに多くのクラスと要素がDOMに追加されるため、CSSスタイルでその新しい構造を考慮する必要があるということです。データ属性を使用して問題を解決する「jQueryの方法」を提案しているわけではありませんが、これは、組み込みのオプションがない変更したいものに遭遇したときに役立ちます。

以下は、折りたたみ可能な2つのセクションの1つにすぎません。読みやすくするために間隔を空けてみました（まだ面倒です）。

<div data-role="collapsible-set" class="ui-collapsible-set">
  <div data-role="collapsible" data-collapsed="true" data-iconpos="right" class="ui-collapsible-contain">

  <h3 class="ui-collapsible-heading">
    <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-corner-top ui-btn-down-c ui-btn-up-c" data-theme="c">

      <span class="ui-btn-inner ui-corner-top">
        <span class="ui-btn-text">Section 1
          <span class="ui-collapsible-heading-status"> click to collapse contents</span>
        </span>

        <span data-theme="d" class="ui-btn ui-btn-up-d ui-btn-icon-left ui-btn-corner-all ui-shadow">
          <span class="ui-btn-inner ui-btn-corner-all ui-corner-top">
            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-shadow ui-icon-minus"></span>
          </span>
        </span>
      </span>
    </a>
  </h3>
  <div class="ui-collapsible-content" aria-hidden="false">
    <p>I'm the collapsible set content for section 1.</p>
  </div>
</div>
</div>

ボタンアイコンを右に移動する方法は、CSSでこれを行うことです。

  .ui-collapsible-heading a span.ui-btn{
    left: inherit;
    right: 6px; /* Previously left was 6px */
  }

この種の問題を解決する最善の方法は、ブラウザーでインスペクターをクラックして開き、jQueryMobileが作成した最終的な構造を確認することです。

于 2012-10-10T18:22:48.620 に答える