Question

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

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

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

2）显示一个'空心'星形图标，点击该图标会在locastorage中创建一个值，图标将替换为“填充”的星形图标。同样，如果第二次按下星形，则会删除localstorage值，图标将恢复为“空心”星形

我确定我已经在其他地方看到了类似主题的信息，但今天似乎无法找到它。所以任何指针，提示，链接都将非常感激。

感谢。

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>

为已填充和空心明星应用以下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

JQuery Mobile Listview刷卡菜单

1 个答案: