88必发客户端:javascript ajax 仿百度分页函数

2016-09-01 10:26:01 88必发客户端

复制代码 代码如下: /** * Ajax分页功能 * 在需要分页的地方添加<ul class="pagination"></ol> * 作为分页组件容器元素。 * pageCount 总页数 * currentPage 当前页数 * container 带有pagination类的ol容器元素 * loadData 用于加载数据的函数 * version 1.0 */ pagination : function(pageCount, currentPage, container, loadData) { this.startPage = 1; this.endPage = pageCount; this.minDisplayPageCount = 5; var c = $(container); var paginationLinks = ""; if(pageCount == 1) { c.css({'visibility': 'hidden'}); return; } if(pageCount > this.minDisplayPageCount + 1) { if(currentPage - this.minDisplayPageCount > 0) { this.startPage = currentPage - this.minDisplayPageCount; } if((currentPage + this.minDisplayPageCount - 1) < pageCount) { this.endPage = currentPage + this.minDisplayPageCount - 1; } else { this.endPage = pageCount; } } paginationLinks += "<ul>"; if(currentPage != 1) { paginationLinks += "<li><a id='prevpage' href='javascript:;' rel='prev'>《上一页</a></li>"; } for(var i = this.startPage; i <= this.endPage; i++) { if(currentPage == i) { paginationLinks += "<li id='page_" + currentPage + "_container'><a id='page_" + i + "' class='current' href='javascript:;'>" + currentPage + "</a></li>"; } else { paginationLinks += "<li id='page_" + i + "_container'><a id='page_" + i + "' href='javascript:;'>" + i + "</a></li>"; } } if(currentPage < pageCount) { paginationLinks += "<li><a id='nextpage' href='javascript:;' rel='next'>下一页》</a></li>"; } paginationLinks += "</ul>"; c.html(paginationLinks); var links = $("#page_number ul li a"); links.each(function(index) { if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) { $(this).click(function(event) { alert(links[index].innerHTML); loadData(curTaskId,"","",parseInt(links[index].innerHTML)); pagination(pageCount, parseInt(links[index].innerHTML), container, loadData); }); } }); var prevPage = $("#prevpage"); var nextPage = $("#nextpage"); c.css({'visibility': 'visible'}); if(prevPage) { prevPage.click(function(event) { loadData(curTaskId,"","",currentPage - 1); pagination(pageCount, currentPage - 1, container, loadData); }); } if(nextPage) { nextPage.click(function(event) { loadData(curTaskId,"","",currentPage + 1); pagination(pageCount, currentPage + 1, container, loadData); }); } } loadData为加载数据的函数,这个函数需要定义一个当前页数的参数,比如: 复制代码 代码如下: var currentPage = 1; loadExamList(currentPage){ //TODO pagination(5,currentPage,$(ul),loadExamList); }; 5是总页数,1是当前页数,$(ul)是要将页码按钮存放的位置,loadExamList是点击上一页、下一页或者页码的时候调用的函数。

IE 6 下,JSP 中 链接问题:<a href="javascript:void(0);" target="mainFrame" onClick="btnHome_onClick()"><javascript>function btnHome_onClick(){window.open("com.mcl.common.main.InitHome.flow","mainFrame");if(winoperate.style.display != "none"){  silde_onClick();  sildebar.style.display='none';  winoperate.style.display='none';}}</javascript>以上代码,在IE6下,不会有任何反应。原因是:void(0) 是一个计算表达式,返回0的结果不会对页面有任何响应;onClick 事件后,还会触发 a 的默认事件:void(0)解决办法:加return false;<a href="javascript:

xml结构如下复制代码 代码如下:<ad><tupian>http://www.seehaha.com/images/060901-150.100.2.gif</tupian><tupian>http://www.seehaha.com/xml/061009-300.100.jpg</tupian><dizhi>http://www.seehaha.com/plan/</dizhi><dizhi>http://www.seehaha.com/va.htm</dizhi></ad>==// JScript 文件    var  Now  =  new  Date();    var  Min  =  Now.getSeconds(); var  i;       if((Min % 2) == 1)//读取秒数,根据奇偶随机轮换,当然也可以改变此处算法增加xml节点数  { i = 1;}  else {  i = 0;  }var url = "xml/ads.xml";String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); }var xmlDoc;//判断是否为Firefox或IE var moz = (typeof document.implementation != 'undefined')   && (typeof document.implementation.createDocument != 'undefined');var ie = (typeof window.ActiveXObject != 'undefined');function importXML(file) { if (moz)  {   xmlDoc = document.implementation.createDocument("", "doc", null);//创建FIREFOX下XML文档对象}  else if (ie)  {   xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0"); xmlDoc.async = false;while( xmlDoc.readyState != 4) {};//创建IE下XML文档对象}  xmlDoc.load(file);}importXML(url);//载入xmlfunction updatetupiandizhi(){if (moz) { var ad = xmlDoc.getElementsByTagName("ad")[0];var tupian; var _tupian = ad.getElementsByTagName("tupian")[i].firstChild.nodeValue;if (_tupian)   tupian = _tupian.Trim();   //得到tupian,dizhi节点下的值   var dizhi;   var _dizhi=ad.getElementsByTagName("dizhi")[i].firstChild.nodeValue;  if(_dizhi) dizhi = _dizhi.Trim();  document.getElementById('tupian').href = tupian;  document.getElementById('dizhi').src = dizhi;  //实现轮换   } else if (ie) {var src = xmlDoc.documentElement.selectNodes("tupian");var href = xmlDoc.documentElement.selectNodes("dizhi");//得到tupian,

onload = function() { var panel = new SelectPanel; var rili = new Kalendar; panel.Create(); rili.Create(panel); panel.Apply(document.form1.a); panel.Apply(document.form1.b); } /* 日历选择类 this.Width = 0; // 设置日历宽度,为零时不指定宽度。 this.Height = 0; // 设置日历高度,为零时不指定高度。 this.BorderColor = "#1095c6"; // 设置日历边框颜色。 this.BackColor = "white"; // 设置日历背景颜色。 this.CapBack = "#d9ebfe"; // 设置日历深色。 this.Tag = doc.createElement("table"); // 日历DOM节点。 this.Create = function(container) // 将日历绑定到指定对象。 */ function Kalendar(win) { if(!win) win = self; var doc = win.document; var _Kalendar = this; this.Width = 0; this.Height = 0; this.BorderColor = "#1095c6"; this.BackColor = "white"; this.CapBack = "#d9ebfe"; this.Tag = doc.createElement("table"); this.Tag.style.cursor = "default"; this.Create = function(container) { if(!container) container = doc.body; this.Parent = container; this.Tag.style.borderCollapse = "collapse"; this.Tag.border = 1; this.Tag.borderColor = this.BorderColor; this.Tag.width = this.Width ? this.Width : ""; this.Tag.height = this.Height ? this.Height : ""; this.Tag.rows[0].cells[0].bgColor = this.CapBack; (container.Tag || container).appendChild(this.Tag); BuildDateFace(new Date(sltNian.value, sltYue.value)); } var today = new Date; var tr = this.Tag.insertRow(); tr.insertCell(); var sltNian = doc.createElement("select"); sltNian.options.add(new Option(today.getFullYear() + "年", today.getFullYear())); InitYearSelect(); function InitYearSelect() { while(sltNian.selectedIndex < 10) sltNian.options.add(new Option(sltNian.options[0].value - 1 + "年", sltNian.options[0].value - 1), 0); while(sltNian.options.length < sltNian.selectedIndex + 11) sltNian.options.add(new Option(sltNian.lastChild.value - 0 + 1 + "年", sltNian.lastChild.value - 0 + 1)); } var sltYue = sltNian.cloneNode(); for(var i = 0; i < 12;) { var opt = new Option(++i + "月", i-1); sltYue.options.add(opt); } sltYue.onchange = function() { BuildDateFace(new Date(sltNian.value, sltYue.value)); } sltNian.onchange = function() { sltYue.onchange(); InitYearSelect(); } sltYue.value = today.getMonth(); sltNian.value = today.getFullYear(); tr.cells[0].appendChild(sltNian); tr.cells[0].appendChild(sltYue); tr.cells[0].colSpan = 7; tr.cells[0].align = "center"; var tBody = this.Tag.tBodies[0]; tBody.insertRow(); for(var i = 0; i < 7; i++) { var td = tBody.rows[1].insertCell(); td.align = "center"; td.appendChild(doc.createTextNode("日一二三四五六".charAt(i))); } tBody.rows[1].cells[0].style.color = "red"; tBody.rows[1].cells[6].style.color = "green"; for(var i = 0; i < 6; i++) { var row = tBody.rows[1].cloneNode(true); tBody.appendChild(row); IRow.apply(row); } tBody.rows[7].deleteCell(); tBody.rows[7].cells[5].colSpan = 2; tBody.rows[7].cells[5].lastChild.data = "清空"; tBody.rows[1].style.fontWeight = "bold"; function IRow() { for(var i = 0; i < this.cells.length; i++) { this.cells[i].onmouseover = function() { if(!IsToday(this.title)) this.bgColor = _Kalendar.CapBack; } this.cells[i].onmouseout = function() { if(!IsToday(this.title)) this.bgColor = ""; } this.cells[i].onclick = function() { _Kalendar.Parent.Owner.value = this.title; _Kalendar.Parent.Tag.style.display = "none"; } } } function IsToday(date) { date = date.split("-"); var year = parseInt(date[0]); var month = parseInt(date[1], 10) - 1; date = parseInt(date[2], 10); return today.getFullYear() == year && today.getMonth() == month && today.getDate() == date; } function BuildDateFace(date) { date.setDate(1); var year = date.getFullYear(); var month = date.getMonth(); var offset = date.getDay(); var maxDate = GetDates(year, month); for(var i = 0; i < maxDate; i++) { var td = _Kalendar.Tag.cells[i + 8 + offset]; td.lastChild.data = i + 1; td.title = [year, (month < 9 ? "0" : "") + (month + 1), (i < 9 ? "0" : "") + (i + 1)].join("-"); td.bgColor = (IsToday(td.title)) ? _Kalendar.CapBack : ""; td.disabled = false; } for(var i = 8 + offset + maxDate; i < _Kalendar.Tag.cells.length - 1; i++) { var td = _Kalendar.Tag.cells[i]; td.title = ""; td.lastChild.data = i - 7 - offset - maxDate; td.disabled = true; } lastMonth = GetDates(year, month - 1); while(offset) { var td = _Kalendar.Tag.cells[8 + (--offset)]; td.title = ""; td.lastChild.data = lastMonth - date.getDay() + offset + 1; td.disabled = true; } } function GetDates(year, month) { if(month < 0) { month = 11; year--; } if(month == 12) { month = 0; year++; } var date = new Date(year, month, 31); return 31 - date.getDate() || 31; } } /* 选择面板类 this.Tag = doc.createElement("div"); // 面板HTML标签 this.Owner = null; // 面板对应的输入框。 this.Width = 0; // 宽度,为0时自适应 this.Height = 0; // 面板高度,为0时自适应 this.BorderColor = "#1095c6"; // 边框颜色 this.BgColor = "white"; // 面板背景颜色 this.Create(container) // 将面板创建到container内 this.Apply(target) // 将面板应用到目标控件。 */ function SelectPanel(win) { if(!win) win = self; var doc = win.document; var _SelectPannel = this; this.Owner = null; this.Tag = doc.createElement("div"); this.Width = 0; this.Height = 0; this.BorderColor = "#1095c6"; this.BgColor = "white"; IMouseEvent.apply(this.Tag); if(!win._PannelList) win._PannelList = [this]; else win._PannelList.push(this); if(!doc.onmousedown) doc.onmousedown = function() { for(var i in win._PannelList) { if(!win._PannelList[i].AllowShow && win._PannelList[i].Tag.style.display != "none" && doc.activeElement.tagName != "SELECT") win._PannelList[i].Tag.style.display = "none"; } } this.Create = function(container) { var style = this.Tag.style; if(this.Width) style.width = this.Width; if(this.Height) style.height = this.Height; style.backgroundColor = this.BgColor; style.border = "1px solid " + this.BorderColor; style.position = "absolute"; style.left = "0px"; style.top = "0px"; style.overflow = "auto"; style.display = "none"; (container || doc.body).appendChild(this.Tag); } this.Apply = function(target) { target.onclick = function() { _SelectPannel.Owner = this; IMouseEvent.apply(target); var x = target.offsetLeft; var y = target.offsetTop + target.offsetHeight + 1; var sender = target; while(sender.offsetParent) { sender = sender.offsetParent; x += sender.offsetLeft; y += sender.offsetTop; } _SelectPannel.Tag.style.left = x + "px"; _SelectPannel.Tag.style.top = y + "px"; _SelectPannel.Tag.style.display = "block"; } } function IMouseEvent() { this.onmouseenter = function() { _SelectPannel.AllowShow = true; } this.onmouseleave = function() { _SelectPannel.AllowShow = false; } } } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 做得比较急,所以没考虑兼容性。 通过两个类实现,一个是面板类,一个是日历类。 由于我开发时所有公共js都是在顶级窗口一次加载的,所以在子窗口创建对象时需要把当前窗口对象传进去,例如: var panel = new parent.parent.SelectPanel(self);如果没传self参数,默认就是加载js的窗口。 marcian 在网上找的那个公历算法有点复杂,呵呵。我获取当前月最大天数,以及当前月第一天是星期几是直接通过JS自带的Date函数来实现的。 复制代码 代码如下:// 获取当月最大天数 //asfman提供更简单的方式:return (new Date(y, m+1, 0)).getDate() function GetDates(year, month) {     var date = new Date(year, month, 31);     return 31 - date.getDate() || 31; } // 获取当月第一天是星期几 function GetFirstDay(year, month) {     return (new Date(year, month, 1)).getDay(); }  /* 下面这部分可以不要,因为即使出现new Date(2007, -1, 31),这种现象,Date会自动转换成Date(2006, 12,

以前我使用js只能判断遍历再获取复制代码 代码如下:<!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><title>jQuery判断复选框的选中个数</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">window.onload = function(){//页面所有元素加载完毕 var btn = document.getElementById("btn");  //获取id为btn的元素(button) btn.onclick = function(){  //给元素添加onclick事件  var arrays = new Array();   //创建一个数组对象  var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)  for(i=0; i < items.length; i++){  //循环这组数据   if(items[i].checked){      //判断是否选中    arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.   }  }  alert( "选中的个数为:"+arrays.length  ); }}</script></head><body><form method="post" action="#"> <input type="checkbox" value="1" name="check" checked="checked"/> <input type="checkbox" value="2" name="check" /> <input type="checkbox" value="3" name="check" checked="checked"/> <input type="button" value="你选中的个数" id="btn"/></form></body></html> 通过jQuery获取checkbox选中项的个数,需要用到jQuery的size()方法或length属性,下面的例子是通过length属性获得checkbox选中项的个数。复制代码 代码如下:<script Language="JScript">function check(){var boxArray = document.getElementsByName('oBox');var total = 0;for(var i=0;i<boxArray.length;i++){if(boxArray[i].checked){total++;}}if(total>0){  if(window.confirm('共选中'+total+'首歌,是否继续?')){    window.open('about:blank','SubWin','');    return true;  }  else{    return false;  }}else{window.alert('没有选择!