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'）不会在这里帮助你，不会触发（'create'）或触发（'pagecreate'）。出于某种原因，当您动态添加其他导航栏项时，它将不会按预期进行样式设置，这是一个错误。

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

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

基本上在这2个事件中，页面的样式没有根据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;   
    }
}

从javascript动态填充到导航栏

1 个答案:

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

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

评论