0

Bootstrap(twitter) を使用した MVC 4 フレームワークに基づく Web アプリケーションがあり、スクロールスパイを使用してページの 1 つを 1 ページのナビゲーションにしたい:

サイト全体の上部に固定ナビゲーション バーがあり、サイトの 1 つのページにスクロールスパイ付きのサイド バー ("nav nav-pills nav-stacked pull-left") を追加したい。

col-md-3 =サイドバーを格納する左側

col-md-9 =私のコンテキストを保存する右側

私はさまざまなことを試してみましたが、何もうまくいかないようです.1つ気づいたことは、ボディタグに追加する必要があることです:

<body data-spy="scroll" data-target="#side-nav">

しかし、MVC では body タグは "_layout" にあり、この共有部分ビューには触れたくありません。

私に何ができる ？誰かがこの機能を MVC に実装していて、その小さな例を教えてくれるでしょうか?

これは私のコードです: 

@{
    ViewBag.Title = "Designer";
}

    <div class="row">


    <div class="col-md-3">
        @* Index *@
        <div class="nav-pills pull-left affix navspy">
            <div id="side-nav">
                <ul class="nav">
                    <li><a href="#general">General</a></li>
                    <li><a href="#words">Words</a></li>
                    <li><a href="#filetype">File Type</a></li>
                    <li><a href="#routes">Routes</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-9">

    <div id="general">
        @* Section Gereral *@
        <h2 class="page-header">Gereral</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div class="active" id="words">
        @* Section Words *@
        <h2 class="page-header">Words</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div id="filetype">
        @* Section File Type *@
        <h2 class="page-header">File Type</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div id="routes">
        @* Section Routes *@
        <h2 class="page-header">Routes</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

</div>

</div>

<script>
    $(document).ready(function () {
        $('body').attr("data-spy", "scroll");
        $('body').attr("data-target", "#side-nav");

    });
</script>

ここで何が欠けていますか？

4

1 に答える 1

0

JavaScript を使用して属性を<body>タグに動的に追加できます。

scrollspy があるページにこのスクリプトを追加します。内に読み込まれる_Layoutと、属性が<body>タグに追加されます。

yourPage.cshtml

@{
    ViewBag.Title = "Designer";
}

@section scripts
{
    <script>
            $(document).ready(function(){        
                $( 'body' ).attr("data-spy","scroll");
                $( 'body' ).attr("data-target","#side-nav");  

            });
    </script>
}

[...]

共有 \ _Layout.cshtml

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    [...]

        @RenderBody()       

    [...]

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", false)
</body>
</html>
于 2014-07-28T00:33:03.863 に答える