从javascript动态填充到导航栏

dynamically populate into navigation bar from javascript

本文关键字：导航 填充 javascript 动态      更新时间：2023-09-26

这是我的jquery移动页面标题部分，我想在这段代码中填充从javascript到导航栏的动态填充数据。

<div data-role="page" data-theme="a" id="homePage"  >
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3 class="mblHeading">Client</h3>
        <a href="#assignedWI" data-icon="home" data-transition="slide" data-theme="a"></a> <a data-rel="dialog" data-position-to="window" data-transition="slidedown" data-theme="a" data-mini="true" href="#AboutDialog" class="ui-btn-right"> About </a>
        <div data-role="navbar" >
            <ul id="navid">
                <li><a href="a.html">One</a></li>
                <li><a href="b.html">Two</a></li>
            </ul>
        </div>
    </div>

动态填充内容的java脚本代码。这里querytableid是navid。navigationList是一个数组

function populateQueryList4(queryTableID)
{
    var listParent = jq(queryTableID);
    listEntry = document.createElement("LI");
    aNode = document.createElement("A");
    aNode.innerHTML=navigationList[k-1];
    listEntry.appendChild(aNode);
    aNode.onclick = function() {
        //displayArtifactContent(artifactAreaInfoMap[wiTitle]);
    };
    listParent.append(listEntry);
    jq("#navid").navbar('refresh');
}

不幸的是你不能像那样填充导航栏。函数navbar()和navbar('refresh')不会在这里帮助你，而不是trigger('create')或trigger('pagecreate')。由于某些原因，当你动态地添加额外的导航栏项目时，它不会像它应该的那样样式化，这是一个错误。

有两种方法可以做到。

在创建页面时或创建页面前动态填充导航栏。

基本上在这2个事件页面的样式不是根据jQuery移动样式样式。因此，此时添加的任何内容都将自动增强。

这里是一个工作的jsFiddle示例:http://jsfiddle.net/Gajotres/SJG8W/

$(document).on('pagebeforecreate', '#index', function(){       
    $('[data-role="navbar"]').html('<ul>' +
        '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
        '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
        '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
        '</ul>');
});

手动增强动态添加的导航栏项

另一个解决方案是自己做。它并不像您在工作示例中看到的那样复杂:http://jsfiddle.net/Gajotres/V6nHp/

$('#index').live('pagebeforeshow',function(e,data){    
    navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});

var navbarHandler = {
    addNewNavBarElement:function(navBarID, newElementID, newElementText) {
        var navbar = $("#" + navBarID);
        var li = $("<li></li>");        
        var a  = $("<a></a>");
        a.attr("id", newElementID).text(newElementText);
        li.append(a);
        navbar = navbarHandler.clearNavBarStyle(navbar);
        navbar.navbar("destroy");
        li.appendTo($("#" + navBarID + " ul"));
        navbar.navbar();
    },
    clearNavBarStyle:function(navbar){
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-['w'-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });
        return navbar;   
    }
}

的评论

正如你所看到的这个方法的工作，你必须了解jQuery移动页面事件是如何工作的，要了解更多，请看看我的另一个答案:jQuery移动:文档准备与页面事件。

还可以看看我关于jQuery Mobile页面标记增强的另一个答案:jQuery Mobile:动态添加内容的标记增强

相关文章：