JQuery 移动列表视图滑动菜单

JQuery Mobile Listview Swipe Menu

本文关键字：菜单 视图 移动 列表 JQuery      更新时间：2023-09-26

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

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

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

2）显示一个"空心"星形图标，单击该图标时会在locastorage中创建一个值，并且该图标将替换为"填充"星星。同样，如果再次按下星号，则会删除本地存储值，图标将恢复为"空心"星形

。

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

谢谢。

创建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，因此，当swipe触发时，.off("click")是必不可少的。但是，一旦过渡结束，click和swiperight侦听器将附加到关闭/隐藏星形。

演示

相关文章：