您的位置：首页 > 编程技术 > php  >  用PHP实现简单的滑动菜单

用PHP实现简单的滑动菜单

 更新时间：2016年11月25日 17:34  点击：2261

<style>
table {font-size = 9pt}
td {height = 20px}
</style>
<body>
<span id="menus"></span>
<span id="view"></span>
</body>
<script for=pad event=onclick>
// 大类节点点击响应
for(var i=1;i<this.parentElement.rows.length;i =2)
　this.parentElement.rows[i].style.display = "none";
this.parentElement.rows[this.rowIndex 1].style.display='block';
view.innerHTML = this.v1 ":" this.v2; // 根据大小类自行构造相应动作
</script>
<script for=bar event=onclick>
// 小类节点点击响应
view.innerHTML = this.v1 ":" this.v2; // 根据大小类自行构造相应动作
</script>
<script>
/**
* 产生菜单的html代码串
* 入口参数为菜单默认打开的大类号
*/
function menu(n) {
　　this.ar = new Array(
　　/**
　　 * 参数数组
　　 * 列1：大类
　　 * 列2：小类
　　 * 列3：标题
　　 */
　　new Array(1,0,"大类一"),
　　new Array(1,1,"小类一"),
　　new Array(1,2,"小类二"),
　　new Array(2,0,"大类二"),
　　new Array(2,1,"小类一"),
　　new Array(2,2,"小类二"),
　　new Array(2,3,"小类三"),
　　new Array(3,0,"大类三"),
　　new Array(3,1,"小类一"),
　　new Array(3,2,"小类二"),
　　new Array(4,0,"大类四"),
　　new Array(4,1,"小类一"),
　　new Array(4,2,"小类二"),
　　new Array(4,3,"小类三")
　　);
　　this.width =120;
　　this.bgcolor = "#f0f0f0";
　　this.bordercolorlight = "#c0c0c0";
　　this.bordercolordark = "#FFFFFF";
　　this.tr_bgcolor = "#d0d0d0";
　　var s = "<table border=1 align=center width=" this.width " bgcolor=" this.bgcolor " bordercolorlight=" this.bordercolorlight " bordercolordark=" this.bordercolordark " CELLPADDING=0 CELLSPACING=0>"
　　for(var i=0;i<this.ar.length;i ) { // 构造菜单的html结构，其中将大小类编号作为自定义参数，以便事件响应时使用。
　　　　if(this.ar[i][1] == 0) {
　　　　　　if(i > 0)
　　　　　　　　s = "</table></td></tr>";
　　　　　　var vk = this.ar[i][0]==n?"block":"none";
　　　　　　s = "<tr id='pad' bgcolor=" this.tr_bgcolor " v1=" this.ar[i][0] " v2=" this.ar[i][1] "><td align=center>" this.ar[i][2] "</td></tr><tr style='display:" vk "'><td><table width=100%>";
　　　　}else
　　　　　　s = "<tr><td id='bar' v1=" this.ar[i][0] " v2=" this.ar[i][1] ">" this.ar[i][2] "</td></tr>";
　　}
　　s = "</table></td></tr></table>";
　　return s;
}
/*** 创建菜单 ***/
menus.innerHTML = menu(4);
</script>

玩转虚拟域名◎＋ .

不知道大家最近上网是否发现一个新现象，就是有一些网站开始提供“username@server”的虚拟域名服务。由于“@”的魅力，大家纷纷申请，你或许会想：“假如我也能提供这种服务，该多好阿：）人气肯定不错！”本文将给大家揭开“@”的“神秘”面纱，让大家都可以来“@”！（Do u @ today?）
别急，这个并不是电子邮件的地址，是一种虚拟域名，不相信的话可以在浏览器中访问“bbs@zphp.com”。部分朋友应该使用过IE的FTP功能，就是在浏览器的地址栏中键入“password:username@server”IE就会自动登陆FTP服务器；而在Http1.1协议中，就规定了Http访问授权功能，形式同样为“password:username@server”，其中“password:”可以省略，也是是访问“bbs@zphp.com”实际上是以bbs的身份访问“zphp.com”这个服务器。
那么我们只是需要将具体的URI传送给PHP程序，在数据库中搜索出真实的URL重定向就可以了。
首先我们需要制作一个传送URI的页面（作为服务器的默认文档，一般命名为index.htm）；在JS的Window对象中就可以实现这项功能，下面是index.htm的源代码：
<script>
this.location = ‘gotourl.php?url=’ this.location.href;
</script>
上面的代码会将浏览器重定向到gotourl.php，并且通过QueryString给变量$url赋值为当前的URI。
成功将URI传递给PHP程序后，就可以进入数据库查找真实URL，下面是SQL数据库相对应的table 的结构：
CREATE TABLE domain(
Id int(3) UNSIGNED DEFAULT ‘0’ NOT NULL, # 域名ID
Domain char(20) NOT NULL, # 域名
Gotourl char(255) NOT NULL, # 真实的URL
);
建立好了Table，就可以开始编写gotourl.php了，程序分为三个部分：

1、 分析URL：
$url = preg_replace(“/^http:///I”, “”, $url); // 将URL前面的“http://”去掉，不区分大小写
$url = preg_replace(“/@. $/”, “”, $url); // 将“@”后面的部分去除
那么，剩下的URL就只含有“username”的部分了。
为了给数据库应用，需要对铭感的字符进行处理：
$url = addslashes($url);
2、 搜索真实的URL：
这里为了实现程序的通用性，使用了一个数据库的操作类（修改自PHPLib）来操作SQL数据库：
$db = new dbSql(); // 连接数据库
$queryString = sprinf(“SELECT gotourl FROM domain WHERE domain=’%s’;”, $url); // 生成查询字符串
$gotourl = $db->result($queryString); // 查询取得结果
3、 重定向：
在PHP中重定向浏览器有多种方法，在这里使用比较简单的HttpHeader来实现：
header(“location: $gotourl”);

附

其实像网易那样子的“username.yeah.net”的虚拟域名服务和“@”的实现方法大同小异，但是“.”需要以价值200元的DNS泛解析为代价，而“@”所需要的仅仅是：
1、 PHP/SQL数据库的权限；
2、 真正DNS解析的域名。

假如需要在虚拟域名服务中加入广告，比如网易的Popup窗口，可以将重定向部分改为：
<script>
window.open("url","nease","width=windth,height=height");
</script>

<?php
// 禁止直接访问该页面
if (basename($HTTP_SERVER_VARS['PHP_SELF']) == "pager.class.php") {
　　 header("HTTP/1.0 404 Not Found");
}

class Pager
{
　　 /** 总信息数 */
　　 var $infoCount;
　　 /** 总页数 */
　　 var $pageCount;
　　 /** 每页显示条数　*/
　　 var $items;
　　 /** 当前页码 */
　　 var $pageNo;
　　 /** 查询的起始位置　*/
　　 var $startPos;
　　 var $nextPageNo;
　　 var $prevPageNo;
　
　　 function Pager($infoCount, $items, $pageNo)
　　 {
　　　　 $this->infoCount = $infoCount;
　　　　 $this->items　　 = $items;
　　　　 $this->pageNo　　= $pageNo;
　　　　 $this->pageCount = $this->GetPageCount();
　　　　 $this->AdjustPageNo();
　　　　 $this->startPos　= $this->GetStartPos();
　　 }
　　 function AdjustPageNo()
　　 {
　　　　 if($this->pageNo == '' || $this->pageNo < 1)
　　　　　　 $this->pageNo = 1;
　　　　 if ($this->pageNo > $this->pageCount)
　　　　　　 $this->pageNo = $this->pageCount;
　　 }
　　 /**
　　 * 下一页
　　 */
　　 function GoToNextPage()
　　 {
　　　　 $nextPageNo = $this->pageNo 1;
　　　　 if ($nextPageNo > $this->pageCount)
　　　　 {
　　　　　　 $this->nextPageNo = $this->pageCount;
　　　　　　 return false;
　　　　 }
　　　　 $this->nextPageNo = $nextPageNo;
　　　　 return true;
　　 }
　　 /**
　　 * 上一页
　　 */
　　 function GotoPrevPage()
　　 {
　　　　 $prevPageNo = $this->pageNo - 1;
　　　　 if ($prevPageNo < 1)
　　　　 {
　　　　　　 $this->prevPageNo = 1;
　　　　　　 return false;
　　　　 }
　　　　 $this->prevPageNo = $prevPageNo;
　　　　 return true;
　　 }
　　 function GetPageCount()
　　 {
　　　　 return ceil($this->infoCount / $this->items);
　　 }
　　 function GetStartPos()
　　 {
　　　　 return ($this->pageNo - 1)　* $this->items;
　　 }
}
?>

WAP（无线通讯协议）是在数字移动电话、个人手持设备（PDA等）及计算机之间进行通讯的开放性全球标准。由于静态的WAP页面在很多方面不能满足用户个性化的服务请求，因此通过WAP服务器端语言产生动态的WML页面，具有很广泛的应用价值和很高的商业价值。

　　WAP应用结构非常类似于Internet，一个典型的WAP应用请求是这样的：首先，具有WAP用户代理功能的移动终端(WAP手机等)通过内部运行的微浏览器(Micro Browser)对某一网站以无线方式发送WAP服务请求。该请求先由WAP网关截获，对信息内容进行编码压缩，以减少网络数据流量，同时根据需要将WAP协议转换成HTTP协议，然后将处理后的请求转送到相应WAP服务器。在WAP服务器端，根据页面扩展名等性质，被请求的页面直接或由服务器端脚本解释后输出，再经网关传回用户。

　　从上述WAP应用流程可以看到，生成动态WAP页面与动态产生Web网页的过程非常类似。但是由于WAP应用使用的WML语言来源于语法严格的XML，因此要求输出的格式必须按WAP网页的规范输出。同时，由于WAP协议的应用范围、移动客户端的软硬件水平等非凡性，对每次输出的页面的大小、图像的格式及容量都有一定限制。下面我们以PHP脚本语言为例，看看如何动态输出WAP页面。

　　一、设置WEB服务器

　　首先你的 Web服务器要安装好PHP，即能处理PHP脚本程序。其次，为使Web服务器能同时识别和处理PHP、WML、WBMP等文件，Web 服务器的MIME表需添加以下的几种文件类型。

　　text/vnd.wap.wml .wml
　　image/vnd.wap.wbmp .wbmp
　　application/vnd.wap.wmlc .wmlc
　　text/vnd.wap.wmls.wmls
　　application/vnd.wap.wmlsc .wmlsc

　　二、用PHP输出简单动态WAP页面

　　下面有一个最简单的PHP生成WAP页面的例子。注重由于需要PHP解释器来解释该程序，并输出WAP页面，因此所有类似程序应以.php为扩展名。

　　<?php
　　header("Content－type: text/vnd.wap.wml");
　　echo ("<wml> <card> <p>");
　　echo date( "l dS of F Y h:i:s A" );
　　echo ("</p></card></wml>");
　　?>

　　该例子在WAP手机模拟器中可以浏览，输出当前日期时间，而在普通的浏览器中无法识别，甚至会被认为是错误下载。这是因为在程序开头就声明了该输出文档为WML类型，该类型只有WAP设备能够识别并解释。值得注重的是，我们常见的HTML语言对规范性要求不严，大多数浏览器能“容忍”其中相当多的编写错误，而WML规范相当严格，一点失误都可能导致无法输出所需页面。

　　一旦我们知道了用PHP脚本输出WAP页面的标准过程，我们就能够使用PHP强大的功能配合以WML语言的交互处理以及WML Script的简单脚本，开发出适合我们需要的应用系统了。

　　三、用PHP动态生成图像

　　WAP应用使用一种非凡黑白的图像格式WBMP。我们可以用一些工具来将已有图像转换成WBMP格式，然后在WML文档中使用。但是在WAP站点上假如能动态地生成所需图像如K线图等，将会有广阔的应用前景。幸运的是，PHP的GD库(版本1.8以上)已经提供了相应函数。

　　<?PHP
　　Header("Content－type: image/vnd.wap.wbmp");
　　Sim = ImageCreate(50, 50);
　　Swhite = ImageColorAllocate(Sim,255,255,255);
　　Sblack = ImageColorAllocate(Sim,0,0,0);
　　ImageRectangle(Sim, 5, 5, 20, 20, Sblack);
　　ImageWBMP(Sim); 　　ImageDestroy(Sim);
　　?>

　　该文件将在WAP模拟器中显示一个黑色矩形框。注重要使用GD的图像函数库，必须在PHP配置中加载PHP_GD.DLL库文件。

　　四、在PHP中处理汉字

　　WAP作为一种全球应用，选择了UNICODE 2.0作为其标准字符集编码，以便能同时处理包括英文、中文、日文、法文等多种文字。而我们平常处理汉字使用的是GB2312编码，不同的内码标准势必不能通用，因此假如不在两种编码之间通过码表进行转换，就会出现汉字乱码现象。现在已经有较成熟的GB－2312与UNICODE编码转换的程序和函数，并在ASP、PHP、JSP等系统中使用，我们可以在一些技术站点上找到它们。

　　目前的大多数WAP手机（Nokia7110、爱立信R320S等等）都是使用UTF－8编码的，也就是采用UNICODE来编码。这样，假如我们直接在WML使用中文字符（GB2312编码），将会产生乱码，手机用户无法识别，所以我们在输出中文之前，要使用程序或函数对中文进行UNICODE的编码。而在少数支持GB2312编码的手机或WAP终端设备中，我们可以在程序中定义好文档的内码类型后即可直接正确显示汉字，例如：

　　<?php
　　header("Content－type: text/vnd.wap.wml; charset=gb2312");
　　echo ("<wml><card><p>");
　　echo ("中文测试");
　　echo ("</p></card></wml>");
　　?>

用户可接受的语言信息，放在$_SERVER['HTTP_ACCEPT_LANGUAGE']里，变量信息是类似这样的 "zh-cn"， 假如是多语言列，是类似 "zh-cn,en;q=0.8,ko;q=0.5,zh-tw;q=0.3"

　　下面的问题可以迎刃而解了。

　　代码:

<?php
error_reporting(E_ALL ^ E_NOTICE);
// 分析 HTTP_ACCEPT_LANGUAGE 的属性
// 这里只取第一语言设置 （其他可根据需要增强功能，这里只做简单的方法演示）
preg_match('/^([a-z-] )/i', $_SERVER['HTTP_ACCEPT_LANGUAGE'], $matches);
$lang = $matches[1];
switch ($lang) {
case 'zh-cn' :
header('Location: http://cn.example.com/');
break;
case 'zh-tw' :
header('Location: http://tw.example.com/');
break;
case 'ko' :
header('Location: http://ko.example.com/');
break;
default:
header('Location: http://en.example.com/');
break;
}
?>

[!--infotagslink--]

相关文章

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08

  • JS基于Mootools实现的个性菜单效果代码

    本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考，具体如下：这里演示基于Mootools做的带动画的垂直型菜单，是一个初学者写的，用来学习Mootools的使用有帮助，下载时请注意要将外部引用的mootools...2015-10-23

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • jQuery实现有动画淡出效果的二级折叠菜单代码

    本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考，具体如下：这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码，相当不错，因考虑功能的实现，所以没有怎么美化，不过这样也好，可以给大家更...2015-10-21

  • jQuery实现下拉菜单滑动效果

    这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-09

  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15

  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21

  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25

  • jQuery实现可关闭固定于底（顶）部的工具条菜单效果

    本文实例讲述了jQuery实现可关闭固定于底（顶）部的工具条菜单效果。分享给大家供大家参考，具体如下：这是一款可关闭始终在页面底部的工具条菜单，浮动在页面顶部的大家见的比较多了，本款从形式上来说与其它的没什么差别，只是浮...2015-11-08

  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04

  • js如何构造elementUI树状菜单的数据结构详解

    由于业务需要，要求实现树形菜单，且菜单数据由后台返回，下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13

  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解

    二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果：当选择大类时，小类下拉框里的选项内容也随着改...2015-10-30

  • Vue.js 递归组件实现树形菜单（实例分享）

    本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧...2017-01-09

  • JavaScript 获取滚动条位置并将页面滑动到锚点

    这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下...2021-02-09

  • uniapp实现可以左右滑动导航栏

    这篇文章主要为大家详细介绍了uniapp 实现可以左右滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-10-21

  • jQuery实现精美的多级下拉菜单特效

    这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单，有加载等待效果，有层级分类展示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...2015-03-15

  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07

  • jquery插件实现悬浮的菜单

    这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-23