这种表单切换效果如何实现?

游龙翔隼
  • 1.3k

做一个可编辑的表单的域(不一定是表单),点击右上角编辑后,下面的控件变为可编辑状态,入图1变为图2状态
记得很多网站的个人设置里面都有这种,但是现在没有思路,望大佬们给个思路或者demo
另外,是否开启的switch,bootstrap3里有轮子么?

图1.
clipboard.png

图2.

clipboard.png

回复
阅读 2.2k
4 个回答

可以提供下思路。我觉得可以这样。

 <span>09:30</span><input type='text' />

没点编辑的时候,默认全用span显示,input默认隐藏;
点编辑之后,span隐藏,显示input。 编辑完成,替换同级span的值,隐藏input显示span。
用vue.js就可以,绑定class类,绑定input值,更简单。 好多方法。

原理就是一个div里面包含了显示的span和隐藏的input,input的val和span的文本一样,点击后span隐藏,input显示,就这样,操作时两个的值隐藏和显示时隐藏那个把值赋给显示那个就行了

1、用tpl可以写两套模板,展示模板,编辑模板,总之设置数据是要加载时请求的,编辑数据保存后也要传给后端,这样比较清晰,两个流程独立互补影响。布局没什么说的,前端基础,主要是你这个时间这里要做成输入的还是插件式的滚动选中,涉及时间插件
2、直接写个编辑的布局

<div class="tips-box">
    <p>
    <span>提示闹钟设置</span>
    <span class="edit-icon js-edite"></span>
    </p>
    <lable>是否开启</lable><input type="hidden" name="" value="1是0否">//css+js写个切换按钮控制隐藏域值1||0
    <lable>短信提醒时段</lable><input type="text" name="start-time"> - <input type="text" name="end-time">//
    <lable>涨幅提醒金额</lable><input type="text" name="up-money">
    <lable>涨幅提醒金额</lable><input type="text" name="low-money">
</div>

编辑的时候就是这样,正常的input标签,当点击js-edite和编辑之后的保存按钮时我们可以给所有input加上或者去掉disabled来控制input的是否可编辑,tips-box上加上或者去掉一个class来控制这些input的样式,基本就是加上去掉border,width,height这些简单

是否开启的switch按钮可以用css+js写一个很简单,原理就是控制按钮样式下面的input隐藏域值的变化
我写过的一个demo由于是嵌在摸个模块里的就拿出一大题的代码看看吧
<span class="js-show" data-show="0"><i class="pintr-point"></i></span>

$(".js-show").on("click",function(){
    var that = this;
    if($(that).data("show") == 0){           //left值按照你的实际自己算就是小圆点的移动值
        $(that).find(".pintr-point").animate({left:"24px"},300,function(){
            $(that).data("show","1");
            $("input[type=hidden]").val("1")
        });
    }else{
        $(that).find(".pintr-point").animate({left:"2px"},300,function(){
            $(that).data("show","0");
            $("input[type=hidden]").val("0")
        });
    }
})

clipboard.png

其实你的所有选项都可以用input标签,只需要加一个disabled,当你点击编辑的时候取消这个属性,重置的时候可以ajax提交数据,并且把返回值赋值以后在添加上disabled属性就可以了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏