javascript - 带有两个按钮的 ListView 行设置属性div

Question

我正在使用 jquery mobile 1.4.3 构建一个移动应用程序，我正在尝试创建一个 ListView ，其中每行都有 2 个按钮。 问题是，带有我插入的按钮的“div”没有出现，这里是 fiddle 示例:FIDDLE

代码示例:

var $menuList = $("#suggestions-list");

$menuList.empty();

var listItem = document.createElement("li");
var divForButtons = document.createElement("div");
var anchor = document.createElement("a");
var buttonAdd = document.createElement("a");
var buttonDelete = document.createElement("a");
var header1 = document.createElement("h1");
var header = document.createElement("h3");
var paragraph = document.createElement("p");

anchor.setAttribute("href", "");
anchor.setAttribute("data-id", "hey");

header.textContent = "something";
header1.textContent = "hello";
paragraph.textContent = "10" + "€";

buttonAdd.setAttribute("href", "#");
buttonAdd.setAttribute("data-role", "button");
buttonAdd.setAttribute("id", "btnUserSugAdd");
buttonAdd.setAttribute("data-id", "1");
buttonAdd.setAttribute("class", "split-custom-button");
buttonAdd.setAttribute("data-icon", "plus");
buttonAdd.setAttribute("data-rel", "dialog");
buttonAdd.setAttribute("data-theme", "c");
buttonAdd.setAttribute("data-iconpos", "notext");
buttonAdd.setAttribute("data-icon-position", "right");

buttonDelete.setAttribute("href", "#");
buttonDelete.setAttribute("align", "left");
buttonDelete.setAttribute("data-role", "button");
buttonDelete.setAttribute("id", "btnUserSugDel");
buttonDelete.setAttribute("data-id", "2");
buttonDelete.setAttribute("class", "split-custom-button");
buttonDelete.setAttribute("data-icon", "delete");
buttonDelete.setAttribute("data-rel", "dialog");
buttonDelete.setAttribute("data-theme", "c");
buttonDelete.setAttribute("data-iconpos", "notext");
buttonAdd.setAttribute("data-icon-position", "left");


divForButtons.appendChild(buttonAdd);
divForButtons.appendChild(buttonDelete);

anchor.appendChild(header);
anchor.appendChild(header1);
anchor.appendChild(paragraph);

listItem.appendChild(anchor);
listItem.appendChild(divForButtons);

$menuList.append(listItem);


$menuList.listview('refresh');

Answer 1

我先放演示链接再解释:

Here is your updated FIDDLE

向 <UL> 添加一个类(例如 has-editBtns):

<ul data-role="listview" id="suggestions-list" class="has-editBtns">
</ul>

给 divForButtons <DIV>一类 editBtns，并为按钮使用 jQM 1.4 类:

var listItem = document.createElement("li");
var divForButtons = document.createElement("div");
var anchor = document.createElement("a");
var buttonAdd = document.createElement("a");
var buttonDelete = document.createElement("a");
var header1 = document.createElement("h1");
var header = document.createElement("h3");
var paragraph = document.createElement("p");

anchor.setAttribute("href", "");
anchor.setAttribute("data-id", "hey");

header.textContent = "something";
header1.textContent = "hello";
paragraph.textContent = "10" + "€";

buttonAdd.setAttribute("href", "#");
buttonAdd.setAttribute("id", "btnUserSugAdd");
buttonAdd.setAttribute("data-id", "1");
buttonAdd.setAttribute("class", "ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all");

buttonDelete.setAttribute("href", "#");
buttonDelete.setAttribute("id", "btnUserSugDel");
buttonDelete.setAttribute("data-id", "2");
buttonDelete.setAttribute("class", "ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all");

divForButtons.setAttribute("class", "editBtns");
divForButtons.appendChild(buttonAdd);
divForButtons.appendChild(buttonDelete);

anchor.appendChild(header);
anchor.appendChild(header1);
anchor.appendChild(paragraph);

listItem.appendChild(anchor);
listItem.appendChild(divForButtons);

最后为这些类添加一些 CSS 规则:

.has-editBtns li > a {
    margin-left: 40px !important;
}
.editBtns {
    position: absolute;
    top: 0px;
    width: 39px;
    bottom: 0px;
    padding-left: 6px;
    border-top: 1px solid rgb(221, 221, 221);
}
.editBtns a:first-child {
    position: absolute;
    bottom: 50%;
    margin-bottom: 2px;
}
.editBtns a:last-child {
    position: absolute;
    top: 50%;
    margin-top: 2px;
}

这会将主链接移动到右侧，为按钮留出空间。按钮 div 绝对位于左侧，2 个按钮一个在另一个上方。