当前位置：首页 > CMS教程 > Thinkphp > 列表

TP5框架页面跳转样式操作示例

发布:smiling　来源: PHP粉丝网 　添加日期：2022-02-24 08:34:48　浏览: 评论：0　

这篇文章主要介绍了TP5框架页面跳转样式操作,结合实例形式分析了TP5框架移动设备支持及页面跳转样式定义相关操作技巧,需要的朋友可以参考下。

本文实例讲述了TP5框架页面跳转样式操作，分享给大家供大家参考，具体如下：

1、效果图

TP5框架页面跳转样式操作示例

TP5框架页面跳转样式操作示例

2、上干货

为了增加对移动设备的支持，在  /application/common.php加入以下函数：

  1. function isMobile() 
  2. {  
  3.   if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) 
  4.   { 
  5.     return true; 
  6.   }  
  7.   if (isset ($_SERVER['HTTP_VIA'])) 
  8.   {  
  9.     return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false; 
  10.   }  
  11.   if (isset ($_SERVER['HTTP_USER_AGENT'])) 
  12.   { 
  13.     $clientkeywords = array ('nokia', 
  14.       'sony', 
  15.       'ericsson', 
  16.       'mot', 
  17.       'samsung', 
  18.       'htc', 
  19.       'sgh', 
  20.       'lg', 
  21.       'sharp', 
  22.       'sie-', 
  23.       'philips', 
  24.       'panasonic', 
  25.       'alcatel', 
  26.       'lenovo', 
  27.       'iphone', 
  28.       'ipod', 
  29.       'blackberry', 
  30.       'meizu', 
  31.       'android', 
  32.       'netfront', 
  33.       'symbian', 
  34.       'ucweb', 
  35.       'windowsce', 
  36.       'palm', 
  37.       'operamini', 
  38.       'operamobi', 
  39.       'openwave', 
  40.       'nexusone', 
  41.       'cldc', 
  42.       'midp', 
  43.       'wap', 
  44.       'mobile' 
  45.       );  
  46.     if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))) 
  47.     { 
  48.       return true; 
  49.     }  
  50.   }  
  51.   if (isset ($_SERVER['HTTP_ACCEPT'])) 
  52.   {  
  53.     if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) 
  54.     { 
  55.       return true; 
  56.     }  
  57.   }  
  58.   return false; 
  59. } 

替换模板(  找到文件 /thinkphp/tpl/dispatch_jump.tpl，删除里面的全部代码，加入下面代码)：

  1. {__NOLAYOUT__}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6.   <title>跳转提示</title> 
  7.   <?php if(isMobile()==true){?> 
  8.   <style type="text/css"> 
  9.     body, h1, h2, p,dl,dd,dt{margin: 0;padding: 0;font: 15px/1.5 微软雅黑,tahoma,arial;} 
  10.     body{background:#efefef;} 
  11.     h1, h2, h3, h4, h5, h6 {font-size: 100%;cursor:default;} 
  12.     ul, ol {list-style: none outside none;} 
  13.     a {text-decoration: none;color:#447BC4} 
  14.     a:hover {text-decoration: underline;} 
  15.     .ip-attack{width:100%; margin:200px auto 0;} 
  16.     .ip-attack dl{ background:#fff; padding:30px; border-radius:10px;border: 1px solid #CDCDCD;-webkit-box-shadow: 0 0 8px #CDCDCD;-moz-box-shadow: 0 0 8px #cdcdcd;box-shadow: 0 0 8px #CDCDCD;} 
  17.     .ip-attack dt{text-align:center;} 
  18.     .ip-attack dd{font-size:16px; color:#333; text-align:center;} 
  19.     .tips{text-align:center; font-size:14px; line-height:50px; color:#999;} 
  20.   </style> 
  21. <?php }else{ ?> 
  22. <style type="text/css"> 
  23.     body, h1, h2, p,dl,dd,dt{margin: 0;padding: 0;font: 15px/1.5 微软雅黑,tahoma,arial;} 
  24.     body{background:#efefef;} 
  25.     h1, h2, h3, h4, h5, h6 {font-size: 100%;cursor:default;} 
  26.     ul, ol {list-style: none outside none;} 
  27.     a {text-decoration: none;color:#447BC4} 
  28.     a:hover {text-decoration: underline;} 
  29.     .ip-attack{width:600px; margin:200px auto 0;} 
  30.     .ip-attack dl{ background:#fff; padding:30px; border-radius:10px;border: 1px solid #CDCDCD;-webkit-box-shadow: 0 0 8px #CDCDCD;-moz-box-shadow: 0 0 8px #cdcdcd;box-shadow: 0 0 8px #CDCDCD;} 
  31.     .ip-attack dt{text-align:center;} 
  32.     .ip-attack dd{font-size:16px; color:#333; text-align:center;} 
  33.     .tips{text-align:center; font-size:14px; line-height:50px; color:#999;} 
  34.   </style> 
  35. <?php }?> 
  36.     
  37. </head> 
  38. <body> 
  39.   <div class="ip-attack"><dl> 
  40.     <?php switch ($code) {?> 
  41.       <?php case 1:?> 
  42.       <dt style="color: green"><?php echo(strip_tags($msg));?></dt> 
  43.       <?php break;?> 
  44.       <?php case 0:?> 
  45.       <dt style="color: red"><?php echo(strip_tags($msg));?></dt> 
  46.       <?php break;?> 
  47.     <?php } ?> 
  48.     <br> 
  49.     <dt> 
  50.       页面自动 <a id="href" href="<?php echo($url);?>" rel="external nofollow" >跳转</a> 等待时间： <b id="wait"><?php echo($wait);?></b> 
  51.     </dt></dl> 
  52.   </div> 
  53.   <script type="text/javascript"> 
  54.     (function(){ 
  55.       var wait = document.getElementById('wait'), 
  56.         href = document.getElementById('href').href; 
  57.       var interval = setInterval(function(){ 
  58.         var time = --wait.innerHTML; 
  59.         if(time <= 0) { 
  60.           location.href = href; 
  61.           clearInterval(interval); 
  62.         }; 
  63.       }, 1000); 
  64.     })(); 
  65.   </script> 
  66. </body> 
  67. </html> 

3、over over over！！！

Tags: TP5页面跳转样式

分享到：

推荐文章

热门文章

最新评论文章