首页 > JS静态页面交互

JS静态页面交互

Hi,我是一个交互设计师,完全js小白,希望给位大神指点一下。这是一个静态的网页,用来做交互原型的,不需要和后台任何数据库交互。工作流是:
1. 这是一个填写旅客信息的模块:

2. 用户填写完旅客信息,滚动到选择保险模块

3. 当用户完成选择了任意一个保险计划的时候,上面一图中的旅客信息变成这个静态的显示:

4. 当用户点击edit之后,需要展开成1图中的表格,但是已经有之前填了的信息在里面了。

主要开发难点:
1. 如何选择了保险之后把之前填信息的表格变成静态的text显示
2. 点击text显示里面的edit之后需要能再次展开表格里面保有之前填过的信息。

本人代码白痴,跪求大神指点!!!


原型没必要用JS实现啊,直接用Axure之类的原型工具,就算数据不会随着表单里填的值变化也无所谓的


很简单,你每一块做两套,一套是带input的可编辑状态,一套是不可编辑文本状态,初始时编辑状态显示,不可编辑块隐藏,然后页面载入jquery,你绑定click事件到你想要做切换操作的元素上,一个show,一个hide就可以了。

ps,用啥augular.js 犯不着啊,只是一个原型而已

补充,没看到说信息还要带进来是吧,照样用jquery,切换的时候把信息抓过去就行了


https://angularjs.org/

浓浓的用AngularJS实现的气氛……


augular.js 上手难度挺大的。 还是用jquery比较实在。


这是一个相对复杂的单页应用。
题主如果要自己快速学习js来完成任务的话,建议学习jquery,可以参考《锋利的jquery》。细节实现有问题,google一般都有。

对于开发难点:
1. 通过jquery可以获得表单内元素的值,例如$('input').val(),获得值后,通过在页面上重新插入DOM元素($().append),把值在页面上显示
2. 同样,设置form内元素的值,可以使用$('input').val('your value')

如果题主想要提升自己的js水平,建议从原生js语法、DOM API等等开始学起。

至于angularjs,还是需要一定js经验的,不建议题主学习。

【热门文章】
【热门文章】