Javascript JQuery移动列表视图滑动菜单

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

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

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

2） 显示一个“空心”星形图标，单击该图标可在locastorage中创建一个值，该图标将替换为一个“填充”星形。同样，如果再次按下星号，localstorage值将被删除，图标将恢复为“空心”星号

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

谢谢

---

创建包含星号的

span

元素。在每个

li

元素之前添加跨距

项目1
项目2
项目3
项目4
项目5

对填充星和空心星应用以下CSS

.ui listview>.ui li static{
溢出：初始；/*以隐藏下面的跨距*/
-webkit转换：-webkit转换300毫秒轻松；/*转换效果*/
-moz转换：-moz转换300毫秒易用性；
-o型转换：-o型转换300毫秒易用性；
转换：300毫秒转换轻松；
}
ul跨度{
浮动：对；
填充：1.3em20px；
z指数：-1；
}
黄星{
背景图片：url（filled.png）；
背景重复：无重复；
背景位置：中心；
}
霍洛斯塔{
背景图片：url（hollow.jpg）；
背景重复：无重复；
背景位置：中心；
}

然后连接

swipeleft

以显示星形

$（文档）。在（“单击”，“ul span”，函数（）{
$（此）.toggleClass（“yellowStar hollowStar”）；
}).on（“swipeleft”、“ul-li”，功能（e）{
$（此）.off（“单击”）；
$（this.css）({
转换：“translateX（-40px）”
}).one（“transitionend WebKittTransitionEnd oTransitionEnd oTransitionEnd oTransitionEnd MSTransitionEnd”，函数（）{
$（此）.one（“单击swiperight”，函数（）{
$（this.css）({
转换：“translateX（0）”
});
});
});
});

每当触发

滑动

时，它也会触发

单击

，因此当触发

滑动

时，

关闭（“单击”）

是必不可少的。但是，一旦转换结束，

单击

和

swiperight

侦听器将附加到关闭/隐藏星形

---

创建包含星号的

span

元素。在每个

li

元素之前添加跨距

项目1
项目2
项目3
项目4
项目5

对填充星和空心星应用以下CSS

.ui listview>.ui li static{
溢出：初始；/*以隐藏下面的跨距*/
-webkit转换：-webkit转换300毫秒轻松；/*转换效果*/
-moz转换：-moz转换300毫秒易用性；
-o型转换：-o型转换300毫秒易用性；
转换：300毫秒转换轻松；
}
ul跨度{
浮动：对；
填充：1.3em20px；
z指数：-1；
}
黄星{
背景图片：url（filled.png）；
背景重复：无重复；
背景位置：中心；
}
霍洛斯塔{
背景图片：url（hollow.jpg）；
背景重复：无重复；
背景位置：中心；
}

然后连接

swipeleft

以显示星形

$（文档）。在（“单击”，“ul span”，函数（）{
$（此）.toggleClass（“yellowStar hollowStar”）；
}).on（“swipeleft”、“ul-li”，功能（e）{
$（此）.off（“单击”）；
$（this.css）({
转换：“translateX（-40px）”
}).one（“transitionend WebKittTransitionEnd oTransitionEnd oTransitionEnd oTransitionEnd MSTransitionEnd”，函数（）{
$（此）.one（“单击swiperight”，函数（）{
$（this.css）({
转换：“translateX（0）”
});
});
});
});

每当触发

滑动

时，它也会触发

单击

，因此当触发

滑动

时，

关闭（“单击”）

是必不可少的。但是，一旦转换结束，

单击

和

swiperight

侦听器将附加到关闭/隐藏星形

---

类似的东西？是的，但是我刚刚从你的代码笔中添加了css和js，它对我不起作用。我无法让滑动动作工作，FireBug控制台中没有显示任何错误。我不明白为什么，虽然我希望我错过了一些非常简单的东西。你的listview

inset

是不是？我使用Adobe的括号编辑器，它在自己的钩子中添加了一个实时预览模式。让我编译一下这个应用程序，看看它在没有括号的情况下运行时是否正常。这个演示不是100%正常的，它只是一个实验。我现在正在做类似的事情？是的，但是我刚刚从你的代码笔中添加了css和js，它对我不起作用。我无法让滑动动作工作，FireBug控制台中没有显示任何错误。我不明白为什么，虽然我希望我错过了一些非常简单的东西。你的listview

inset

是不是？我使用Adobe的括号编辑器，它在自己的钩子中添加了一个实时预览模式。让我编译一下这个应用程序，看看它在没有括号的情况下运行时是否正常。这个演示不是100%正常的，它只是一个实验。我现在正在研究。目前我有几个问题：1）我的星星是可见的，但只有在我向左滑动以正式显示它们时才可以点击。首先，它们显然需要隐藏起来。2） 在允许我通过滑动打开任何其他列表项之前，有必要从“li”中删除焦点。所以