I am looking to incorporate 2 vote buttons within a jQuery mobile listview, positioned on the left-hand side and centered within each list item. While I have managed to achieve this using javascript, my goal is to accomplish it without any additional scripting by leveraging standard jquery mobile data-role attributes and pure HTML & CSS.
Below is the desired HTML markup:
<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>
The accompanying CSS styles are as follows:
.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;
}
Despite these efforts, the functionality does not work as intended (live example).
To address this issue, I resorted to dynamically adding the vote buttons through javascript after the listview has been enhanced. The script that successfully accomplishes this can be viewed in action here (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);
});
});
});
However, this post-enhancement addition of the vote buttons via javascript is not the optimal solution. Ideally, I seek a method that forgoes javascript altogether in inserting these buttons and relies solely on HTML and CSS. Is there a viable approach that achieves this objective?