jQuery Mobile列表视图，将投票按钮添加到行项目中

jQuery Mobile listview, Adding vote buttons to a line item

本文关键字：添加 按钮 项目 列表 Mobile 视图 jQuery      更新时间：2023-09-26

我想在jQuery移动列表视图的左侧添加两个投票按钮。投票按钮应位于列表项的中心，并且应位于左侧。

我已经使用javascript实现了这一点，但我真正想做的是在没有任何额外javascript的情况下实现这一点并使用标准的jquery移动数据角色属性和纯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;
}

这不起作用（示例）。

然而，我能够让它发挥作用，但只需要删除HTML标记中的2个投票按钮，然后添加一些javascript，在列表视图增强后动态添加按钮。

这里是我为使其工作而添加的javascript（实际示例）：

$(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插入投票按钮？

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

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>中，我将投票按钮放在它们自己的容器中，这样它就可以位于左侧。这是定位容器的CSS和容器中的2个按钮：

.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伪选择器；你可以使用你喜欢的btn和不喜欢的btn类。。。

以下是jQM 1.4.x 的更新FIDDLE

相关文章：