1

Zend Framework で (コーディングとさまざまなセクションの点で) かなり大きな (デスクトップ) 電子商取引サイトを運営しています。現在、モバイル向けに最適化された Web サイトを計画しており、Jquery Mobile について調査しています。

どちらの道を選ぶべきかを決めるために、私たちは 2 つのことを試しています。

1) Jquery モバイル テーマを使用して HTML を作成し、そこからカスタマイズします。

また

2) 独自のテーマを作成します。

現時点では、2) 独自のテーマを作成する実験を行っています。

ページのカスタマイズ (CSS) で問題が見つかりました。私の次の質問に答えていただけませんか。Jquery モバイル サイトのガイドに従っています。

1) デフォルトの jquery css ( http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css ) を含めることは必須ですか?

また

2) カスタム スタイルでデフォルトの jquery css を更新することは可能ですか?

別の問題として、以下のコードを使用してファイルを作成しました。

        <div data-role="collapsible" data-inset="false" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" data-corners="false" data-theme="inner_menu">

            <h3 class="inner_menu_heading">Section A1</h3>



            <div data-role="collapsible-set" data-inset="false" data-icon="arrow-r" data-iconpos="right" data-corners="false">

                <div data-role="collapsible" data-collapsed="false">

                    <h3 class="sub_menu_heading">Section A1.1</h3>

                    <p>I'm the collapsible set content for section 1.</p>

                </div>



                <div data-role="collapsible" data-collapsed="false">

                    <h3 class="sub_menu_heading">Section A1.2</h3>

                    <p>I'm the collapsible set content for section 2.</p>

                </div>

            </div>

        <!-- section A1 end here-->

        </div>

ただし、ページが読み込まれた後、追加のタグが付与されます。以下のコードを参照してください。

<div class="ui-collapsible-content" aria-hidden="false">

    <div data-corners="false" data-iconpos="right" data-icon="arrow-r" data-inset="false" data-role="collapsible-set" class="ui-collapsible-set">

                    <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">

                        <h3 class="sub_menu_heading ui-collapsible-heading ui-collapsible-heading-collapsed ui-li-heading">

                        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-up-c" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="c">

                        <span class="ui-btn-inner"><span class="ui-btn-text">Section A1.1<span class="ui-collapsible-heading-status"> click to expand contents</span></span>

                        <span class="ui-icon ui-icon-shadow ui-icon-plus">&nbsp;</span></span></a></h3>

                        <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

                            <p class="ui-li-desc">I'm the collapsible set content for section 1.</p>

                        </div>

                    </div>



                    <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">

                        <h3 class="sub_menu_heading ui-collapsible-heading ui-li-heading ui-collapsible-heading-collapsed">

                        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-focus ui-btn-up-c" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="c">

                        <span class="ui-btn-inner"><span class="ui-btn-text">Section A1.2<span class="ui-collapsible-heading-status"> click to expand contents</span></span>

                        <span class="ui-icon ui-icon-shadow ui-icon-plus">&nbsp;</span></span></a></h3>

                        <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">

                            <p class="ui-li-desc">I'm the collapsible set content for section 2.</p>

                        </div>

                    </div>

                </div>

<!-- section A1 end here-->

</div>

これらの追加のタグ ( new や の後のタグなど) は、スタイルの問題を引き起こしています。問題を回避するために、これらのタグを削除またはカスタマイズすることはできますか?

また

jquery.min CSS ファイルを含める必要があるため、jquery のデフォルト CSS ファイルを保持し、カスタマイズ用のオーバーライド CSS ファイルを作成しますか?

また

独自の CSS ファイルを作成し、通常の jquery CSS をコピーして、自分で変更する必要がありますか? したがって、合計 1 つの CSS ファイルがあります。

上記の問題を解決するために私に助けてください/アドバイスしてください。

4

2 に答える 2

0

JQMテーマをカスタマイズする方法について説明します。これをチェックしてください

于 2013-01-29T08:39:34.160 に答える
0

カスタマイズされた jquery モバイル CSS の使用について、私が知っているいくつかの事実を説明しようと思います。

1.jquery を使用してページをカスタマイズしている場合、マークアップ全体を独自の形式で再設計しようとします。たとえば、コンテンツ全体を「ページ」ロール タグに追加していない場合は追加します。要素をスタイリングするためのタグです。これは、「data-role」属性を様式化されたマークアップに変換するためであり、それは問題ではありません。

2.jquery テーマ ローラーから独自のカスタム テーマを作成している場合は、自分でデザインした新しいスウォッチを含む css がロールアウトされることに注意してください。カスタマイズしたテーマのみで要素のスタイルを設定する場合は、jquery-mobile を使用します。 .css はオプションです。jquery css のテーマを使用し、独自の新しいテーマを追加する場合は、theme="f" 以降で新しいスウォッチを作成します。これは、テーマ "a" から "e" が jquery モバイルで既に定義されているためです。 css.新しいテーマを jquery モバイル css と組み合わせて使用​​するには、jquery css を変更する必要があります。つまり、新しいスタイルを取得して jquery css に貼り付けるだけです。新しいスタイルは ui のような見本文字で作成されるため、これは難しくありません。 -bar-f、ui-body-f、ui-button-up-fなど....

jquery モバイル ドキュメントも参照する必要があると思います。

それが役立つことを願っています。

于 2013-01-29T07:32:53.027 に答える