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

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

这不起作用(实例).

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

在这里我添加的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插入投票按钮的解决方案？

Answer 1

我已经使用仅CSS解决方案更新了您的第一个小提琴:

小提琴

这不是唯一的方法,但我相信它解决了你的问题.

该<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>level(data-split-icon="bars" data-split-theme="d")和the中设置数据拆分图标和主题<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