discuz 开发手机版及相关技术

discuz需要做的操作:

1.discuz后台–界面—风格管理创建mobile的风格

2.discuz后台–界面—模板管理创建新的mobile模板

相应的在discuz源码的/templates/下面创建mobile目录

discuz/include/global.func.php创建function

function isMobile(){ $mobile_browser =0; if (strpos(strtolower($_SERVER[‘HTTP_USER_AGENT’]),’mobile’)>0) { $mobile_browser++; } if($mobile_browser >0){ return true; }else{ return false; } }

作为判断是否是移动版本包括ipad

在discuz/include/common.inc.php 档案里面做相应的判断

if(isMobile()){ $styleid = 34; }

改变styleid的值新创建的mobile风格id为34。

———————————————————-技术点———————————————————————————

1.手机版和网页版的切换使用cookie来做处理

设置手机版和网页版的button

网页版button点击事件为

<mce:script type=”text/javascript”><!–jQuery(document).ready(function() { jQuery(“#netReplace”).click(function(){ document.cookie=”mobileCookie=1″; location.href=”/”; });});// –></mce:script>

php做相应cookie的判断

if(empty($_COOKIE[“mobileCookie”])){ if(isMobile()){ $styleid = 34; }}

手机版button点击事件

<mce:script type=”text/javascript”><!–jQuery(document).ready(function() { jQuery(“#wapReplace”).click(function(){ document.cookie = “mobileCookie=;”; location.href=”/”; });});// –></mce:script>

———————————————————————————————————————————————-

2.仿facebook sina微博的loadmore

<mce:script language=”javascript”><!– jQuery(document).ready(function() { pageflag = {page:2,setFlag:function(f){this.page=f;}} jQuery(window).scroll(function(){ var i = jQuery(document).height() – jQuery(window).height(); var j = i – jQuery(window).scrollTop(); if ((j == 60) || (j == 0)){ var maxpage = Math.ceil({$threadcount}/{$tpp}); if(maxpage >= pageflag.page){ jQuery(‘.is-loading’).css(“display”,”block”); loadMoreThread(); } } }); function loadMoreThread(){ //alert(pageflag.page); jQuery.get(‘forumdisplay.php?fid={$fid}&page=’+pageflag.page+’&ajax=1&styleid=34’, function(data) { jQuery(‘#loadmore’).before(data); jQuery(‘.is-loading’).css(“display”,”none”); pageflag.setFlag(pageflag.page+1); }); } }); // –></mce:script>

html 代码

<ul> <li id=”loadmore”></li> </ul> <div class=”is-loading” ></p> <p>————————————————————————————————————————————————-</p> </p> <p>3.手机地址栏输入后自动向上隐藏（iphone测试）</p> </p> <p><textarea cols="50" rows="15" name="code" class="php"><mce:script type=”text/javascript” ><!–addEventListener(“load”, function(){ setTimeout(updateLayout, 0);}, false);var currentWidth = 0;function updateLayout(){ if (window.innerWidth != currentWidth) { currentWidth = window.innerWidth; var orient = currentWidth == 320 ? “profile” : “landscape”; document.body.setAttribute(“orient”, orient); setTimeout(function() { window.scrollTo(0, 1); }, 100); }}// –></mce:script>

或者

————————————————————————————————————————————————–

4.iphone 添加到桌面图标使用一下标签

————————————————————————————————————————————————-

5.iphone横屏宽度处理，使用css3完成

两粒种子，一片森林。

相关文章：

你感兴趣的文章：

标签云：