jQuery插件用法:href或data-url

时间:2016-05-12 08:21:23

标签: jquery html jquery-plugins

我正在创建一个jQuery,它会将一些li转换为文件夹切片。

我无法确定哪个更适合插件使用:

url in href

<ul id="folders">
    <li><a href="http://ggg.net/content/?folder=hospital">Hospital Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=school">School Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=house">House Folder</a></li>
</ul>

url in data-url

<ul id="folders">
    <li data-url="http://ggg.com/content/?folder=hospital">Hospital Folder</li>
    <li data-url="http://ggg.com/content/?folder=school">School Folder</li>
    <li data-url="http://ggg.com/content/?folder=house">House Folder</li>
</ul>

插件启动后的输出HTML:

<div id="folders">
    <div class="row">
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=hospital">
                <i class="fa fa-folder"></i>
                <p>Hospital Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=school">
                <i class="fa fa-folder"></i>
                <p>School Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=house">
                <i class="fa fa-folder"></i>
                <p>House Folder</p>
            </a>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

When the JavaScript doesn't run哪一个更好?作为链接工作的链接或什么都不做的数据属性?

使用带有真实链接的版本。制作您的JavaScript unobtrusive。使用progressive enhacement

就此而言,似乎根本不需要使用JavaScript来转换DOM。只需按照您希望的方式编写HTML就可以避免闪存,因为JavaScript会在以后重写它。

相关问题