Question

我正在使用插件List.js.它的工作正常。但不知道如何在其中添加图像src或href值。它可以和其他标签一起使用。

这是我的代码。

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="Div1">
    <input class="search" id="Text1" />
    <span class="sort" data-sort="name">Sort by name</span>
    <span class="sort" data-sort="desc">Sort by desc</span>
    <ul class="list">
    </ul>
</div>

<div style="display: none;">

    <div id="hacker-item1">

        <div style="width: 20%; float: left">
            <table>
                <tr>
                    <td colspan="2" align="center" valign="top">

                        <a href="">

                            <img alt="" width="125" height="125" border="0" class="name">



                            </img>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td align="center" valign="top" class="desc">

                        <br></br>

                    </td>
                    <td class="createdDate"></td>
                </tr>
            </table>
        </div>

        <h3 class="name"></h3>
        <p class="desc"></p>
        <p class="createdDate"></p>
    </div>
</div>
<script src="list.js"></script>

<script type="text/javascript">

    var options = {
        item: 'hacker-item1'
    };

    var values = [
{ name: 'Jonny', desc: 'Stockholm', createdDate: 'June 8, 2013' }
, { name: 'Jonny', desc: 'Stockholm', createdDate: 'May 8, 2013' }
, { name: 'sssssss', desc: 'eeeeeeeee', createdDate: 'June 20, 2013' }
    ];
    //    values.push({name : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue, desc : xml.getElementsByTagName("title")[0].childNodes[0].nodeValue,createdDate : xml.getElementsByTagName("publishdate")[0].childNodes[0].nodeValue});
    var hackerList = new List('Div1', options, values);
    //alert(hackerList.items.length + '--');

</script>

Answer 1

这是我找到的解决方案。

var options = {
    valueNames: [
        'name',
        { attr: 'href', name: 'link'},
        { attr: 'src', name: 'image'}
    ],
    // This describes how items must look like in HTML
    item: '<li><a class="link"><img class="image"><h4 class="name"></h4></a></li>'
}
var values = [
    {
        name: 'John Cena',
        image: 'http://someimage.com/a.png',
        link: 'http://johncena.com'
    },
    {
        name: 'Matt Damon',
        image: 'http://someimage.com/b.png',
        link: 'http://thebournidentity.com'
    }
]
var usersList = new List('your-list', options, values);

关联的HTML代码为：

<div id="your-list">
    <input class="search" placeholder="Search">
    <ul id="list"></ul>
</div>

请注意，如果您指定的item未包含在<li>中，则此功能无效。

Answer 2

可以通过循环遍历所有对象将列表项追加到现有列表中。见这个例子：

http://codepen.io/hugoborjesson/pen/zLluo

如示例所示，您可以使用js添加图像src和href。

var ul = jQuery('ul.list');
jQuery.each( values, function( i, item ) {
    ul.append( 
        "<li class='list-item'>" +
        "<h3 class='name'>" + item.name + "</h3>" +
        "<p class='desc'>" + item.desc + "</p>" +
        "<p class='createdDate'>" + item.createdDate + "</p>" +
        "<a class ='img-link' href='" + item.link + "'<img src='" + item.img_src + "' class='img'>bild</a>" +
        "</li>" );
});

希望这有帮助。

Answer 3

1.2.0版中引入了使用图像和链接的能力（通过填写href / src）。您在valueNames数组中提供了对象，您可以在其中指定应填充的attr。

以下是显示链接用法的示例。

JavaScript的：

var options = {
    valueNames: [
        { name: 'mylink', attr: 'href' },
        'mytext'
    ]
};

var mylist = new List('mylist', options);

mylist.add({
  mylink: 'http://example.com/subfolder',
  mytext: 'Example.com Subfolder'
});

HTML：

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>


<div id="mylist">
    <ul class="list">
        <li>
            <a href="http://example.com" class="mylink mytext">Example.com</a>
        </li>
    </ul>
</div>

这是minimal JSFiddle example。

这是一个类似的例子in their docs。

Answer 4

我担心插件无法以这种方式使用。

插件将您提供的值（在values中）包含一个带有与数组元素键相匹配的类的标记（例如，将name : Jonny插入'Jonny'在任何标记中插入一个类'名称'）。您无法使用标记属性（例如href或src）执行此操作，因为它们与插件运行的范围不同。

您可以将值包装在a标记中，但这不是您在此处尝试执行的操作。

我认为您需要扩展插件以支持此功能，或者在插件重写生成的标记后编写自己的代码来执行。

Answer 5

当我尝试使用img标签时，“src”会自动用于值。所以当我使用url作为值时，img被显示为listitem。

如果同样适用于输入（将使用“值”）

，那将是很好的

Answer 6

在你的JS中：

var options = {valueNames: [
'name',
{ attr: 'href', name: 'link' }]};

接下来，您可以在HTML中使用：

<a class="name link"></a>

http://listjs.com/examples/data-attributes-custom-attributes/ 看这里，你可以使用自己的属性和href属性。

添加图片src和<a> href in List.js</a>

6 个答案: