淘汰jquerymobile可折叠面板与编辑和取消/保存

时间:2013-06-11 14:55:01

标签: jquery jquery-mobile knockout.js knockout-2.0 knockout-mapping-plugin

我遇到了一些针对可折叠面板(针对移动设备)的敲除绑定的问题,我希望有人可以提供帮助。

这就是我想要完成的事情:

我有一个包含摘要的表单,以及动态创建的面板。在这些面板上,标题绑定到分支名称。内容包含摘要信息。

在每个[分支名称]标题中,我想添加一个“编辑”按钮(在右侧),点击后,a)用“保存”和“取消”按钮替换自己b)隐藏其余部分中的所有其他“编辑”按钮。当调用“保存”或“取消”操作时,“所有编辑”按钮再次可见。

在编辑模式下,我希望用输入字段替换标签

当然我假设所有这些都需要自定义[ko]绑定 - 但我似乎无法弄明白。

提前致谢!

<div data-role="collapsible" data-collapsed="false" data-mini="true" data-theme="a" data-inset="false" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-enhance="true">

    [这是我喜欢EDIT,SAVE和CANCEL按钮的地方]

以下是jsFiddle的评论示例:http://jsfiddle.net/sal_andani/pvsky/4/

1 个答案:

答案 0 :(得分:0)

一些入门提示,请尝试将data-inline="true"添加到按钮。您可能需要将输入更改为标签。然后编辑css的大小,位置,标签等。

然后在javascript中使用一些jQuery .css()来隐藏/显示推送时的相应按钮。

最初使用标签可能会丢弃,并从禁用的输入开始。再次使用.css()在您的javascript函数上添加/删除已禁用的属性以进行编辑/保存/取消。