从javascript动态填充到导航栏

Question

这是我的 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');
}

Answer 1

不幸的是，您不能像那样填充导航栏。函数 navbar() 和 navbar('refresh') 在这里不会帮助你，而不是 trigger('create') 或 trigger('pagecreate')。出于某种原因，当您动态添加其他导航栏项目时，它不会按应有的样式设置样式，这是一个错误。

有 2 种替代方法可以完成。

在 pagecreate 或 pagebeforecreate 页面 venet 期间动态填充导航栏。

基本上，在这两个事件页面中，样式不是根据 jQuery Mobile 样式设置的。所以此时添加的任何内容都会自动增强。

这是一个适用于您的 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 Mobile 页面事件的工作原理，要了解更多信息，请查看我的另一个答案：jQuery Mobile: document ready vs page events。

还可以看看我关于增强 jQuery Mobile 页面标记的其他答案：jQuery Mobile: Markup Enhancement of dynamically added content