带有文本和URL的图像列表视图

时间:2016-02-02 03:51:42

标签: javascript listview

我想显示并列出图标和文字。列表是指向特定URL的链接。我将所有这些存储在一个数组中,但图像不是从数组中填充的。这是一个spinet。

var mainPanel = [ {
    icon : "images/green/home.png",
    title : "Home",
    url : "#tilehome-page"
}, {
    icon : "images/green/home.png",
    title : "Mayor's Conner)",
    url : "#mayorsmessage-page"
}, {
    icon : "images/green/home.png",
    title : "Report A Problem",
    url : "#reportaproblem-page"
} ];  

function createmenuPnl() {
    var items = '';
    //ul = $(".mainMenu:empty"); 
    var ulStr = "<ul>";
    for (var i = 0; i < mainPanel.length; i++) {
        items += '<li><a href="' + mainPanel[i].url + '"> + mainPanel[i].title
        + '</a></li>';
    }
    ulStr+= items;
    ulStr+='</ul>';
    console.log('The ulStr formed is:'+ulStr);
    $("#cssmenu").append(ulStr);
    $("#cssmenu").trigger( "updatelayout" ); 

}

我想要的只是在列表中动态添加图像图标

2 个答案:

答案 0 :(得分:0)

你在mainPanel [i] .title之前忘了单引号..它应该是这样的..

items += '<li><a href="' + mainPanel[i].url + '">' + mainPanel[i].title + '</a></li>';

答案 1 :(得分:0)

我们走了 问题出在你的循环中

for (var i = 0; i < mainPanel.length; i++) {
    // after '"> need one '
    items += '<li><a href="' + mainPanel[i].url + '">' + mainPanel[i].title
    + '</a></li>';
}