JQuery Mobile Listview 滑动菜单

Question

我有一个带有自动生成分隔符的 ListView 的标准 JQM 页面。

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

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

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

我确定我在其他地方看到过类似主题的信息，但今天似乎找不到。因此，任何指针、提示、链接将不胜感激。

谢谢。

Answer 1

创建将包含 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>

为 filled 和 hollow 星星应用以下 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 侦听器将附加到关闭/隐藏星号。

Demo