企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站开发

Website development

网站在线报名开发多字段设计方法

发布时间:2019-03-28 12:07:23   作者:曹责

TAGS:网站定制开发

传统意义的在线反馈支持单字段输入方法,在网站开发过程中单字段操作简单易于字段维护,但是对于单字段多值的方法就需要用到域,需要建立一个附表用来存储相关数字,比如用户字段“参会代表”还有其他的内容比如:姓名、性别、电话、传真等其他的复选项。QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

在前端用户UI界面设计时候也需要考虑到用户操作的方便性,页面的承载能力,还有手机端的操作方式。QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

UI可以采用单字段垂直的交互方式进行设计,“参会代表”可以采用折叠的方式进行用户交互,在进行第一次信息输入的时候,用户点击添加通过JS样式输出展示出“参会代表”的其他的附带的信息;当用户输入第二个字段信息的时候,第一条信息自动收回,以此类推第三、第四、第五更多的细信息,每个字段JS提供“删除”功能保证信息可修改。用户界面设计如下QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

                                              clip_image001.pngQDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

前端代码实现如下:QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

 _this.parents("table:eq(0)").append(_replace(_data,_index)).children('tr:last').find('input:first').focus(); QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

 QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

var _tr = new Array(),
_key = 1,
_table = $("table");
_tr.push('<tr>');
_tr.push(' <td><input type="text" name="functionary[name][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><select name="functionary[gender][__KEY__]" class="form-control">');
_tr.push(' <option value="1">男</option>');
_tr.push(' <option value="2">女</option>');
_tr.push(' </select></td>');
_tr.push(' <td><input type="text" name="functionary[phone][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><input type="text" name="functionary[email][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><input type="text" name="functionary[address][__KEY__]" class="form-control" /></td>');
_tr.push(' <td><a href="javascript:;" target="remove">[删除]</a></td>');
_tr.push('</tr>');
$("a[target='added']").click(function(e){
e.preventDefault();
var _data = {};
_data["/__KEY__/g"] = ++_key;
_table.children('tbody').append(_replace(_data)).children('tr:last').find('input:first').focus();
});
_table.on('click',"a[target='remove']",function(e){
e.preventDefault();
$(this).parents("tr:eq(0)").remove();
});
function _replace(_data){
_trHtml = _tr.join('');
for(i in _data){
_trHtml = _trHtml.replace(eval(i),_data[i]);
}
return _trHtml;
}
QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司


QDZ北京网站开发,北京网站建设,网站设计,网站制作_云智互联网站开发公司

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7519,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。
嘿,我来帮您!