jQuery wizard,一款创建步骤向导的插件-阿里云开发者社区

开发者社区> 沉默王二> 正文

jQuery wizard,一款创建步骤向导的插件

简介: jQuery wizard,一款创建步骤向导的插件
+关注继续查看

这篇文章完全没有技术难度,但我为什么要写呢?因为我想把这么好的一款插件推荐给需要的小伙伴。因为在我遇到这款插件之前,一直没有找到合适的(step-by-step wizards)创建步骤向导的插件。


###一、下载和效果图

git的下载地址https://github.com/amazingSurge/jquery-wizard

image.png



我觉得效果还挺不错,不过原生的wizard并没有这么好看,需要加工一点css样式。

/* 步骤 */
.wizard-steps {
    display: table;
    width: 100%;
}

.wizard-steps > li.current, .wizard-steps > li.done {
    background: #41b3f9;
    color: #ffffff;
}
.wizard-steps > li.done {
    background: #7ace4c;
}
.wizard-steps > li {
    display: table-cell;
    padding: 10px 20px;
    background: #f7fafc;
}
.wizard-steps > li.current h4, .wizard-steps > li.done h4 {
    color: #ffffff;
}
.wizard-steps > li.current span, .wizard-steps > li.done span {
    border-color: #ffffff;
    color: #ffffff;
}
.wizard-steps > li span {
    border-radius: 100%;
    border: 1px solid rgba(120, 130, 140, 0.13);
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    padding-top: 9px;
    margin-right: 8px;
    text-align: center;
}
.wizard-content {
    padding: 25px;
    border-color: rgba(120, 130, 140, 0.13);
    margin-bottom: 30px;
}


###二、应用实例

####1.引入js和css


<link type="text/css" rel="stylesheet" href="${ctx}/components/wizard/css/wizard.css" />

<script type="text/javascript" src="${ctx}/components/wizard/dist/jquery-wizard.js"></script>


####2.页面布局


<div class="wizard" id="service_market_step">
    <ul class="wizard-steps" role="tablist">
  <li class="active" role="tab">
    <h4>
    <span>1</span>
    步骤
    </h4>
  </li>
  <li role="tab">
    <h4>
    <span>2</span>
    步骤
    </h4>
  </li>
  <li role="tab">
    <h4>
    <span>3</span>
    步骤
    </h4>
  </li>
    </ul>
    <div class="wizard-content">
  <div class="wizard-pane active" role="tabpanel">
    
  </div>
  <div class="wizard-pane" role="tabpanel">
    
  </div>
  <div class="wizard-pane" role="tabpanel">
  </div>
    </div>
</div>


####3.初始化


$("#service_market_step").wizard({
    templates : {
  buttons : function buttons() {// 去掉前后的button
    return '';
  }
    },
});


别的我就不多说了,想用的更高深一点就去钻一钻。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
01_spring_ 简介| 学习笔记
快速学习01_spring_ 简介
9 0
Django框架介绍与安装
软件框架就是为实现或完成某种软件开发时,提供了一些基础的软件产品, 框架的功能类似于基础设施,提供并实现最为基础的软件架构和体系 通常情况下我们依据框架来实现更为复杂的业务程序开发 二个字,框架就是程序的骨架
4 0
SpringBoot 集成ElasticSearch的几种方式
SpringBoot 集成ElasticSearch的几种方式
9 0
学习vue3之路day2
学习vue3之路day2
5 0
想查看微信好友撤回的消息?Python帮你搞定
想查看微信好友撤回的消息?Python帮你搞定
10 0
让sentinel-dashboard的流控配置持久化到nacos
让sentinel-dashboard的流控配置持久化到nacos
6 0
《冬季实战营第一期:从零到一上手玩转云服务器》实践报告
在大数据时代,制作个人网站,学会ECS云服务器是必要之选。 本文主要说明第一期冬季实战营ECS云服务器实践目的,实践步骤以及实践成果。完成门户网站的搭建,可以根据公司的需求自定义门户网站的内容。
10 0
节点表结构 | 学习笔记
快速学习节点表结构。
6 0
学习vue3之路day3
学习vue3之路day3
5 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载