luci界面实现web端和移动端的不同风格
来源:互联网 发布:哔哩哔哩没有mac版吗 编辑:程序博客网 时间:2024/05/01 17:17
luci界面开发中的web端和移动端
为适应不同平台,针对web端和移动端,在不同平台的浏览器输入登录地址后,出现不同的登录界面。
实现步骤:
1.在/www/index.html里做出判断,是web端登录还是移动端登录。代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<script src="/turbo-static/turbo/web/js/jquery-1.8.1.min.js?v=986"></script>//引入必要的js文件
<script src="/turbo-static/turbo/web/js/jquery.cookie.min.js?v=986"></script>
<script src="/turbo-static/turbo/interface.js?v=986"></script>//引入用来判断平台的js文件
<script language="javascript" type="text/javascript">
format_is_mobile();
if(needJumpMobile()){
window.location.href="/cgi-bin/luci/admin_mobile";//浏览器根据这里的url去走不同的路径,这里是/admon_mobile
}
else {
window.location.href="/cgi-bin/luci";//这里luci的开始路径是 /
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPENWRT</title>
<noscript><meta http-equiv="refresh" content="0; url=/" /></noscript>
</head>
<script type="text/javascript">
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<script src="/turbo-static/turbo/web/js/jquery-1.8.1.min.js?v=986"></script>//引入必要的js文件
<script src="/turbo-static/turbo/web/js/jquery.cookie.min.js?v=986"></script>
<script src="/turbo-static/turbo/interface.js?v=986"></script>//引入用来判断平台的js文件
<script language="javascript" type="text/javascript">
format_is_mobile();
if(needJumpMobile()){
window.location.href="/cgi-bin/luci/admin_mobile";//浏览器根据这里的url去走不同的路径,这里是/admon_mobile
}
else {
window.location.href="/cgi-bin/luci";//这里luci的开始路径是 /
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPENWRT</title>
<noscript><meta http-equiv="refresh" content="0; url=/" /></noscript>
</head>
<script type="text/javascript">
</script>
</html>
2.在目录/www/cgi-bin里建立脚本文件 luci
3.在目录controller里建立admin_mobile目录,里面添加index.lua文件(luci开始时自动先到此文件里执行firstchild函数等),内容如下:
参考admin目录下的index.lua文件,做如下修改:
module("luci.controller.admin_mobile.index", package.seeall)
root.target = alias("admin_mobile")
local page = node("admin_mobile")
page.sysauth_authenticator = "htmlauth_mobile"
4.在luci目录下的dispatcher.lua里添加函数htmlauth_mobile,内容如下:
function authenticator.htmlauth_mobile(validator, accs, default)
local user = luci.http.formvalue("username")
local pass = luci.http.formvalue("password")
if user and validator(user, pass) then
return user
end
local user = luci.http.formvalue("username")
local pass = luci.http.formvalue("password")
if user and validator(user, pass) then
return user
end
require("luci.i18n")
require("luci.template")
context.path = {}
luci.template.render("admin_mobile/sysauth", {duser=default, fuser=user})
return false
end
5.自定义lua及htm文件,实现相应的功能。
0 0
- luci界面实现web端和移动端的不同风格
- openwrt luci管理的Web界面实例
- luci web 界面功能
- openwrt的web界面luci的添加模块
- XP风格界面的实现
- openwrt web管理luci界面修改
- openwrt web管理luci界面修改
- openwrt web管理luci界面修改
- Win8风格的Web启动界面
- web和移动端测试的区别
- 给移动端和pc端不同的展现形式
- listview不同风格item的实现
- Android 实现不同样式风格的CharSequence
- 实现不同显示风格的RadioButton
- OpenWRT Luci界面的简单删改
- VC编程实现IE风格的界面
- VC编程实现IE风格的界面
- 移动端Web界面滚动性能优化: Passive event listeners
- 【深入浅出IOS开发】绘制图片
- 【深入浅出IOS开发】绘制文字
- 自定义控件
- 将Cstring 转换成 const char *
- 元组和列表可以互相转化
- luci界面实现web端和移动端的不同风格
- 【深入浅出IOS开发】绘制一个小黄人
- hdu 4003 Find Metal Mineral (树形dp+背包)
- VBA 学习文章
- 把war包放到Tomcat安装目录下,不能直接访问的解决方案
- 配置logback将日志输出到文件
- configure.ac (configure.in)
- 修改Dialog属性后监听不到onBackPress事件
- android混淆编译 ---- 问题汇总