1

以下のようなものを取得したいここに画像の説明を入力

私が使用したコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
    </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="my.css" />
    <style>
        /* App custom styles */
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
    </script>
</head>
<body>
    <div data-role="collapsible" data-collapsed="true">
    <h3>Tasks Today</h3>
    <ul data-role="listview" data-divider-theme="b" data-inset="true"></ul>
                    <ul data-role="listview" data-divider-theme="b" data-inset="true">
                        <li data-theme="c">
                            <a href="#" data-transition="slide">
                                list1
                            </a>
                        </li>
                        <li data-theme="c">
                            <a href="#page1" data-transition="slide">
                                list2
                            </a>
                        </li>
                        <li data-theme="c">
                            <a href="#page1" data-transition="slide">
                                list3
                            </a>
                        </li>
                    </ul>
                    </div>


           <div data-role="collapsible" data-collapsed="true">
                    <h3>
                        Tasts This Week
                    </h3>
                    <ul data-role="listview" data-divider-theme="b" data-inset="true">
                     <li data-theme="c">
                            <a href="#" data-transition="slide">
                                Button
                            </a>
                        </li>
                    </ul>
                </div>

</body>
</html>

ただし、既存の UI に影響を与えるため、コードで以下の css を使用したくありません。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

このjquery cssを使用せずに、私が示したのと同じ出力を得るのを手伝ってくれる人はいますか?

css を構造 css に置き換えたところ、図のように UI が表示されました ここに画像の説明を入力

4

2 に答える 2

1

このフィドルを確認してください。基本的に、gitリポジトリhttps://github.com/jquery/jquery-mobile/tree/master/cssからの折りたたみ可能なリストビューとテーマcssが含まれています

http://jsfiddle.net/dhavaln/UCDfU/

于 2012-06-07T07:05:20.887 に答える
0

jquery.mobile.structure.css を使用すると、すべてのスタイリングなしで機能的な CSS が得られます。

http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.css

これは最新のバージョン 1.1.0 です。1.1.0 に更新する場合、またはお使いのバージョン用のものを使用する場合は、これを使用できます。

構造だけでなくスタイルも欲しいようです。その場合の唯一のオプションは、CSS を変更することです。UI との競合が多すぎてリストだけが必要な場合は、JQM CSS テーマ ファイルhttp://code.jquery.com/mobile/1.1.0/jquery.mobile.theme-から CSS をコピーします。 1.1.0.cssを独自の CSS に追加します。

.ui-collapsible折りたたみ可能な要素のスタイルを取得するには、すべての CSS を探します。要素の CSS クラスを見つける最良の方法は、Chrome または Firefox で Web Developer/Firebug ツールを使用することです。

于 2012-06-07T09:39:45.870 に答える