精华内容
下载资源
问答
  • jquery表单步骤流程导航一步一步填写表单提交信息代码
  • 之前做出的步骤条是利用easyui +jquery实现的,但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效,所以换了一种方式,用Position。把元素脱离文档流移出视觉区域,添加该属性后既不会影响...

    之前做出的步骤条是利用easyui +jquery实现的,但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效,所以换了一种方式,用Position。把元素脱离文档流移出视觉区域,添加该属性后既不会影响布局,又能让元素保持可以操作。应用该属性后,主要就是通过控制方向(top,left,right,bottom),达到一定的值,离开当前可是页面。

    先看效果图:

    f41ccf47959a604b29d77f9840dd914967f.jpg

     

    代码展示:

    页面html:

    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    	<script type="text/javascript" src="js/jquery/jquery.js"> </script>
    	<script type="text/javascript" src="js/index.js"> </script>
    <body>
    	<!--  标题进度条 start-->
    	<div class="content" style="margin: 2% 30%;width: 100%;">
    		<div class="processBar">
    			<div id="line0" class="bar">
    				<div id="point0" class="c-step c-select"></div>
    			</div>
    			<div class="text" style="margin: 10px -25px;"><span class='poetry'>基本信息</span></div>
    		</div>
    		<div class="processBar">
    			<div id="line1" class="bar">
    				<div id="point1" class="c-step"></div>
    			</div>
    			<div class="text" style="margin: 10px -30px;"><span class='poetry'>教育背景</span></div>
    		</div>
    		<div class="processBar">
    			<div id="line2" class="bar">
    				<div id="point2" class="c-step"></div>
    			</div>
    			<div class="text" style="margin: 10px -30px;"><span class='poetry'>工作经历</span></div>
    		</div>
    		<div class="processBar">
    			<div id="line3" class="bar" style="width: 0;">
    				<div id="point3" class="c-step"></div>
    			</div>
    			<div class="text" style="margin: 10px -15px;"><span class='poetry'>社交</span></div>
    		</div>
    	</div>
    	<!--  标题进度条 end-->
    	<div style="clear: both;"></div>
    	<div id="MainContent" style="margin: 2% 30%;">
    		<div class="content" id="basicInfo">
    			<span class='poetry'>
    				这是基本信息板块
    			</span>
    		</div>
    		<div class="content" id="education">
    			<span class='poetry'>
    				这是教育背景板块<br/>
    			</span>
    		</div>
    		<div class="content" id="work">
    			<span class='poetry'>
    				这是工作经历板块<br/>
    			</span>
    			<span class='poetry'>工作地点</span>
    			<input type='text' id='name'/> <br/>
    			<span class='poetry'>工作内容</span>
    			<input type='text' id='age'/>
    		</div>
    		<div class="content" id="social">
    			<span class='poetry'>
    				这是社交板块
    			</span>
    		</div>
    	</div>
    	<div style="clear: both;"></div>
    	<div style="text-align: center;">
    			<button id="previous_step">上一步</button>
    			<button id="next_step">下一步</button>
    	</div>
    
    </body>
    </html>
    
    

    js代码展示:

    $(document).ready(function(){
    	$("#education").addClass('main-hide');
    	$("#work").addClass('main-hide');
    	$("#social").addClass('main-hide');
    	$('#previous_step').hide();
    	/*上一步*/
    	$('#previous_step').bind('click', function () {
    		index--;
    		ControlContent(index);
    	});
    	/*下一步*/
    	$('#next_step').bind('click', function () {
    		index++;
    		ControlContent(index);
    	});
    });
    var index=0;
    function ControlContent(index) {
        var stepContents = ["basicInfo","education","work","social"];
        var key;//数组中元素的索引值
        for (key in stepContents) {
            var stepContent = stepContents[key];//获得元素的值
            if (key == index) {
            	if(stepContent=='basicInfo'){
            		$('#previous_step').hide();
            	}else{
            		$('#previous_step').show();
            	}
            	if(stepContent=='social'){
            		$('#next_step').hide();
            	}else{
            		$('#next_step').show();
            	}
                $('#'+stepContent).removeClass('main-hide');
                $('#point'+key).addClass('c-select');
        		$('#line'+key).removeClass('b-select');
            }else {
                $('#'+stepContent).addClass('main-hide');
                if(key>index){
                	$('#point'+key).removeClass('c-select');
            		$('#line'+key).removeClass('b-select');
                }else if(key<index){
                	$('#point'+key).addClass('c-select');
            		$('#line'+key).addClass('b-select');
                }
            }
        }
    
    }

    css样式

       .processBar{
          float: left;
          width: 200px;
          margin-top: 15px;
        }
        .processBar .bar{
          background: rgb(230, 224, 236);
          height: 3px;
          position: relative;
          width: 185px;
          margin-left: 10px;  
        }
        .processBar .b-select{
          background: rgb(96, 72, 124);
        }
        .processBar .bar .c-step{
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgb(230, 224, 236);
          left: -12px;
          top: 50%;
          margin-top: -4px;
        }
        .processBar .bar .c-select{
          width: 10px;
          height: 10px;
          margin: -5px -1px;
          background:rgb(96, 72, 124);
    
        }
        .main-hide {
          position: absolute;
          top: -9999px;
          left: -9999px;
        }
        .poetry{
        	color: rgb(96, 72, 124); 
        	font-family: KaiTi_GB2312, KaiTi, STKaiti; 
        	font-size: 16px; 
        	background-color: transparent; 
        	font-weight: bold; 
        	font-style: normal; 
        	text-decoration: none;
        }
        button{
        	width: 80px;
    	    line-height: 30px;	    
    	    font-size: 11px;
    	    color: rgb(116, 42, 149);
    	    text-align: center;
    	    border-radius: 6px;
    	    border: 1px solid #e2e2e2;	    
    	    cursor: pointer;
    	    background-color: #fff;
    	    outline:none;
        }
        button:hover{
          border: 1px solid rgb(179, 161, 200);
        }
     

     

    转载于:https://my.oschina.net/u/3902753/blog/1921233

    展开全文
  • vue步骤型表单缓存上一步页面

    千次阅读 2019-03-29 14:44:24
    在移动端开始时,在步骤型表单时比如A->B->C,我们经常需要缓存上一步的页面级数据。本文介绍通过路由元信息以及vue的keep-alive来实现。 { name: 'cwkjzdbgs_step1', //财务会计制度及核算软件备案报告书 ...

    在移动端开始时,在步骤型表单时比如A->B->C,我们经常需要缓存上一步的页面级数据。本文介绍通过路由元信息以及vue的keep-alive来实现。

    {
          name: 'cwkjzdbgs_step1', //财务会计制度及核算软件备案报告书
          path: '/cwkjzdbgs_step1',
          component: resolve => require(['../views/cwkjzdbgs/cwkjzdbgs_step1.vue'], resolve),
          meta: {
            keepAlive: true //配置路由元信息
    
          }
        }

    在App.vue中我们需要根据路由元信息来决定是否缓存组件

    <template>
      <div id="app">
        <!--  <view-box ref="viewBox"> -->
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>

    配置了keepAlive的路由vue会缓存该页面。但是,我们重新一次进入表单时,而不是上一步返回。此时我们需要重新加载数据。

     beforeRouteEnter(to, from, next) { //路由导航钩子,通过页面路由标记是否需要清空页面数据重新加载
        to.meta['fromPath'] = from.path;
        if (from.path == '/index/ywbl' || from.path == '/index') {
          to.meta['needFresh'] = true;
        } else {
          to.meta['needFresh'] = false;
        }
        next();
      },
      activated() { //此方法在页面缓存时会被调用,根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
        if (this.$route.meta['needFresh']) {
          this.init();
        } 
      }

    当然了还有其他方式,比如说我们可以把填写了的数据放入到vuex中管理。然后到页面的时候再实现赋值等方法。

    展开全文
  • 步骤五:选择 安装我手动从列表选择的硬件,然后点击下一步 步骤六:默认 显示所有设备,点击下一步 步骤七:进入以下界面后等待检测所有设备 步骤八:设备自动检测完成后会显示设备列表 步骤九:左侧厂商选中 ...
  • Vue中封装自定义步骤条 实现上下一步 效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了; 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条组件; 设计原理:当...

    Vue中封装自定义步骤条 实现上下一步

    效果图:

    如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了;

    这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条组件;

    设计原理:当点击下一步的,获取步骤的index, 通过绑定的class 给经过的步骤添加样式;

    :class="index <= stepsIndex ? 'on' : ''"

    定义步骤条的条数,数组定义在父组件,通过this.$parent 获取父组件的数组;

    步骤条组件中只封装了步骤条的样式和dom,数据和方法均在父组件定义;

    stepsData:[
          {name:'第一步'},
          {name:'第二步'},
          {name:'第三步'},
          {name:'第四步'}
    ]

    循环渲染出步骤条

    <div class="steps-box">
            <div
                    v-for="(item, index) in stepsData"
                    class="steps-card"
                    :class="index <= stepsIndex ? 'on' : ''"
                    :key="index">
                <span>{{ index + 1 }}</span>
                <span>{{ item.name }}</span>
            </div>
        </div>

    以上是封装步骤条组件的代码;

    如下是父组件引用步骤条组件和上下一步的方法!

     import steps from "../components/steps.vue";
        components:{
                steps
        }

    引用

    <!--步骤条-->
            <steps ref="stepsChild"></steps>

    父组件定义的上下一步方法

     //下一步
                prevSteps(){
                    this.stepsIndex --
                    this.$refs.stepsChild.stepsFun()
                },
                nextSteps(){
                    this.stepsIndex ++
                   this.$refs.stepsChild.stepsFun()
                }

    ===========================================================================

    完整代码

    步骤条组件

    <template>
        <div class="steps-box">
            <div
                    v-for="(item, index) in stepsData"
                    class="steps-card"
                    :class="index <= stepsIndex ? 'on' : ''"
                    :key="index">
                <span>{{ index + 1 }}</span>
                <span>{{ item.name }}</span>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "steps",
            data: function () {
                return {
                    stepsIndex: "",
                    stepsData: [],
                };
            },
            created() {
                this.stepsIndex = this.$parent.stepsIndex;
                this.stepsData = this.$parent.stepsData;
            },
            methods: {
                //下一步
                stepsFun() {
                    this.stepsIndex = this.$parent.stepsIndex;
                },
            },
        };
    </script>
    
    <style lang="scss" scoped>
        /*    steps-box*/
        .steps-box {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
            margin-top: 200px;
            .steps-card {
                width: 300px;
                cursor: pointer;
                display: flex;
                align-items: center;
                color: rgba(0, 0, 0, 0.25);
                position: relative;
                span:nth-of-type(1) {
                    display: inline-block;
                    width: 26px;
                    height: 26px;
                    text-align: center;
                    line-height: 26px;
                    border: 1px solid rgba(0, 0, 0, 0.15);
                    border-radius: 50%;
                    margin-right: 10px;
    
                    i {
                        font-style: normal;
                    }
                }
            }
            .steps-card:before {
                width: 194px;
                height: 1px;
                content: "";
                background: #e9e9e9;
                margin: 0 15px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
            }
            .steps-card:last-of-type {
                width: auto;
            }
            .steps-card:last-of-type:before {
                width: 0;
            }
            .steps-card.on {
                display: flex;
                align-items: center;
                color: rgba(0, 0, 0, 0.85);
    
                span:nth-of-type(1) {
                    display: inline-block;
                    width: 26px;
                    height: 26px;
                    text-align: center;
                    line-height: 26px;
                    background: #1d73f6;
                    border: 1px solid #1d73f6;
                    color: #fff;
                    border-radius: 50%;
                    margin-right: 10px;
                }
            }
            .steps-card.on:before {
                background: #1d73f6;
            }
        }
    </style>
    

    父组件

    <template>
        <div class="addTask">
            <!--步骤条-->
            <steps ref="stepsChild"></steps>
            <!--内容区域-->
            <div class="task-main-box">
                <div v-if="stepsIndex == 0" class="task-con-box"><h1>第一步</h1></div>
                <div v-if="stepsIndex == 1" class="task-con-box"><h1>第二步</h1></div>
                <div v-if="stepsIndex == 2" class="task-con-box"><h1>第三步</h1></div>
                <div v-if="stepsIndex == 3" class="task-con-box"><h1>第四步</h1></div>
    
    
            </div>
            <!--操作按钮-->
            <div class="button-box">
                <div v-if="stepsIndex == 0">取消</div>
                <div v-if="stepsIndex == 3">完成</div>
                <div @click="prevSteps" v-if="stepsIndex != 0">上一步</div>
                <div @click="nextSteps" v-if="stepsIndex != 3">下一步</div>
            </div>
        </div>
    </template>
    
    <script>
        import steps from "../components/steps.vue";
    
        export default {
            name: "addTask",
            data() {
                return {
                    //新建任务
                    stepsIndex:0,
                    stepsData:[
                        {name:'第一步'},
                        {name:'第二步'},
                        {name:'第三步'},
                        {name:'第四步'}
                    ]
                };
            },
            methods: {
                //返回数据采集页面
                goback() {
                    this.$parent.addTask = false;
                },
                //下一步
                prevSteps(){
                    this.stepsIndex --
                    this.$refs.stepsChild.stepsFun()
                },
                nextSteps(){
                    this.stepsIndex ++
                   this.$refs.stepsChild.stepsFun()
                }
            },
            components:{
                steps
            }
        };
    </script>
    
    <style lang="scss" scoped>
    .addTask{
        width: 100%;
        height: 100%;
        overflow: hidden;
        .task-main-box{
            width: 100%;
            height:calc(100% - 45vh);
            .task-con-box{
                width: 100%;
                height:100%;
    
            }
        }
        .button-box{
            display: flex;
            justify-content: center;
            div{
                padding: 10px;
                background: #2F86FF;
                margin: 10px;
                border-radius:4px;
                cursor:pointer;
                color:#ffffff;
            }
        }
    
    }
    
    
    
    </style>
    

    END!

    Vue笔记:以上方法仅供参考!感谢阅读,欢迎点赞!

     

     

     

    展开全文
  • ElementUI el-step步骤条实现上一步功能

    千次阅读 2020-06-05 16:24:31
    active:设置当前激活步骤 @click.native:绑定步骤条的点击事件 <template> <div id="Design"> <el-steps :active="active" align-center finish-status="success" process-status="wait...
    • active:设置当前激活步骤

    • @click.native:绑定步骤条的点击事件 

    <template>
        <div id="Design">
            <el-steps :active="active" align-center finish-status="success" process-status="wait" class="m-b-10">
                <el-step v-for="(item,index) in titleList" :title="item.title" :key="index" @click.native="stepChange(index+1)"></el-step>
            </el-steps>
            </el-row> 
                <el-col :span="12" :offset="6" v-if="active==1">
                    步骤条1
                </el-col>
                <el-col :span="12" :offset="6" v-if="active==2">
                    步骤条2
                </el-col>
                <el-col :span="12" :offset="6" v-if="active==3">
                    步骤条3
                </el-col>
                <el-col :span="12" :offset="6" v-if="active==4">
                    步骤条4
                </el-col>
            </el-row>   
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return{
                active: 1,
                titleList:[{
                    title:'设计方案1',
                },{
                    title:'设计方案2',
                },{
                    title:'设计方案3',
                },{
                    title:'设计方案4',
                },]
            }
        },
        methods: {
            // 步骤条上一步
            stepChange(current){
                if(current<this.active){
                    this.active=current
                }
            },
        }    
    }
    </script>

    回撤到上一步效果 

    element el-steps步骤条踩坑与点击事件(一) 

    展开全文
  • 最近做项目需要用到步骤条,看了很多不是自己想要的,就借鉴了一下别人的,然后自己总结了一下,感觉可以用到很多项目上使用了。下面是同种风格的步骤条,两种变色方案: 1.先引入jquery的js 一般项目都要的 2....
  • ArcGIS安装步骤

    2009-04-25 22:32:40
    ArcGIS安装步骤,ArcGIS9.1的具体安装步骤 帮助您一步一步安装到位
  • Flutter Stepper 步骤

    千次阅读 2019-07-03 09:30:46
    步骤组件是用来约束用户操作的,第一步完成后才能进入下一步。所有步骤都完成,才可进行提交操作。 参数详解 属性 说明 steps 步骤内容集合 physics 步骤跳转动画 type StepperType....
  • jQuery响应式多步骤演示代码是一款基于jQuery+Bootstrap框架制作的简易步骤条上一步一步完成步骤按钮。
  • 请严格按照下列顺序操作,如果有哪一步没有成功,多试几次,确定成功了以后再继续下一步 步骤一:安装wine sudo apt install wine 安装时一定要保证网络良好,安装过程大约1-2min 安装完毕以后查看版本号 wine -...
  • CentOS7.4安装 先来一张linux的一些编辑保存的命令,后面要用到 vi命令进入文件内容后按 i 键进入编辑模式,此时你就可以去修改内容了,(只使用vi命令只能看到文件...3、点选稍后安装操作系统(S),并点击“下一步...
  • Linux安装jdk详细步骤

    万次阅读 多人点赞 2019-03-20 11:13:50
    下面小编给大家分享关于Linux安装jdk的详细步骤: 一、登录虚拟机进入终端切换到root用户,输入:su 接着输入密码 再输入:cd … 回到root用户 二、查看Linux系统是否有自带的jdk: 1、输入:java -version 2、发现...
  • 虚拟机的安装步骤

    千次阅读 2018-01-15 11:43:36
    步骤1、下载好vmware和iso镜像后安装vmware。(中文版) 步骤2、打开vmware,点击创建新的虚拟机。 ... 步骤3、选择典型,...步骤6、这一步你可以随心所欲的给虚拟机起名,以及将它放到你指定的位置,点击下一步
  • SPSS 24安装教程详细步骤

    万次阅读 多人点赞 2018-01-14 14:57:04
    SPSS为IBM公司推出的一系列用于统计学...下面是安装的具体步骤。 第1步:下载安装包 链接:https://pan.baidu.com/s/1dHdEVh3 密码:6yl0 解压后打开.exe文件进行安装。 第2步:准备安装程序 第3步:点击下一步
  • Kali 安装详细步骤

    万次阅读 多人点赞 2017-05-11 12:47:15
    文章目录 实验环境 准备工作 步骤说明 安装虚拟机 安装 Kali 安装增强工具 安装中文输入法 更新升级 实验环境 Windows:Windows 10 企业版 VMware:VMware Workstation 12 Pro Kali:kali-linux-2016.2-amd64 软件...
  • Kali linux安装步骤,史上最详细的步骤,傻瓜式教学

    万次阅读 多人点赞 2020-05-13 10:27:45
    Kali linux安装步骤 Kali linux安装步骤 一、 虚拟机安装 下载镜像文件https://www.kali.org/downloads/ 可以选择自己的版本,这里选择的是64位 1、 点击文件—创建新的虚拟机—选择典型—稍后安装系统—liunx—...
  • 克里金插值步骤

    万次阅读 2020-03-18 21:51:29
    由于每种方法步骤均为加载数据源和属性字段,设置对应的方法参数,通过执行下一步,最终生成所需插值结果,因此,本文以普通克里金的预测表面为例进行演示,其他方法以此为参考。 步骤一:打开地统计...
  • node.js 安装详细步骤教程

    万次阅读 多人点赞 2019-01-08 22:43:01
    本机环境:Windows 10 专业版 x64   1、下载安装包 ...打开安装,傻瓜式下一步即可:       选择安装位置,我这里装在D盘下:           安装成功,文件夹结构...
  • linux系统安装步骤

    万次阅读 2021-08-02 20:56:12
    本文章步骤比较多,都是一步步操作的指导,适用于系统小白 PS:本文是针对虚拟机中虚拟主机安装contos6.9系统为例,其他版本安装可能略有差距。 第一步:开启新建虚拟机,进行linux系统安装第二步:默认选择第一个...
  • ANSYS18.0安装步骤

    万次阅读 2018-10-29 22:59:55
    安装步骤: 安装前先关闭杀毒软件和360卫士,注意安装路径不能有中文(安装包存放的路径也不要有中文)。 1.解压安装包。 2.打开Disk 1文件夹。 3.以管理员身份运行安装程序。 4.点击安装ANSYS Products。 5....
  • sass安装步骤

    千次阅读 2020-09-02 21:58:45
    sass安装步骤 1.首先在https://nodejs.org/zh-cn/下载Nods.js 2.安装Nods.js 2.1 双击安装包选择acept the agrement,点击next 2.2 直接点击下一步next,不用修改其他的设置 2.3直接点击下一步next,不用修改其他的...
  • jQuery步骤进度条控制代码,可进行上一步、下一步、跳过步骤操作。
  • 需求:最近在做应急预案的vue页面,需要有上一步、下一步等功能 题外话:感觉使用vue+Element-ui来做,真的是方便很多很多,思路清晰,代码简洁。 如果是按照以前的写法,肯定是要多个上一步、下一步按钮,并且...
  • SQL Server2012安装步骤

    万次阅读 多人点赞 2019-02-17 14:53:31
    SQL Server2012安装步骤 第一步:加压sqlserver2012安装包,运行安装程序。 在我们安装SQL Server之前需要先检查下电脑配置。请点击**“系统配置检查器”**进行检查 第二步:点击安装按钮,系统自动检测安装环境...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 645,731
精华内容 258,292
关键字:

一步的步骤