存档

文章标签 ‘javascript’

用php写的一个常用分页效果类(含javascript版本)

2020年12月3日 评论已被关闭

来看看php版本

<?php
//使用说明:http://www.zhanghongliang.com/article/1509
class myPage{
	private $url='';
	private $urlPre='';
	private $urlExt='';
	private $language=array('first'=>'首页','pre'=>'上一页','next'=>'下一页','dijiye'=>'第<page>页','last'=>'尾页');
	private $languagePre='';
	private $languageExt='';

	function get($v){
		$rowCount=$v['rowCount'];
		$pageSize=$v['pageSize'];
		$nowPage=$v['nowPage'];
        $pageCountShow=$v['pageCountShow'];
        if(!isset($pageCountShow)){
            $pageCountShow=true;
        }
		$html='';
		$limit='';
		$pageCount=intval(ceil($rowCount/$pageSize));
		if($pageCount==1){//总页只有1页
			$limit='0,'.$pageSize;
		}
		else {
			//当前页小于等于总页,再处理
			if($nowPage<=$pageCount){
				$this->url=$v['url'];
				if(is_array($v['language'])){
					foreach($v['language'] as $languageK=>$languageV){
						$this->language[$languageK]=$languageV;
					}
				}
				$limit=($pageSize*($nowPage-1)).','.$pageSize;
				//计算分页html
				if($nowPage>5) {
					if($nowPage>=$pageCount){
						if($pageCount<9){$starti=1;}
						else {$starti=$pageCount-9;}
						$endi=$pageCount;$page=$pageCount;
					}
					else{
						if($pageCount-$nowPage<=4){
							$starti=$pageCount-9;$endi=$pageCount;
						}
						else{
							$starti=$nowPage-4;$endi=$nowPage+4;
						}
					}
				}
				else {
					$starti=1;
					if($pageCount>10){$endi=10;}
					else{$endi=$pageCount;}
					if(!$nowPage){$nowPage=1;}
				}
				$html='<div id="'.$v['divId'].'">';
				if($nowPage!=1){
					if($nowPage>1){
						$html.='<a title="'.$this->language['first'].'" href="'.$this->pageUrl(1).'">'.$this->language['first'].'</a>';
					}
					$html.='<a title="'.$this->language['pre'].'" href="'.$this->pageUrl($nowPage-1).'">'.$this->language['pre'].'</a>';
				}
				for($pi=$starti;$pi<=$endi;$pi++){
					$html.='<a title="'.$this->dijiYe($pi).'" href="'.((($pi==1 && $nowPage==1) || ($pi==$pageCount && $nowPage==$pageCount))?'###':$this->pageUrl($pi)).'"'.($pi==$nowPage?" class='".$v['onPageClassName']."'":'').'>'.$pi.'</a>';						
				}
				if($nowPage!=$pageCount && $nowPage<$pageCount){
					$html.='<a title="'.$this->language['next'].'" href="'.$this->pageUrl($nowPage+1).'">'.$this->language['next'].'</a>';
				}
				if($pageCount!=$nowPage){
					$html.='<a title="'.$this->language['last'].'" href="'.$this->pageUrl($pageCount).'">'.$this->language['last'].($pageCountShow?'('.$pageCount.')':'').'</a>';
				}
				$html.='</div>';
			}
		}
		return array('limit'=>$limit,'html'=>$html,'pageCount'=>$pageCount);
	}
	function pageUrl($page){
		if($this->urlPre==''){
			$pos=strpos($this->url,'<page>');
			$this->urlPre=substr($this->url,0,$pos);
			$this->urlExt=str_replace('<page>','',substr($this->url,$pos));
		}
		return $this->urlPre.$page.$this->urlExt;
	}
	function dijiYe($page){
		if($this->languagePre==''){
			$pos=strpos($this->language['dijiye'],'<page>');
			$this->languagePre=substr($this->language['dijiye'],0,$pos);
			$this->languageExt=str_replace('<page>','',substr($this->language['dijiye'],$pos));
		}
		return $this->languagePre.$page.$this->languageExt;
	}
}

再来看看JavaScript版本

/**
 * 分页调取方法
 * var pagehtml = pageHtml(obj.data.totalcount,15,1,'/list/<page>.html',true,'on','onPageClassName',{'first':'Home','pre':'Prev','next':'Next','dijiye':'No. <page>','last':'Last'});
 * 返回结果:{limit: "0,15", html: "<div id="pageList"><a title="第1页" href="###" class="on">1</a>...<a title="尾页" href="/list-42/17658.html">尾页(17658)</a></div>", pageCount: 2491}
 * 输出html方法:if(pagehtml){$('#pages').html(pagehtml.html);}
 * @param rowCount 必填,总记录条数
 * @param pageSize 必填,每页多少条数据
 * @param nowPage 必填,当前页,默认为1
 * @param url 必填,url参数会替换<page> 例如:/list-5/<page>.html
 * @param addUrlGetParam 选填,url是否最后追加url参数,默认为false,不追加
 * @param onPageClassName, 必填,当前页的a链接样式名称,会输出<a class="参数值"></a>,默认为on
 * @param divId 必填,用于控制css,会输出<div id="参数值"></div>,默认为pageList
 * @param language 选填,语言包(支持只指定个别) 默认为{'first':'首页','pre':'上一页','next':'下一页','dijiye':'第<page>页','last':'尾页'}
 * @param pageCountShow 选填,是否显示总页数,默认为true
 */
function pageHtml(rowCount,pageSize=15,nowPage=1,url='',addUrlGetParam=false,divId='',onPageClassName='',language='',pageCountShow=true){
	rowCount = isNaN(parseInt(rowCount)) ? 0 : parseInt(rowCount);
	pageSize = isNaN(parseInt(pageSize)) ? 0 : parseInt(pageSize);
	nowPage = isNaN(parseInt(nowPage)) ? 0 : parseInt(nowPage);
	if(rowCount==0 || pageSize==0 || nowPage==0 || url=='' || url==undefined){
		return;
	}
	var pageCount = parseInt(Math.ceil(rowCount / pageSize));
	var htmlStr = '';
	var limit = '';
	if(pageCount <= 1){//总页只有1页
		limit='0,1';
		return {'limit':limit,'html':htmlStr,'pageCount':pageCount};
	}else{
		var lang = {
			'first':'首页',
			'pre':'上一页',
			'next':'下一页',
			'dijiye':'第<page>页',
			'last':'尾页'
		};
		if(language!='' || language!=undefined){
			for (let key in language){
				lang[key] = language[key];
			}
		}
		var endi=pageCount;
		var starti=1;
		var thisParam = window.location.href.split('?')[1];
		var paramStr = (thisParam=='' || thisParam==undefined) ? '' : '?' + (addUrlGetParam ? thisParam : '');
		url = url + paramStr;
		if(onPageClassName=='' || onPageClassName==undefined){
			onPageClassName = 'on';
		}
		if(divId=='' || divId==undefined){
			divId = 'pageList';
		}
		//当前页小于等于总页,再处理
		if(nowPage<=pageCount){
			limit = (pageSize*(nowPage-1))+','+pageSize;
			//计算分页html
			if(nowPage>5) {
				if(nowPage>=pageCount){
					if(pageCount<9){
						starti=1;
					}else{
						starti=pageCount-9;
					}
					endi=pageCount;
				}
				else{
					if(pageCount-nowPage<=4){
						starti=pageCount-9;endi=pageCount;
					}else{
						starti=nowPage-4;endi=nowPage+4;
					}
				}
			}else{
				starti=1;
				if(pageCount>10){
					endi=10;
				}else{
					endi=pageCount;
				}
				if(!nowPage){
					nowPage=1;
				}
			}
			htmlStr='<div id="'+divId+'">';
			if(nowPage!=1){
				if(nowPage>1){
					htmlStr+='<a title="'+lang['first']+'" href="'+url.replace('<page>',1)+'">'+lang['first']+'</a>';
				}
				htmlStr+='<a title="'+lang['pre']+'" href="'+url.replace('<page>',nowPage-1)+'">'+lang['pre']+'</a>';
			}
			for(pi=starti;pi<=endi;pi++){
				htmlStr+='<a title="'+lang['dijiye'].replace('<page>',pi)+'" href="'+(((pi==1 && nowPage==1) || (pi==pageCount && nowPage==pageCount))?'###':url.replace('<page>',pi))+'"'+(pi==nowPage?" class='"+onPageClassName+"'":'')+'>'+pi+'</a>';
			}
			if(nowPage!=pageCount && nowPage<pageCount){
				htmlStr+='<a title="'+lang['next']+'" href="'+url.replace('<page>',nowPage+1)+'">'+lang['next']+'</a>';
			}
			var showPageCount = pageCountShow ? '('+pageCount+')' : '';
			if(pageCount!=nowPage){
				htmlStr+='<a title="'+lang['last']+'" href="'+url.replace('<page>',pageCount)+'">'+lang['last']+showPageCount+'</a>';
			}
			htmlStr+='</div>';
		}
		return {'limit':limit,'html':htmlStr,'pageCount':pageCount};
	}
}

javascript中的ajax跨域取值问题

2013年6月22日 没有评论

做了一个功能,利用ajax效果,但是ajax的处理页面ajax.php非常消耗资源,所以找了个免费空间把ajax.php导入进去,这样就可以节省自身服务器资源,别人光有一个ajax.php其实也没用,对吧,呵呵。
自己的服务器域名是1.aaa.com(二级域名),但是绑定在别人上面的是1.bbb.com
本地测试的程序都没有任何问题,但是为什么上传ajax.php到1.bbb.com上就无法读取数据呢?
百度了一下,原来啊,是ajax跨域取值的问题,这总算找到原因了,找到原因就好解决了啊,下面找到的解决办法:
定义一个函数,用来调取ajax:
function jsonCallBack(url,callback){
$.getScript(url,function(){
callback(json);
});
}
发送ajax请求使用:
jsonCallBack(url,function(json){alert(json.message)});
其中url可以直接使用”ajax.php?act=”中使用参数
然后呢,就到处理ajax跨域的php文件了:
function returnJSON($msg){
$json=json_encode(array(‘message’=>$msg));
echo “var json=$json;”;
//一定要这样定义输出最后的JSON数据,这是利用JS的闭包特性
exit();
}
这样只要调用函数returnJSON即可,这样整体就搞定了ajax跨域取值的问题

css二级导航效果[javascript+div+css实现]

2013年5月18日 没有评论

分享一个css二级导航效果,用javascript和div+css实现的,当然,我们可以完全使用div+css实现。

我用javascript和div+css实现的目的是多样化而已,没什么意义,实际上用纯div+css实现css二级导航效果更理想,更兼容。

下面公布css二级导航效果的源代码,希望对你有用:

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>

/*这里是css代码,简单看下就明白了*/
* {padding:0px;margin:0px;font-size:24px;}
li {list-style:none;}
.navul {width:1000px;margin:0px auto;margin-top:100px;}
.navul li {width:180px;text-align:center;height:44px;line-height:44px;background:red;float:left;margin-left:1px;cursor:pointer;}
.navul li a {color:#fff;display:block;width:100%;height:100%;}
.sunnav {width:1000px;margin:0px auto;position:relative;}
.sunnav ul {position:absolute;top:0px;width:180px;display:none;}
.sunnav ul li {text-align:center;height:30px;line-height:30px;}

.sunnav ul li a {font-size:14px;}
.cl {clear:both;}
#sunnav1 {left:180px;}
#sunnav2 {left:360px;}
#sunnav3 {left:540px;}
</style>
<script type=”text/javascript”>

//这里是javascript代码,如果你是新手,你可能需要研究下,要不然你可能不懂css二级导航效果实现的原理。
function $id(id){return document.getElementById(id);}
function showsun(n){
for(i=1;i<=3;i++){
$id(“sunnav”+i).style.display=’none’;
$id(“praentli”+i).style.background=’red’;
}
$id(“sunnav”+n).style.display=’block’;
$id(“praentli”+n).style.background=’blue’;
}
function realclosesun(){
$id(“sunnav”+nowoutN).style.display=’none’;
$id(“praentli”+nowoutN).style.background=’red’;
}
var nowoutN=0;
var realclosesunTimer;
function closesun(n){
nowoutN=n;
realclosesunTimer=setTimeout(“realclosesun()”,100);
}
function clearRealclosesunTimer(){
clearTimeout(realclosesunTimer);
showsun(nowoutN);
}
</script>
</head>

<body>
<ul>
<li><a href=””>首页</a></li>
<li id=”praentli1″><a onmouseover=”showsun(1)” onmouseout=”closesun(1)” href=””>css导航_父1</a></li>
<li id=”praentli2″><a onmouseover=”showsun(2)” onmouseout=”closesun(2)” href=””>css导航_父2</a></li>
<li id=”praentli3″><a onmouseover=”showsun(3)” onmouseout=”closesun(3)” href=””>css导航_父3</a></li>
</ul>
<p></p>
<div>
<ul id=”sunnav1″ onmouseover=”clearRealclosesunTimer()” onmouseout=”realclosesun()”>
<li><a href=””>css导航_子1_1</a></li>
<li><a href=””>css导航_子1_2</a></li>
<li><a href=””>css导航_子1_3</a></li>
</ul>
<ul id=”sunnav2″ onmouseover=”clearRealclosesunTimer()” onmouseout=”realclosesun()”>
<li><a href=””>css导航_子2_1</a></li>
<li><a href=””>css导航_子3_2</a></li>
<li><a href=””>css导航_子3_3</a></li>
</ul>
<ul id=”sunnav3″ onmouseover=”clearRealclosesunTimer()” onmouseout=”realclosesun()”>
<li><a href=””>css导航_子3_1</a></li>
<li><a href=””>css导航_子3_2</a></li>
</ul>
</div>
</body>
</html>

css和div+javascript实现的css二级导航效果就完整实现了,经测试,完整兼容ie6,ie7,ie8,ie9,ff+,chrome+

css.php