路由器web向导页面
来源：互联网 发布：mac日历如何删除事件 编辑：程序博客网 时间：2024/04/28 13:55
这一篇是网上比较好的实现方式，请在百度输入关键之搜索“基于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> <div id="main"> <form action="#" method="post"> <div 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> <div class="item"> <div 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> <div class="btn_nav"> <input id="btn1" type="button" class="next right" value="下一步»" /> </div> </div> <div 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> <div 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="下一步»" /> </div> </div> <div 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> <div 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="下一步»" /> </div> </div> <div id="item1-dynamic" class="hide"> <em>下面是路由自动获取的IP地址。</em> <p><label>IP地址：</label><input type="text" class="input" name="autoip" /></p> <div 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="下一步»" /> </div> </div> <div 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> <div 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="下一步»" /> </div> </div> <div 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> <div 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="下一步»" /> </div> </div> <div id="item4" class="hide"> <h6> <em>恭喜您已经完成了配置。</em></h6> <p>请点击“确定”按钮完成配置。</p> <div class="btn_nav"> <input id="btn5-1" type="button" class="next left" value="上一步" /> <input id="btn5-2" type="button" class="next right" value="确 定" /> </div> </div> </div> </div> </form> </div> <script type="text/javascript"> $(document).ready(function () { //$(document).bind('keydown', HandleTabKey); }); function HandleTabKey(evt) { if (evt.keyCode == 9) { if (evt.preventDefault) { evt.preventDefault(); } else { evt.returnValue = false; } } } $("#btn1").click(function () { var type = $('input:radio:checked').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 = $('input:radio:checked').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>CSS样式表
@charset "utf-8";/*CSS DOCUMENT*/html, body, div, 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;}阅读全文
0 0
- 路由器web向导页面
- 路由器初始配置向导
- 路由器初始配置向导
- 屏幕手势向导页面
- Android 向导页面
- android欢迎向导页面
- 实现类似路由器那样通过WEB页面配置设备
- MFC向导页面(wizard page)
- 向导生成的jsp页面
- Android向导页面的实现
- MFC向导页面(wizard page)
- Java Web Start 开发向导
- eclipse向导页面设置页面改变事件
- Innosetup状态页面和向导页面解释
- 路由器页面汉化
- Android欢迎页面与使用向导
- Intent 向导 android页面的跳转
- ViewPager之app向导页面开发
- 都在说微服务，那么微服务的反模式和陷阱是什么（三）
- VideoView播放视频是出现黑边的问题
- 乔宇：深度模型让机器理解场景|VALSE2017之十一
- Docker vs. Kubernetes vs. Apache Mesos：为什么你认为的可能是错误的
- Java从网络上读取图片并保存至本地
- 路由器web向导页面
- 第一次面试心得
- 金融科技&大数据产品推荐：Chinapex创略智能客户数据平台——开启智慧营销之旅
- LeetCode | 89. Gray Code
- 控制RecyclerView Item的宽度
- 为什么我要改用Kotlin
- 一个简单实用的Android调试应用技巧
- 一些关于加速Gradle构建的个人经验
- Kotlin中的单例模式
