jQuery Mobile 列表视图滑动菜单

Question

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

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

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

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

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

Answer 1

创建

span

元素，其中将包含star。在每个

li

元素之前添加 span。

<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

侦听器就会附加到关闭/隐藏星号。

演示