2

JSONデータを使用してjQueryUIメニューバーを生成しようとしています。JSONは有効なHTMLに正しく解析されています。ただし、メニューバーは、 http：//view.jqueryui.com/menubar/demos/menubar/default.htmlに表示される一番上のメニューバーではなく、スタイルなしの順序なしリストとして表示されます。現時点では、JSONデータをHTMLに変換するルーチンは1つのメニューレベルより深くなることはないため、サブメニューオプション（[開く]、[保存]、[閉じる]など）は意図的に読み取られないことに注意してください。

何らかの理由で、以下のjQueryメソッドによって生成されたものとまったく同じHTMLをハードコーディングするとmenuBar.jsp、メニューバーのスタイルが適切に表示されます。

メインページは次のとおりです（appFrameNew.jsp）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>    

<title>Menu Test</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menu.css" />
    <link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>    
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menu.js" type="text/javascript"></script>
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menubar.js" type="text/javascript"></script>
    <script src="http://view.jqueryui.com/menubar/ui/jquery.ui.position.js" type="text/javascript"></script>

    </head>
    <body>

    <div id="layout" class="layout">

       <jsp:include page="menuBar.jsp" flush="true" />

    </div>

    </body>
    </html>

ここにありmenuBar.jspます：

<div class="demo"></div>

<script type="text/javascript">
    function select(event, ui) {
        if (ui.item.text() == 'Quit') {
            $(this).menubar('destroy');
        }
    }
    $(function() {
        $("#bar1").menubar({
            position: {
                within: $(".demo").add(window).first()
            },
            select: select
        });
    });

$.getJSON('menuBarTestJSON.json', function(data) {
    var output='<ul id="bar1" class="menubar">';
    for (var i in data.menuOptions) {
        output+='<li><a href="#">' + data.menuOptions[i].menubarItem + '</a></li>';
    }
    output+="</ul>";
    $(".demo").html(output);
});

</script>

<ul id="bar1" class="menubar">
    <li>
        <a href="#File">File</a>
        <ul>
            <li><a href="#Open">Open</a>
            <li><a href="#Save">Save</a></li>
        </ul>
    </li>
</ul>

そして最後に、menuBarTestJSON.json：

{"menuOptions":[
    {
        "menubarItem":"File",
        "menuElement": {
            "option":"Open",
            "option":"Save",
            "option":"Close",
            "option":"Quit"
        }
    }
]}

私はここ数日、無駄に解決策をWebで検索してきましたが、できるだけ早くこのプロジェクトに進む必要があります。どんな援助も大歓迎です。ありがとうございました。

4

1 に答える 1

2

次のいずれかを行う必要があります。

  1. jQueryUIメニューを初期化するコードをgetJSONコールバックに追加するか
  2. http://api.jquery.com/live/を使用して、DOMの変更を監視し、jQueryUIメニューを初期化します。

基本的に何が起こっているのかというと、$（ "＃bar1"）。menubarが準備ができたら一度起動します。しかし、その内容を更新するとき、それはそれが再びキックインする必要があることを知りません。メニューを再度初期化するように手動で要求するか、変更を監視する必要があります。

例：

<script type="text/javascript">
    function select(event, ui) {
        if (ui.item.text() == 'Quit') {
            $(this).menubar('destroy');
        }
    }
    function initMenu() {
        $("#bar1").menubar({
            position: {
                within: $(".demo").add(window).first()
            },
            select: select
        });
    }
    $(function() { initMenu(); });

   $.getJSON('menuBarTestJSON.json', function(data) {
       var output='<ul id="bar1" class="menubar">';
       for (var i in data.menuOptions) {
            output+='<li><a href="#">' + data.menuOptions[i].menubarItem + '</a></li>';
       }
       output+="</ul>";
       $(".demo").html(output);
       initMenu();
   });

</script>
于 2012-12-03T23:12:41.963 に答える