1

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

这是 List.js 的 URL。 http://listjs.com/

这是文档。https://github.com/javve/list

这是我的代码。

<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>

4

6 回答 6

6

这是我找到的解决方案。

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>.

于 2016-11-05T02:15:31.777 回答
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>" );
});

希望这可以帮助。

于 2014-09-08T11:27:53.383 回答
1

使用图像和链接（通过填写 href/src）的功能是在 1.2.0 版中引入的。您在指定应填充的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>

这是一个最小的 JSFiddle 示例。

这是他们文档中的一个类似示例。

于 2016-09-24T15:10:27.277 回答
0

恐怕插件好像不能这样用。

该插件将您提供的值（在 中values）与一个标签包装起来，该标签具有一个与数组元素的键匹配的类（例如，name : Jonny在任何带有“name”类的标签中传递插入“Jonny”）。您不能使用标记属性（如href或src）来执行此操作，因为它们与插件运行的范围不同。

您可以将值包装在a标签中，但这不是您要在这里做的。

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

于 2013-08-13T10:15:18.963 回答
0

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

如果同样适用于输入，那就太好了（将使用“值”）

于 2014-11-05T18:23:39.100 回答
-1

在你的 JS 中：

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

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

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

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

于 2018-05-19T11:31:51.253 回答