php开发路由器界面,路由器web向导页面实现

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

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

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

• 上网方式
• PPOE
• 静态IP
• 动态IP
• 无线设置
• Portal设置
• 完成

本向导提供三种上网方式的选择

如果是其他上网方式，请点击菜单栏“网络->接口->wan”配置。

路由器自动选择上网方式(默认)

PPOE(ADSL虚拟拨号)

动态IP(自动从网络服务商获取IP地址)

静态IP(网络服务商提供的IP地址)

请在下面的设置框中填入运营商提供的正确的宽带账号和密码。

上网账号：

上网密码：

重复密码：

请在下面的设置框中填入正确的IP地址、掩码、网关、DNS等信息。

IPV4地址：

掩码：

网关：

DNS：

下面是路由自动获取的IP地址。

IP地址：

本向导页面设置路由器无线网络基本参数以及无线安全。

无线状态：

开启

关闭

SSID：

信道：

1

2

3

4

5

6

7

8

9

10

11

带宽：

300M

150M

关闭无线安全

WPA-PSL/WPA2-PSK

PSK密码：

受限制的网络连接,HTTP请求都重定向到指定的站点

本向向导页面设置无线强制认证。

开启Portal认证：

认证服务器地址：

高级设置：

恭喜您已经完成了配置。

请点击“确定”按钮完成配置。

$(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;

}

}

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;

}