来自 澳门金莎娱乐手机版 2019-11-28 05:45 的文章
当前位置: 金沙澳门官网网址 > 澳门金莎娱乐手机版 > 正文

澳门金莎娱乐手机版美观的弹出日历组件,以j

  帮客之家(www.Bkjia.com)教程 因为项目需要,今天用了一天时间,开发了一个js分页控件自认为还算可以,发到网上请朋友们下载使用,“大家好才是真的好”。首先来看一下运行效果如下图所示。

澳门金莎娱乐手机版 1

没法上传附件,请到以上地址下载

 
  使用也十分的简单首先引入jQuery.js文件然后考入本程序的代码:

下载地址:

以下为引用的内容:
<script type="text/javascript">
function showpage(CountPage,PageSize,CurentPage)
{
var tempHTML="";
if(CountPage<=PageSize)
{
if(CurentPage>1)
{
tempHTML = '<span class="previous"><a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage-1)+')">previous</a></span>';
}
else
{
tempHTML = '<span class="previous"><a href="javascript:">previous</a></span>'
}

for(i=1;i<=CountPage;i++)
{
if(i==CurentPage)
{
tempHTML = tempHTML+'<span class="previous"> <a href="javascript:">'+i+'</a></span>';
}
else
{
tempHTML = tempHTML+'<span><a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a></span>';
}
}
if(CurentPage<CountPage)
{
tempHTML = tempHTML+'<span class="next"><a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage+1)+')">Next</a></span>';
}
else
{
tempHTML = tempHTML+'<span class="next"><a href="javascript:">Next</a></span>';
}
$("#pagelist").html(tempHTML);
return;
}


//头
if(CurentPage>1)
{
tempHTML = '<span class="previous"><a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage-1)+')">previous</a></span>';
}
else
{
tempHTML = '<span class="next"><a href="javascript:">previous</a></span>';
}
if(CurentPage==1)
{
tempHTML = tempHTML+'<span class="next"><a href="javascript:">1</a></span>';
}
else
{
tempHTML = tempHTML+'<span><a href="javascript:showpage('+CountPage+','+PageSize+',1)">1</a></span>';
}
var LeftCount=0;
var RightCount=0;
var IfDOT_L=0;
var IfDOT_R=0;
var middle = parseInt(PageSize/2);


LeftCount=CurentPage-1;
RightCount = CountPage-CurentPage;

if((LeftCount>middle)&&(RightCount>middle))
{
LeftCount = middle;
RightCount= PageSize-1-LeftCount;
IfDOT_L=1;
IfDOT_R=1;
}
else
{
if(LeftCount<RightCount)
{
if(LeftCount>parseInt(PageSize/2))
{
LeftCount = parseInt(PageSize/2);
}
RightCount = PageSize-1-LeftCount;
}
else
{
if(RightCount>parseInt(PageSize/2))
{
RightCount = parseInt(PageSize/2);
}
LeftCount = PageSize-1-RightCount;
}
if(CurentPage-1>LeftCount)
{
IfDOT_L=1;
}
if(CountPage-CurentPage>RightCount)
{
IfDOT_R=1;
}
}

//左侧
if(IfDOT_L==1)
{
tempHTML = tempHTML+"<span>...</span>";
for(i=CurentPage-LeftCount+2;i<CurentPage;i++)
{
tempHTML = tempHTML+'<span><a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a></span>';
}
}
else
{
for(i=2;i<CurentPage;i++)
{
tempHTML = tempHTML+'<span><a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a></span>';
}
}

//当前页
if(CurentPage!=1&&CurentPage!=CountPage)
{
tempHTML = tempHTML+'<span class="next"><a href="javascript:">'+CurentPage+'</a></span>';
}
//右侧
if(IfDOT_R==1)
{
for(i=CurentPage+1;i<CurentPage+RightCount-1;i++)
{
tempHTML = tempHTML+'<span><a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a></span>';
}
tempHTML = tempHTML+"<span>...</span>";
}
else
{
for(i=CurentPage+1;i<CurentPage+RightCount;i++)
{
tempHTML = tempHTML+'<span><a href="javascript:showpage('+CountPage+','+PageSize+','+i+')">'+i+'</a></span>';
}
}


//尾
if(CurentPage==CountPage)
{
tempHTML = tempHTML+'<span class="next"><a href="javascript:">'+CountPage+'</a></span>';
}
else
{
tempHTML = tempHTML+'<span><a href="javascript:showpage('+CountPage+','+PageSize+','+CountPage+')">'+CountPage+'</a></span>';
}
if(CurentPage<CountPage)
{
tempHTML = tempHTML+'<span class="next"><a href="javascript:showpage('+CountPage+','+PageSize+','+eval(CurentPage+1)+')">Next</a></span>';
}
else
{
tempHTML = tempHTML+'<span class="next"><a href="javascript:">Next</a></span>';
}
$("#pagelist").html(tempHTML);
}
</script>

 

 
  调用时主要使用如下调用
  showpage(100,13,4);
  其中第一个参数表示分页总数,第二个参数表示当前页面显示的页码数,第三个参数表示当前页。

一、组件简介

  源文件下载地址:点击下载此文件

lhgcalendar 是一款小巧、高效、美观的弹出日历组件。它的功能虽然不多,但使用非常简单。它是一个非常小巧的组件,代码只有一个文件,大小6K,因此使得它在功能小也 就简单了一些(但个人认为只要在满足使用的情况下,使用更简洁的组件不仅减少了文件的大小,还可提高网页加载的速度,提高组件的运行效率。当然如果你想使 用功能强大的日历组件,网上有很多这样的组件您尽可以去使用。但我认为功能多的组件肯定就有你用不到的功能,这样肯定就浪费了一些宝贵的有限的资源。所以 本组件适用于那些功能要求不多,但要求小巧,高效率的组件的人,个人认为效率还是第一位的)。

  文章来自:

它的主要特点有:

因为项目需要,今天用了一天时间,开发了一个js分页控件自认为还算可以,发到网上请朋友们下载使用,大家好才是真...

  1. 小巧:整个组件代码只有一个文件lhgcalendar.js,大小为5.4K。
  2. 调用简单:你只需要在相应位置添加一个事件来调用主函数即可(参考下面有示列)。
  3. 效率高:你试下就知道了:-)。
  4. 外观还看得过去:呵呵,这个算不上特点,本人界面设计能力差,不过提供的这2种样式还算过得去。
  5. 支持的浏览器:IE6+,Firefox2.0+,Chrome(谷歌浏览器),Opera9.5+,Safari3.0+等。

如果使用上有任何问题可与我共同探讨。我的QQ:463214570 ,blog:

二、组件结构

  1. lhgcalendar.js:组件核心文件,其实也就这一个文件:-)。
  2. skin:包含组件图片文件和样式表文件的文件夹。
  3. skin/default.css:组件默认式表文件。
  4. skin/gray.css:灰以样式的样式表文件。

本文由金沙澳门官网网址发布于澳门金莎娱乐手机版,转载请注明出处:澳门金莎娱乐手机版美观的弹出日历组件,以j

关键词: