jQuery Mobile 列表视图滑动菜单

Question

我有一个标准 JQM 页面，其中包含带有自动生成分隔线的 ListView。

我希望能够添加一些功能，允许用户在列表视图中的项目上向左或向右滑动，并完成以下任一操作；

1. 显示星形图标并在本地存储中创建一些信息。第二次滑动时，将图标更改为“空心”星形，并删除本地存储中的值

2. 显示一个“空心”星形图标，单击该图标会在 locastorage 中创建一个值，并且该图标将替换为“实心”星形。同样，如果第二次按下星形，本地存储值将被删除，图标将恢复为“空心”星形

我确信我在其他地方看到过有关类似主题的信息，但今天似乎找不到。我可以从哪里开始？

Answer 1

创建span将包含star 的元素。在每个元素之前添加 span li。

<ul data-role="listview" id="list">
  <span class="yellowStar"></span>
  <li>Item 1</li>
  <span class="hollowStar"></span>
  <li>Item 2</li>
  <span class="hollowStar"></span>
  <li>Item 3</li>
  <span class="hollowStar"></span>
  <li>Item 4</li>
  <span class="hollowStar"></span>
  <li>Item 5</li>
</ul>

对实心星形和空心星形应用以下 CSS 。

.ui-listview>.ui-li-static {
  overflow: initial; /* to hide spans underneath */
  -webkit-transition: -webkit-transform 300ms ease; /* transition effect */
     -moz-transition: -moz-transform 300ms ease;
       -o-transition: -o-transform 300ms ease;
          transition: transform 300ms ease;
}

ul span {
  float: right;
  padding: 1.3em 20px;
  z-index: -1;
}

ul .yellowStar {
  background-image: url(filled.png);
  background-repeat: no-repeat;
  background-position: center;
}

ul .hollowStar {
  background-image: url(hollow.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

然后附加swipeleft以显示星星。

$(document).on("click", "ul span", function () {
    $(this).toggleClass("yellowStar hollowStar");
}).on("swipeleft", "ul li", function (e) {
    $(this).off("click");
    $(this).css({
        transform: "translateX(-40px)"
    }).one("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function () {
        $(this).one("click swiperight", function () {
            $(this).css({
                transform: "translateX(0)"
            });
        });
    });
});

每当swipe被触发时，它也会触发click，因此，触发.off("click")时至关重要swipe。但是，一旦过渡结束，click侦听swiperight器就会附加到关闭/隐藏星号。

演示