Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Implementierung der Router-Web-Assistentenseite

Implementierung der Router-Web-Assistentenseite

一个新手
Freigeben： 2017-10-02 09:45:11
Original
2567 Leute haben es durchsucht

这一篇是网上比较好的实现方式，请在百度输入关键之搜索“基于Bootstrap实现的上一步下一步表单向导插件Wizard.js”

使用网上的scrollable.js这个插件bug比较多，不推荐使用

下面是我根据需求完成自己写的一份路由器向导页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="./guide.css"/>
    <script type="text/javascript" src="./jq.js"></script>
</head>
<body>
    <p id="main">
        <form action="#" method="post">
            <p id="wizard">
                <ul id="status">
                    <li id="netset" class="active">上网方式</li>                    
                    <li id="netset-ppoe" class="hide">PPOE</li>
                    <li id="netset-static" class="hide">静态IP</li>
                    <li id="netset-dynamic" class="hide">动态IP</li>
                    <li id="wireless">无线设置</li>
                    <li id="portal">Portal设置</li>
                    <li id="finish">完成</li>
                </ul>
                <p class="item">
                    <p id="item1" class="page">
                        
                         <h6>本向导提供三种上网方式的选择</h6>   
                        <em>
                            如果是其他上网方式，请点击菜单栏“网络->接口->wan”配置。
                        </em>
                        <p><input id="default" type=radio name="type" value="Auto" checked>路由器自动选择上网方式(默认)</p>
                        <p><input type=radio name="type" value="PPOE">PPOE(ADSL虚拟拨号)</p>
                        <p><input type=radio name="type" value="D">动态IP(自动从网络服务商获取IP地址)</p>
                        <p><input type=radio name="type" value="Static">静态IP(网络服务商提供的IP地址)</p>
                        <p class="btn_nav">
                            <input id="btn1" type="button" class="next right" value="下一步»" />
                        </p>
                    </p>

                    <p id="item1-ppoe" class="hide">
                        <em>请在下面的设置框中填入运营商提供的正确的宽带账号和密码。</em>
                        <p><label>上网账号：</label><input type="text" class="input" name="ppoe-user" /></p>
                        <p><label>上网密码：</label><input type="password" class="input" name="ppoe-passwd" /></p>
                        <p><label>重复密码：</label><input type="password" class="input" name="ppoe-repeat" /></p>
                        <p class="btn_nav">
                            <input id="btn2-1" type="button" class="prev" style="float:left" value="«上一步" />
                            <input id="btn2-2" type="button" class="next right" value="下一步»" />
                        </p>
                    </p>

                    <p id="item1-static" class="hide">
                        <em>请在下面的设置框中填入正确的IP地址、掩码、网关、DNS等信息。</em>
                        <p><label>IPV4地址：</label><input type="text" class="input" name="static-ip" /></p>
                        <p><label>掩码：</label><input type="text" class="input" name="static-mask" /></p>
                        <p><label>网关：</label><input type="text" class="input" name="static-gateway" /></p>
                        <p><label>DNS：</label><input type="text" class="input" name="static-dns" /></p>
                        <p class="btn_nav">
                            <input id="btn2-3" type="button" class="prev" style="float:left" value="«上一步" />
                            <input id="btn2-4" type="button" class="next right" value="下一步»" />
                        </p>
                    </p>

                    <p id="item1-dynamic" class="hide">
                        <em>下面是路由自动获取的IP地址。</em>
                        <p><label>IP地址：</label><input type="text" class="input" name="autoip" /></p>
                        <p class="btn_nav">
                            <input id="btn2-5" type="button" class="prev" style="float:left" value="«上一步" />
                            <input id="btn2-6" type="button" class="next right" value="下一步»" />
                        </p>
                    </p>

                    <p id="item2" class="hide">
                        <em>本向导页面设置路由器无线网络基本参数以及无线安全。</em>
                        <p><label>无线状态：
                            <select>
                                <option value="Enable">开启</option>
                                <option value="Disenable">关闭</option>     
                            </select>
                            </label>
                        </p>
                        <p><label>SSID：</label><input type="text" class="input" name="SSID" value="MT-12346"/></p>
                        <p><label>
                            信道：                          
                            <select name="ch">
                                <option value="ch1">1</option>
                                <option value="ch2">2</option>
                                <option value="ch3">3</option>
                                <option value="ch4">4</option>
                                <option value="ch5">5</option>
                                <option value="ch6">6</option>
                                <option value="ch7">7</option>
                                <option value="ch8">8</option>
                                <option value="ch9">9</option>
                                <option value="ch10">10</option>
                                <option value="ch11" selected="selected">11</option>
                            </select>
                                带宽：
                               <select name="bw">
                                   <option value="bw300">300M</option>
                                   <option value="bw150">150M</option>
                               </select>
                        </label></p>

                        <p><input type=radio name="wireless-security" value="close" checked/>关闭无线安全</p>
                        <p><input type=radio name="wireless-security" value="enable"/>WPA-PSL/WPA2-PSK</p>
                        <p><label>PSK密码：</label><input type="password" class="input" name="security-passwd"/></p>
                        <p class="btn_nav">
                            <input id="btn3-1" type="button" class="prev" style="float:left" value="«上一步" />
                            <input id="btn3-2" type="button" class="next right" value="下一步»" />
                        </p>
                    </p>

                    <p id="item3" class="hide">
                        <h6>受限制的网络连接,HTTP请求都重定向到指定的站点</h6>   
                        <em>本向向导页面设置无线强制认证。</em>
                        <p><label>开启Portal认证：<input type="checkbox" name="portal-enable" value="enable_portal" /></label></p>
                        <p><label>认证服务器地址：</label><input type="text" class="input" name="url" value="192.168.0.251"/></p>
                        <p><label>高级设置：<a href="http://192.168.0.251"><input type="button" class="" value="点击在线配置" name="inline" /></a></label></p>

                        <p class="btn_nav">
                            <input id="btn4-1" type="button" class="prev" style="float:left" value="«上一步" />
                            <input id="btn4-2" type="button" class="next right" value="下一步»" />
                        </p>
                    </p>

                    <p id="item4" class="hide">
                        <h6>
                            <em>恭喜您已经完成了配置。</em></h6>
                            <p>请点击“确定”按钮完成配置。</p>

                            <p class="btn_nav">
                                <input id="btn5-1" type="button" class="next left" value="上一步" />
                                <input id="btn5-2" type="button" class="next right" value="确 定" />
                            </p>
                    </p>
                </p>
            </p>
        </form>
    </p>
    <script type="text/javascript">
        $(document).ready(function () {
            //$(document).bind(&#39;keydown&#39;, HandleTabKey);
        });
        function HandleTabKey(evt) {
            if (evt.keyCode == 9) {
                if (evt.preventDefault) { evt.preventDefault(); }
                else { evt.returnValue = false; }
            }
        }
        $("#btn1").click(function () {
            var type = $(&#39;input:radio:checked&#39;).val();         
            switch (type) {
                case "PPOE":
                    $("#item1").removeClass("page").addClass("hide");
                    $("#item1-ppoe").removeClass("hide").addClass("page");                  
                    break;

                case "Static":
                    $("#item1").removeClass("page").addClass("hide");
                    $("#item1-static").removeClass("hide").addClass("page");
                    break;

                case "D":
                    $("#item1").removeClass("page").addClass("hide");
                    $("#item1-dynamic").removeClass("hide").addClass("page");
                    break;

                default:
                    //todo 自动判断是什么上网方式                   
                    break;
            }
            ClickRadio();
        });

        $("#btn2-2").click(function () {
            $("#item1-ppoe").removeClass("page").addClass("hide");
            $("#item2").removeClass("hide").addClass("page");

            $("#netset-ppoe").removeClass("active").addClass("");
            $("#wireless").removeClass("").addClass("active");
        });

        $("#btn2-4").click(function () {
            $("#item1-static").removeClass("page").addClass("hide");
            $("#item2").removeClass("hide").addClass("page");

            $("#netset-static").removeClass("active").addClass("");
            $("#wireless").removeClass("").addClass("active");
        });

        $("#btn2-6").click(function () {
            $("#item1-dynamic").removeClass("page").addClass("hide");
            $("#item2").removeClass("hide").addClass("page");

            $("#netset-dynamic").removeClass("active").addClass("");
            $("#wireless").removeClass("").addClass("active");
        });

        $("#btn2-1,#btn2-3,#btn2-5").click(function () {
            $("#item1-static").removeClass("page").addClass("hide");
            $("#item1-ppoe").removeClass("page").addClass("hide");
            $("#item1-dynamic").removeClass("page").addClass("hide");

            $("#item1").removeClass("hide").addClass("page");
        });

        $("#btn3-1").click(function () {
            $("#wireless").removeClass("active").addClass("");
            $("#item1-static").removeClass("page").addClass("hide");
            $("#item1-ppoe").removeClass("page").addClass("hide");
            $("#item1-dynamic").removeClass("page").addClass("hide");

            $("#item1").removeClass("hide").addClass("page");

            $("#netset").removeClass("hide").addClass("active");
            $("#netset-dynamic").removeClass("active").addClass("hide");
            $("#netset-static").removeClass("active").addClass("hide");
            $("#netset-ppoe").removeClass("active").addClass("hide");        

        });

        $("#btn3-2").click(function () {
            $("#item2").removeClass("page").addClass("hide");
            $("#item3").removeClass("hide").addClass("page");

            $("#wireless").removeClass("active").addClass("");
            $("#portal").removeClass("").addClass("active");
        });

        $("#btn4-1").click(function () {
            $("#item3").removeClass("page").addClass("hide");
            $("#item2").removeClass("hide").addClass("page");

            $("#portal").removeClass("active").addClass("");
            $("#wireless").removeClass("").addClass("active");
            console.log("4-1");
        });

        $("#btn4-2").click(function () {
            $("#item3").removeClass("page").addClass("hide");
            $("#item4").removeClass("hide").addClass("page");

            $("#portal").removeClass("active").addClass("");
            $("#finish").removeClass("").addClass("active");
        });
       
        $("#btn5-1").click(function () {          
            $("#finish").removeClass("active").addClass("");
            $("#portal").removeClass("").addClass("active");

            $("#item4").removeClass("page").addClass("hide");
            $("#item3").removeClass("hide").addClass("page");
            

        });

        $("#btn5-2").click(function () {
            var data = $("form").serialize()+"\n系统正在重启几分钟后生效";
            alert(data);
        });

        $("#item1 :radio").click(function () {
            ClickRadio();
        });
    
        function ClickRadio()
        {
            var type = $(&#39;input:radio:checked&#39;).val();
            switch (type) {
                case "PPOE":
                    $("#netset-ppoe").removeClass("hide").addClass("active");
                    $("#netset").removeClass("active").addClass("hide");
                    $("#netset-dynamic").removeClass("active").addClass("hide");
                    $("#netset-static").removeClass("active").addClass("hide");

                    break;
                case "Static":
                    $("#netset-static").removeClass("hide").addClass("active");
                    $("#netset").removeClass("active").addClass("hide");
                    $("#netset-dynamic").removeClass("active").addClass("hide");
                    $("#netset-ppoe").removeClass("active").addClass("hide");
                    break;
                case "D":
                    $("#netset-dynamic").removeClass("hide").addClass("active");
                    $("#netset").removeClass("active").addClass("hide");
                    $("#netset-static").removeClass("active").addClass("hide");
                    $("#netset-ppoe").removeClass("active").addClass("hide");
                    break;
                case "Auto":
                    $("#netset").removeClass("hide").addClass("active");
                    $("#netset-dynamic").removeClass("active").addClass("hide");
                    $("#netset-static").removeClass("active").addClass("hide");
                    $("#netset-ppoe").removeClass("active").addClass("hide");
                    break

                default:
                    $("#netset").removeClass("hide").addClass("active");
                    $("#netset-dynamic").removeClass("active").addClass("hide");
                    $("#netset-static").removeClass("active").addClass("hide");
                    $("#netset-ppoe").removeClass("active").addClass("hide");
                    break;
            }
        }
    </script>
</body>
</html>
Nach dem Login kopieren

CSS样式表

@charset "utf-8";
/*CSS DOCUMENT*/
html, body, p, span, h1, h2, h3, h4, h5, h6, p, pre, a, code, em, img, small, strong, sub, sup, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label {
margin:0; padding:0; border:0; outline:0; font-size:16px;vertical-align:baseline;}

a {
    color:#007bc4; 
    text-decoration:none;

}
a:hover{
    text-decoration:underline;

}
ol,ul{
    list-style:none;

}
table{
    border-collapse:collapse;border-spacing:0

}
body{
    height:100%;font:16px "Microsoft Yahei",Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif;
    color:#51555C;

}

img{
    border:none;

}

#head {
    width:56rem; 
    height:5.75rem;
    margin:0 auto;
}

#wizard {
    border:5px solid #eee;
    height:26rem;
    margin:20px auto;
    width:35.63rem;overflow:hidden;
    position:relative;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:0;
}
#wizard .right{float:right;}
#wizard #status{height:35px;background:#eee;padding-left:1.56rem!important; width:35.63rem;}

#status li{float:left;color:rgb(154,37,143);padding:10px 30px;}

#status li.active{
    background-color:rgb(133,129,216);
    font-weight:normal;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

}
.page{padding:1.25rem 1.875rem;width:31.25rem;float:left;height:25rem;}

.page em{
    border-bottom:1px dotted #ccc; 
    margin-bottom:20px; 
    padding-bottom:5px;       
    font-style:normal;
    font-size:0.8rem;

}

.btn_nav{
    height:36px; 
    line-height:36px;
    margin:20px auto;
}
.prev,.next{
    width:100px; 
    height:32px;
    line-height:32px; 
    background:url(images/btn_bg.gif) repeat-x bottom; 
    border:1px solid #d3d3d3; 
    cursor:pointer

}

.page p{
    line-height:16px;
    margin-top:0.5rem;
    font-size:0.8rem;
    
}
.page p label{
    display:block;
    font-size:0.8rem;
}

.input{
    width:240px;
    height:18px; 
    margin:10px auto;
    line-height:20px; 
    border:1px solid #d3d3d3;
    padding:2px
}

.hide {
    display:none;
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonImplementierung der Router-Web-Assistentenseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
web 实现 路由器
Quelle：php.cn
Vorheriger Artikel：So implementieren Sie die grundlegende einzeilige Bearbeitungsfunktion Nächster Artikel：Beispiel einer JavaScript-Implementierung des Buffer Motion Frameworks
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Kann ein in mehreren Routen deklarierter Workerpool seine CPU-Auslastung trotzdem beibehalten, ohne sich um den Schwellenwert zu kümmern? Ich hoffe, ein node.js-System mit einem Workerpool zu finden, um CPU-intensive Aufgaben zu...
Aus 2024-04-06 19:54:23
0
1
444
Das Eingabeelement konnte nicht von der Website abgerufen werden Ich versuche also, ein Eingabeelement von Twitter abzurufen, aber wenn ich es ausführe, er...
Aus 2024-04-06 18:59:57
0
1
442
Laravel 8 – So leiten Sie die Route /{editable_text} zur Route /{user} um Ich habe versucht, eine Weiterleitungsroute zu erstellen, die mich zu einem Benutzerprofil...
Aus 2024-04-06 17:26:11
0
1
410
Sollten wir SSG verwenden, um mit Nuxt.js erstellte Dashboards bereitzustellen? Wir werden mit Nuxt.js ein Dashboard für den internen Gebrauch entwickeln. Da es sich um e...
Aus 2024-04-06 13:17:44
0
1
493
vue vee-validate erfasst das Problem der Datumsauswahlauswahl Die V-Modell-Bindung in meinem Datepicker-Feld funktioniert nicht richtig. Wenn Sie eine A...
Aus 2024-04-06 11:38:56
0
1
510
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage