wuqingdeqing通过本文主要向大家介绍了前端,按钮等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
近期做可视化配置时，深感对用户而言，原先系统的配置流程太过复杂，初始可见的配置项过多，容易产生一种畏难的情绪。
为提高系统的易用性，故决定设置一个按钮，在用户进入此界面时只显示必要配置项，点击后展示高级配置。如此增加了配置功能的层次感，使用户不必花费更多的时间去关注一般情况下用不到的配置项，简化了配置图表的流程。以下简述实现方式。
按钮的话你可以通过项目的静态文件引入。我这边是依此网站直接引入，http://fontawesome.io/icons/。代码如下：
<button class="fold-data-button btn btn-default option-buffer">
<i class="fa fa-chevron-up" aria-hidden="true">更多配置</i>
<i class="fa fa-chevron-right" aria-hidden="true" style = "display: none;">收起更多</i>
</button>
button的class是原有系统有一些css的配置关联，你可以根据自己的样式引入。js函数如下：
<!--收起或打开图的非常用基本配置项-->
$(".fold-button").click(function() {
$(".more").slideToggle("normal");
$(".fa-chevron-right").toggle();
$(".fa-chevron-up").toggle();
});
在相应页面上加入上述代码，再将需要收起的div class里加入对应参数more，即可实现此功能。