2

asp.net mvc 3プロジェクトの標準タブの代わりにjquery uiタブを使用してナビゲーションを実装することは可能ですか? このサイトと非常によく似たタブ (質問、タグ、ユーザー...)。それを行う例はありますか？

これが私の実装です。

1) Razor ビュー エンジンを使用して標準の MVC 3 プロジェクトを作成しました。レイアウトページのメニューはこんな感じ。

<div id="menucontainer">
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home", null, new { title="Index"})</li>
        <li>@Html.ActionLink("About", "About", "Home", null, new { title="About"})</li>
    </ul>
</div>

2) これが私の HomeController アクションです。

public PartialViewResult Index()
{
    ViewBag.Message = "Welcome to ASP.NET MVC!";
    return PartialView();
}

public PartialViewResult About()
{
    return PartialView();
}

public ViewResult Default()
{
    return View();
}

3) また、Global.asax.cs を変更して、既定のページを表示するようにしました。

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "Home", action = "Default", id = UrlParameter.Optional } // Parameter defaults
    );

}

4) そして最後に、タブの動作を適用するスクリプトを次に示します。

$(document).ready(function() {
$('#menucontainer').tabs();
$("menucontainer").bind('tabsselect',
    function(event, ui) {
        document.title = ui.tab.title;
    }
);});

したがって、jQuery ui は各タブの追加の div をページに追加するだけで (この場合は 2 つ)、その後に div#main が追加されます。ユーザーがメニューバーの他のタブに移動した後、div#main のコンテンツを動的に置き換えたいだけです。今、それはこのように見えます。

<div id="menucontainer">
    ...
    <div id="Index">
        Content of Index tab.
    </div>
    <div id="About">
        Content of About tab.
    </div>
</div>
<div id="main">
    Content of the page.
</div>
4

1 に答える 1

0

ui-tabs-hide非アクティブなタブを非表示にするために、CSS クラスを定義していることを確認してください。

.ui-tabs-hide {
    display: none;
}

jQuery UI タブが機能する方法は、タブを変更した後、ui-tabs-hide他のすべてのタブに単純に追加し、AJAX 呼び出しからコンテンツを更新した後、現在表示されているタブから削除することです。

于 2012-06-20T08:40:22.933 に答える