Question

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

我有点使用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;
}

这不起作用（live example）。

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

这里添加了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

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

<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伪选择器;你可以使用你喜欢的btn和dislike-btn课程......

以下是jQM 1.4.x的更新 FIDDLE

jQuery Mobile listview，为订单项添加投票按钮

1 个答案: