javascript - jQuery Mobile ListView ，将投票按钮添加到行元素

Question

我想在 jQuery 移动 ListView 的左侧添加 2 个投票按钮。投票按钮应位于列表项的中央，并且应位于左侧。

我已经使用 javascript 让它工作，但我真正想做的是让它在没有任何额外 javascript 的情况下工作，并使用标准的 jquery 移动数据 Angular 色属性和纯 HTML 和 CSS 的增强。

这是我想使用的 HTML 标记:

<div data-role="page">
    <div data-role="content">
        <ul class="has-vote-btns" data-role="listview">
            <li>
                <a href="#">
                    <h3>Line Item</h3>
                    <p>Sub title</p>
                </a>
                <a href="#" data-icon="bars"></a>
                <a href="#" class="vote-btn like-btn" data-icon="arrow-u" title="Like"></a>
                <a href="#" class="vote-btn dislike-btn" data-icon="arrow-d" title="Dislike"></a>
            </li>
        </ul>
    </div>
</div>

这是 CSS:

.vote-btn {
    position: absolute;
    top: 50%;
    left: 5px;
    z-index: 2;
}
.vote-btn .ui-btn-inner {
    padding: 0;
}
.like-btn {
    margin-top: -30px;
}
.dislike-btn {
    margin-top: 0px;
}
.has-vote-btns .ui-link-inherit {
    padding-left: 40px !important;
}
.has-vote-btns .ui-li-has-thumb .ui-link-inherit {
    padding-left: 118px !important;
}

这不起作用(live example)。

然而，我能够让它工作，但只能通过删除 HTML 标记中的 2 个投票按钮，然后添加一些 javascript 以在 ListView 已经增强后动态添加按钮。

这里是我添加的 javascript 以使其工作(live example):

$(function(){
    $('.has-vote-btns').each(function() {
        $(this).find('li').each(function(i, li){
            $('<a href="#" class="vote-btn like-btn" title="Like"></a>').buttonMarkup({
                icon: 'arrow-u',
                iconpos: 'notext'
            }).appendTo(li);
            $('<a href="#" class="vote-btn dislike-btn" title="Dislike"></a>').buttonMarkup({
                icon: 'arrow-d',
                iconpos: 'notext'
            }).appendTo(li);
        });
    });
});

但是在增强后添加 2 个投票按钮的第二种方法是不方便的。如果我可以使用纯 HTML 和 CSS 来做到这一点，而不是在增强后修改那些按钮，那就更好了。

有没有不使用 javascript 插入投票按钮的解决方案？

Answer 1

我已经用纯 CSS 解决方案更新了您的第一个 fiddle :

FIDDLE

这不是唯一的方法，但我相信它可以解决您的问题。

<ul> HTML 更改如下:

<ul class="has-vote-btns" data-role="listview" data-split-icon="bars" data-split-theme="d">
    <li> 
        <a href="#">
            <h3>Line Item 1</h3>
            <p>Sub title 1</p>
        </a>
        <a href="#"></a>
        <div class="vote-btns"> 
            <a href="#" data-role="button" data-icon="arrow-u" data-icon="arrow-u" data-iconpos="notext" data-inline="true" title="Like"></a>
            <a href="#" data-role="button" data-icon="arrow-d" data-icon="arrow-u" data-iconpos="notext" data-inline="true" title="Dislike"></a>
        </div>
    </li>
</ul>

我在 <ul> 设置数据拆分图标和主题级别 ( data-split-icon="bars" data-split-theme="d" ) 和 <li> ，我将投票按钮放在它们自己的容器中，这样它就可以位于左侧。这是定位容器和容器内的 2 个按钮的 CSS:

.has-vote-btns .ui-link-inherit {
    margin-left: 40px !important;
}
.vote-btns {
    position: absolute;
    top: 0px;
    width: 39px;
    bottom: 0px;
}
.vote-btns a:first-child {
    position: absolute;
    bottom: 50%;
    margin-bottom: 2px;
}
.vote-btns a:last-child {
    position: absolute;
    top: 50%;
    margin-top: 2px;
}

当然你不必使用 :first-child 和 :last-child 伪选择器；你可以使用你的 like-btn 和 dislike-btn 类...

Here is an updated FIDDLE for jQM 1.4.x