【jQuery-step】【詳解】

阿新 • • 發佈：2019-01-13

HTML程式碼

<link href="/css/jQuery.step.css">// 注意匯入css檔案 
<script src="/js/jquery.steps.js"></script>// 匯入前確保jQuery已經集成了，如沒有，就在這個js檔案前匯入jQuery
<body class="gray-bg">
<style>
    body {
        background-color: white !important;
    }

    input {
        display: inline !important 
;
        position: relative !important;
        margin-top: 0 !important;

    }

    .content {
        height: 220px !important;
    }

    span {
        display: block;
    }
</style>
<div class="wrapper wrapper-content animated fadeInRight">
    <div style="text-align: center">
        <h3 
>歡迎登入xxx系統！</h3>
        <p>輕鬆四步，完成商戶初始化設定</p>
    </div>
    <form id="xlfrom">
        <div id="example-vertical">

            <h3>商戶定位</h3>
            <section class="radio">
                <h3>第一步：請選擇與您最接近的商戶型別</h3>
                <div 
 style="display: inline-block;margin-left: 20px;width: 40%">
                    <input id="typeOne" type="radio" name="merchantType" value="0" checked="checked">
                    <label for="typeOne">美容快修保養</label>
                    <div>
                        <input id="typeThree" type="radio" name="merchantType" value="2">
                        <label for="typeThree">綜合維修廠（含美容）</label>
                    </div>
                </div>
                <div style="display: inline-block;margin-left: 25px;width: 40%">

                    <input id="typeTwo" type="radio" name="merchantType" value="1">
                    <label for="typeTwo">專業維修廠</label>
                    <div>
                        <input id="typeFour" type="radio" name="merchantType" value="3">
                        <label for="typeFour">車行（含售後）</label>
                    </div>
                </div>
            </section>
            <h3>建立施工設定</h3>
            <section>
                <h3>第二步，系統將為您建立施工設定（包括工區，工位型別及常用車型）</h3>
                <img src="">
                <span>建立中...</span>
            </section>
            <h3>建立施工類別</h3>
            <section>
                <h3>第三步，系統將為您建立預設施工類別</h3>
                <img src="">
                <span>建立中...</span>
            </section>
            <h3>會員等級</h3>
            <section>
                <h3>第四步，請根據實際情況自定義會員等級標準</h3>

            </section>
        </div>
    </form>
</div>
</body>

js程式碼

    let currentStepxl = 0;
    (function onInitxl() {// 獲取步數
        // $('.steps').css('display','none');// 釋放這個註釋可以隱藏步數的導航欄
        $('.actions li.disabled').css('display', 'none');// 將上一步按鈕隱藏
        $.ajax({
            type: 'post',
            url: '${ctx}/merchant/initGuide/getInitStatus',
            success: function (data) {
                //成功
                if (data.statusCode == 200) {
                    if (data.attach.initStatus) {
                        //引導頁完成
                    } else {
                        currentStepxl = data.attach.currentStep;//步數

                    }

                }
            }
        });
    })();
    console.log(currentStepxl);
// 註冊引導頁
 $("#example-vertical").steps({
        headerTag: "h3", // 指定頭部對應什麼HTML標籤
        bodyTag: "section", // 指定步驟內容對應的HTML標籤
//        contentContainerTag:"div", // 指定包裝所有內容的HTML標籤
//        actionContainerTag:"div", // 指定包裝分頁導航的HTML標籤
//        stepsContainerTag:"div", // 指定包裝步驟內容的HTML標籤
        stepsOrientation: 0, // 指定步驟為水平--vertical（垂直） horizontal（水平）
        transitionEffect: "slideLeft", // 步驟切換動畫
//        autoFocus: true, // 將焦點設定為第一個嚮導例項，以便從一開始就啟用關鍵導航 if true  優先順序在startIndex之下
        forceMoveForward: true, // 防止跳轉到下一步
        preloadContent: true,
        startIndex: currentStepxl, // 通過修改這個值來改變當前步數指向，即通過索引值確定嚮導載入後開始步驟是哪一步
        labels: {
            finish: "完成", // 修改按鈕得文字
            next: "下一步", // 下一步按鈕的文字
            previous: "上一步", // 上一步按鈕的文字
            loading: "Loading ..."
        },
        onStepChanging: function (event, currentIndex, newIndex) {// 下一步切換時的監聽
            var result = false;
            if (currentIndex = 1) {//第二步操作
                $.ajax({
                    type : 'POST',
                    url : '${ctx}/merchant/workArea/defaultWorkArea',
                    success : function(data) {
                        //成功
                        if (data.statusCode == 200) {
                            result = true;
                        }
                    }
                });
            }

            return result;
        },
//        onStepChanged: function (event, currentIndex, priorIndex) {// 下一步切換完成得監聽
//
//        },
//        onCanceled: function (event) {// 取消按鈕得監聽
//
//        },
        onFinishing: function (event, currentIndex) {// 完成時得監聽
            // form.validate().settings.ignore = ":disabled";

            return true;
        },
        onFinished: function (event, currentIndex) {// 完成後的監聽
//            parent.Index.judgeUserBinding();
//            parent.addcustomer();// 開啟新增會員等級頁面
            parent.layer.closeAll();

        }
    });

【JavaScript中的this詳解】

定律 htm uid js代碼 tdd ati tom dmr doctype 前言 this用法說難不難，有時候函數調用時，往往會搞不清楚this指向誰？那麽，關於this的用法，你知道多少呢？下面我來給大家整理一下關於this的詳細分析，希望對大家有所幫助！

java基礎-初級（三）【類的三大特性詳解】

目錄 3、類的三大特性詳解（封裝、繼承、多型） 3.1 封裝 3.2 繼承 3.2.1 super關鍵字的使用 3.2.2 阻止繼承：final &n

【Linux下tar命令詳解】

tar命令用於建立、還原備份檔案，它可以加入、解開備份檔案內的檔案。引數帶有*號的為常用的引數 . -A 新增壓縮檔案到已存在的壓縮包 . -c 建立新的壓縮檔案* . -d 記錄檔案的差別 . -r 向壓縮檔案的末尾追加檔案 . -u 更新原壓縮包中的檔案，新增改變了的現有檔案到已

【jQuery-step】【詳解】

HTML程式碼 <link href="/css/jQuery.step.css">// 注意匯入css檔案 <script src="/js/jquery.steps.js"></script>// 匯入前確

【MM MRP參數祥解】MRP運行參數詳解

span ant 最新物料 rman total key 分享采購 MRP運行參數詳解 T－CODE:MD01、MD02 Scope of planning: Key with which you can combine a group of plants or MR

（轉載）--SG函數和SG定理【詳解】

nbsp 發現方式 spa 賦值 problem eve 查詢 mex 在介紹SG函數和SG定理之前我們先介紹介紹必勝點與必敗點吧. 必勝點和必敗點的概念： P點：必敗點，換而言之，就是誰處於此位置，則在雙方操作正確的情況下必敗。 N

【黑馬PHP教程】錯誤詳解

error_log 報告 color 顯示自定義 borde 技術誤報處理一，錯誤通常分3種二，錯誤的分級三，錯誤的觸發四，顯示錯誤報告問題一：設置顯示錯誤報告問題二：顯示哪些級別的錯誤報告五，錯誤日誌的記錄問題問題一

【CSS3 transform屬性和過渡屬性詳解】

eight tex over doctype ati ext 註意 skew 簡寫 CSS3transform屬性詳解 transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動tra

【linux c】setsockopt 詳解

多層 count 設置例如 select() log struct rec 查找轉自：http://blog.csdn.net/zhonglinzhang/article/details/9183229 功能描述：獲取或者設置與某個套接字關聯的選

python web框架【補充】http詳解

既然普通 pytho 又是大學響應頭 httpwatch 新的 pri 當你在瀏覽器地址欄敲入“http://www.cnblogs.com/”，然後猛按回車，呈現在你面前的，將是博客園的首頁了（這真是廢話，你會認為這是理所當然的）。作為一個開發者，尤其是web

(轉)虛擬路由器冗余協議【原理篇】VRRP詳解

基礎上 vrrp 終端外網 targe 多少 res 虛擬 ini 原文：http://blog.51cto.com/zhaoyuqiang/1166840 為什麽要使用VRRP技術我們知道，為了實現不同子網之間的設備通信，需要配置路由。目前常用的指定路由方法有兩種

【圖文詳解】HDFS基本原理

合並操作 ear 系統性能重要 logs 允許積累帶寬文件系統本文主要詳述了HDFS的組成結構，客戶端上傳下載的過程，以及HDFS的高可用和聯邦HDFS等內容。若有不當之處還請留言指出。當數據集大小超過一臺獨立的物理計算機的存儲能力時，就有必要對它進行分區，並存

Oracle數據庫的安裝【超詳細的文圖詳解】

ech passwd pat 適用於下載當前 play 領域 .so Oracle簡介Oracle Database，又名Oracle RDBMS，或簡稱Oracle。是甲骨文公司的一款關系數據庫管理系統。它是在數據庫領域一直處於領先地位的產品。可以說Oracle數據庫

【轉】Vue-詳解設置路由導航的兩種方法： <router-link :to="..."> 和router.push(...)

name app query outer 參數 size 命名字符適用於一、<router-link :to="...">　　to裏的值可以是一個字符串路徑，或者一個描述地址的對象。例如： // 字符串 <router-link to="apple

【詳解】KMP算法

是不是代碼 ++ 大牛 bilibili 開始最長 [] 分別是前言 KMP算法是學習數據結構中的一大難點，不是說它有多難，而是它這個東西真的很難理解（反正我是這麽感覺的，這兩天我一直在研究KMP算法，總算感覺比較理解了這套算法，在這裏我將自己的思路分享給大家

Grunt學習筆記【3】---- filter詳解

add 行處理 class 一個特殊 col filter詳解很多 https 本文主要講配置任務中的filter，包括使用默認fs.Stats方法名和自定義過濾函數。通過設置filter屬性可以實現一些特殊處理邏輯。例如：要清理某個文件夾下的所有空文件夾，這時使用c

【PPT詳解】曹歡歡：今日頭條算法原理

智能 mmu sde dib gap 讀書 class 頭條相關性【PPT詳解】曹歡歡：今日頭條算法原理悟空智能科技 4月8日公眾號後臺回復：“區塊鏈”，獲取區塊鏈報告公眾號後臺回復：“sq”，進入區塊鏈分享社群熱文推薦： 1000位專家推薦，20本區塊鏈

【動圖詳解】通過 User-Agent 識別爬蟲的原理、實踐與對應的繞過方法

開篇隨著 Python 和大資料的火熱，大量的工程師蜂擁而上，爬蟲技術由於易學、效果顯著首當其衝的成為了大家追捧的物件，爬蟲的發展進入了高峰期，因此給伺服器帶來的壓力則是成倍的增加。企業或為了保證服務的正常運轉或為了降低壓力與成本，不得不使出各種各樣的技術手段來阻止爬蟲工程師們毫無節制的

【考題詳解】 4月DP練習賽題解

跑步[Neal Wu, 2007] 奶牛們打算通過鍛鍊來培養自己的運動細胞，作為其中的一員，貝茜選擇的運動方式是每天進行N(1 <= N <= 10,000)分鐘的晨跑。在每分鐘的開始，貝茜會選擇下一分鐘是用來跑步還是休息。貝茜的體力限制了她跑步的距離。更具體地，如果貝茜

【演算法詳解】二維動態規劃

馬攔過河卒原題傳送門這一到題目也是比較基礎的動態規劃，也可以理解為是遞推，主要是運用加法原理，思維難度不大。我們要求從（0，0）（ 0

【jQuery-step】【詳解】

HTML程式碼

js程式碼

相關推薦