1

このような一般的な質問をしてすみません。Orchard CMS で Web サイトを作成しています。Web サイトのデザインとインタラクティブ性は重要な要件です。固定サイズ (幅 900 ピクセル) のナビゲーション メニューがありますが、できるだけ多くのメニュー項目を調整できるはずです (CSS を変更して手動で行います)。メニューのマウスホバーなどのアニメーションを作成するために、jQueryを少し使用しました。問題は、css および jQuery パラメーターがハードコードされていることです。したがって、ユーザーが新しいメニュー項目を追加するために変更する場合、メニュー項目とサブ項目の数を事前に知る必要があるため、平均的なユーザーがそれをカスタマイズすることは非常に簡単ではありません。これは CMS の要点です。このメニューを (jQuery アニメーションで) インタラクティブに保つ最善の方法は何ですか?

css/jQuery 値 (幅など) を動的に設定するモジュール (ナビゲーション メニュー コンポーネント) を作成する必要があります。

更新 また、現在、HTML (ナビゲーション メニュー、Unorderd List など) とその jQuery スクリプト参照が myLayout.cshtmlに埋め込まれており、ナビゲーション メニューのスタイルはSite.css私のテーマにありますが、これは悪い習慣と見なされますか?

4

1 に答える 1

1

Menu.cshtmlビューをオーバーライドし、いくつかのロジックをコーディングしてメニュー項目の数をチェックし、含まれるメニュー項目の数に基づいて異なる ID でナビゲーション メニューをレンダリングすることで、最終的に orchard 1.5 でこれを実現しました。Site.css次に、さまざまなサイズのナビゲーション メニューに適した CSS を使用して、さまざまな CSS セレクターを に追加しました。最終的にはMenu.cshtml次のようになりました (これは、現在アクティブなテーマの Views フォルダーにあります)。

@
{

    Script.Require("jQuery");
    var tag = Tag(Model , "ul");
    var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);

}
@{//if the menu contains 3 items, render a nav called 'ThreeItemNav'
if(items.Count == 3){
<nav id="ThreeItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>
}
else if(items.Count == 4){
<nav id="FourItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>

}
else if(items.Count == 5){
<nav id="FiveItemNav">
    @tag.StartElement
        @* see MenuItem shape template *@
        @DisplayChildren(Model)
    @tag.EndElement
</nav>


}
}

//Include the jQuery to add animations to the navigation menu
@using (Script.Foot())
{
    <script type ="text/javascript">
    //<![CDATA[
        $(document).ready(function () {
       //Add your script here
            $(" #FiveItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });


            $(" #FourItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });

            $(" #ThreeItemNav li").hover(function () {
        //Do something when the sub menu list items are hovered....
            });
        });


    //]]>
    </script>
}

ThreeItemNav各 nav 要素 ( 、FourItemNavおよび)のテーマに CSS セレクターを追加する必要があることに注意してください。FiveItemNavたとえば、現在のテーマでは次のようになりますSite.css。

/*Style the Three Item Navigation menu*/
#ThreeItemNav li
{    
background-color:#263A79;
}

#ThreeItemNav a:hover
{
border-right:1px solid #333;
border-left:1px solid #333;
}


#ThreeItemNav > ul li.current 
{
       background:#5882FA;
}

/*Style the Four Item Navigation menu*/

#FourItemNav li
{
       background:#Purple;
}

#FourItemNav a:hover
{
       background:Orange;
}

.........more styles

これは確かに長い道のりのように思えますが、Orchard ナビゲーション メニューの機能を維持し、CSS でスタイルを設定し、jQuery アニメーションを追加できるようにするには、これが最善の方法です。長い目で見れば、ナビゲーション メニューにいくつかの強力な機能を追加するには、初期の開発コストに見合うだけの価値があると考えました。これをよりきちんとした方法で行う方法についての提案を聞きたいです。また、Orchard 1.5 を使用することを強くお勧めします。これは、階層ナビゲーション メニューの作成をサポートする機能が組み込まれているためです。

Menu.cshtmlビューとビューの内部の仕組みをチェックするMenuItem.cshtmlと、Orchard でナビゲーション メニューがどのようにレンダリングされるかを理解しようとするだけでなく、デフォルトのテーマ マシンがナビゲーション メニューとそのさまざまなレベル/サブ メニューをどのようにスタイル設定するかを調べるのにも役立ちます。

于 2012-08-29T16:28:35.980 に答える