MVCの下でナビゲーションするのは明るいです.
18428 ワード
MVCの下でナビゲーションするのは明るいです。
前言
ナビゲーションのハイライトはいつもみんなを困らせる問題です.
純粋なJavascriptなら、現在のページの住所とリンク先が関係しているかどうかを判断できます.
このような弊害は自由度が低すぎて、MVCでは一定の問題が発生します(MVCではデフォルトのControllerとアクションがあります).
もう一つの案はフロントエンドとバックエンドを結合し、各ページに属性を設定し、ページで判断する.条件を満たせば明るくなる.
このような弊害は、あなたのすべてのページに属性を設定する必要があります.
何か完璧な解決策がありますか?苦労が絶えない
不思議なエヴァ関数
Javascriptには精粋があり、粕もあります.その中のevalはほとんどの動態言語の精髄です.この関数を利用できますか?
基本的な考え方:
各li(リンク対応)にclassを設定します.例えば、class="controller_"ホーム
このページがhomeである限り、このリンクを明るくします.
ページでは、コードを通じて直接にcontrollerとactionの名前を得ることができます.各ページごとに手動で設定する必要はありません.
ソリューションまずすべてのliに一つのクラス を加えます.その後、二つのhiddenを利用して、controllerとactionの名前をフロントページに置いてください. controllerとactionの名前を読み出す eval関数を利用してcontroller_[controler名前]とaction_[action名前]この2つの変数の割り当て classにおける表式 を取り出す. eval関数を用いて式を実行し、最後の結果を判断し、条件を満たすならば明るいクラス を加える.
上記のコードは各ページのために作成する必要はありません.マスターページで一回作成すればいいです.このJavascript関数を参照してください.
もしあなたのul IDとハイライトクラスの名前が違ったら、この関数を呼び出した時に自分の名前を教えてくれればいいです.
高度なアプリケーション
こんなに簡単ですか?これだけですか
もしそうなら、Javascriptを利用してページアドレスを直接判断することができます.
じゃ、面白いものを遊びに来ましょう.
eval関数なので、このクラスで複雑な表現を作ることができます. controllerはHomeであれば、またはAboutであれば、このリンクをアクティブにします. controllerはArtcleでなければなりません.actionはAdd でなければなりません.
つまり、このクラスでは複雑なJavascriptを入力できます.これで複雑なナビゲーションの活性化機能が実現できます.
住所:MVCの下でナビゲーションするのは高くて明るい完璧な解決案です。 (原文は自分のブログです.オリジナルです.転載ではありません.)
前言
ナビゲーションのハイライトはいつもみんなを困らせる問題です.
純粋なJavascriptなら、現在のページの住所とリンク先が関係しているかどうかを判断できます.
このような弊害は自由度が低すぎて、MVCでは一定の問題が発生します(MVCではデフォルトのControllerとアクションがあります).
もう一つの案はフロントエンドとバックエンドを結合し、各ページに属性を設定し、ページで判断する.条件を満たせば明るくなる.
このような弊害は、あなたのすべてのページに属性を設定する必要があります.
何か完璧な解決策がありますか?苦労が絶えない
不思議なエヴァ関数
Javascriptには精粋があり、粕もあります.その中のevalはほとんどの動態言語の精髄です.この関数を利用できますか?
基本的な考え方:
各li(リンク対応)にclassを設定します.例えば、class="controller_"ホーム
このページがhomeである限り、このリンクを明るくします.
ページでは、コードを通じて直接にcontrollerとactionの名前を得ることができます.各ページごとに手動で設定する必要はありません.
ソリューション
<
ul
id
="top-navigation"
>
<
li
class
="controller_Home"
><
span
><
span
>
@Html.ActionLink(" ","Index","Home")
</
span
></
span
></
li
>
<
li
class
="controller_Article"
><
span
><
span
>
@Html.ActionLink(" ","Index","Article")
</
span
></
span
></
li
>
<
li
class
="controller_User"
><
span
><
span
>
@Html.ActionLink(" ","Index","User")
</
span
></
span
></
li
>
</
ul
>
<
input
id
="controller"
type
="hidden"
value
="@Html.ViewContext.RouteData.Values["
controller"]"
/>
<
input
id
="action"
type
="hidden"
value
="@Html.ViewContext.RouteData.Values["
action"]"
/>
$(
function
() {
SetNavClass(
'
top-navigation
'
,
'
active
'
);
});
function
SetNavClass(ulId, className) {
controller
=
$(
'
#controller
'
).val();
action
=
$(
'
#action
'
).val();
eval(
'
controller_
'
+
controller
+
'
= true
'
);
eval(
'
action_
'
+
action
+
'
= true
'
);
list
=
$(
'
#
'
+
ulId
+
'
>li
'
);
for
(
var
k
=
0
; k
<
list.length; k
++
) {
item
=
list[k];
str
=
GetClassName(item);
try
{
if
(eval(str)) $(item).addClass(className);
}
catch
(e) { }
}
}
function
GetClassName(item) {
classes
=
$(item).attr(
'
class
'
).split(
'
'
);
for
(
var
k
=
0
; k
<
classes.length; k
++
) {
if
(classes[k].indexOf(
'
controller
'
)
>
-
1
||
classes[k].indexOf(
'
action
'
)
>
-
1
)
return
classes[k];
}
}
上記のコードは各ページのために作成する必要はありません.マスターページで一回作成すればいいです.このJavascript関数を参照してください.
もしあなたのul IDとハイライトクラスの名前が違ったら、この関数を呼び出した時に自分の名前を教えてくれればいいです.
高度なアプリケーション
こんなに簡単ですか?これだけですか
もしそうなら、Javascriptを利用してページアドレスを直接判断することができます.
じゃ、面白いものを遊びに来ましょう.
eval関数なので、このクラスで複雑な表現を作ることができます.
<
li
class
="controller_Home||controller_About"
><
span
><
span
>
@Html.ActionLink(" ", "Index", "Home")
</
span
></
span
></
li
>
<
li
class
="controller_Article&&action_Add"
><
span
><
span
>
@Html.ActionLink(" ", "Index", "Article")
</
span
></
span
></
li
>
つまり、このクラスでは複雑なJavascriptを入力できます.これで複雑なナビゲーションの活性化機能が実現できます.
住所:MVCの下でナビゲーションするのは高くて明るい完璧な解決案です。 (原文は自分のブログです.オリジナルです.転載ではありません.)