jquery.myPagination.js 使用
<link type="text/css" rel="stylesheet" href="${css}/pagination.css" />
<script type="text/javascript" src="${js}/jquery.js"></script>
<script type="text/javascript" src="${js}/jquery.myPagination.js"></script>
<script type="text/javascript">
$(function(){
var countPageNumber = ${page.countPageNumber!1};
if(countPageNumber > 1){
$("#page").myPagination({
currPage: ${page.currentNumber!1},
pageCount: countPageNumber,
pageSize: 5,
click:function(currPage){
$("#currPage").val(currPage);
$("#_form").submit();
}
});
}
});
</script>
以下为jquery.myPagination.js 源码 修改之后的，http://linapex.blog.163.com/ 原作者博客。
/*!
* myPagination Jquery Pagination Plug-in Library v4.0
*
* http://linapex.blog.163.com/blog/static/1892375162011523101954885/
*
* Date: 2011/7/18 19:47
*/
(function($) {
$.fn.myPagination = function(param) {
init(param, $(this));
return $(this);
};
function init(param, obj) {
if (param && param instanceof Object) {
var options;
var currPage;
var pageCount;
var pageSize;
var tempPage;
var defaults = new Object({
currPage : 1,
pageCount : 10,
pageSize : 5,
cssStyle : 'badoo',
ajax : {
on : false,
pageCountId : 'pageCount',
param : {
on : false,
page : 1
},
ajaxStart : function() {
return false
}
},
info : {
first : '首页',
last : '尾页',
next : '下一页',
prev : '上一页',
first_on : true,
last_on : true,
next_on : true,
prev_on : true,
msg_on : true,
link : '#',
msg : '<span> 跳{currText}/{sumPage}页</span>',
text : {
width : '22px'
}
}
});
function getCurrPage() {
if (options.info && options.info.cookie_currPageKey
&& options.info.cookie_currPage) {
var cookie_currPage = $
.cookie(options.info.cookie_currPageKey
+ "_currPage");
if (cookie_currPage != "" && cookie_currPage != null) {
return cookie_currPage
}
}
if (options.currPage) {
return options.currPage
} else {
return defaults.currPage
}
}
function getPageCount() {
if (options.pageCount) {
return options.pageCount
} else {
return defaults.pageCount
}
}
function getPageSize() {
if (options.pageSize) {
return options.pageSize
} else {
return defaults.pageSize
}
}
function getCssStyle() {
if (options.cssStyle) {
return options.cssStyle
} else {
return defaults.cssStyle
}
}
function getAjax() {
if (options.ajax && options.ajax.on) {
return options.ajax
} else {
return defaults.ajax
}
}
function getParam() {
if (options.ajax.param && options.ajax.param.on) {
options.ajax.param.page = currPage;
return options.ajax.param
} else {
defaults.ajax.param.page = currPage;
return defaults.ajax.param
}
}
function getFirst() {
if (options.info && options.info.first_on == false) {
return ""
}
if (options.info && options.info.first_on && options.info.first) {
var str = "<a href='" + getLink() + "' title='1'>"
+ options.info.first + "</a>";
return str
} else {
var str = "<a href='" + getLink() + "' title='1'>"
+ defaults.info.first + "</a>";
return str
}
}
function getLast(pageCount) {
if (options.info && options.info.last_on == false) {
return ""
}
if (options.info && options.info.last_on && options.info.last) {
var str = "<a href='" + getLink() + "' title='" + pageCount
+ "'>" + options.info.last + "</a>";
return str
} else {
var str = "<a href='" + getLink() + "' title='" + pageCount
+ "'>" + defaults.info.last + "</a>";
return str
}
}
function getPrev() {
if (options.info && options.info.prev_on == false) {
return ""
}
if (options.info && options.info.prev) {
return options.info.prev
} else {
return defaults.info.prev
}
}
function getNext() {
if (options.info && options.info.next_on == false) {
return ""
}
if (options.info && options.info.next) {
return options.info.next
} else {
return defaults.info.next
}
}
function getLink() {
if (options.info && options.info.link) {
return options.info.link
} else {
return defaults.info.link
}
}
function getMsg() {
var input = "<input type='text' value='" + currPage + "' >";
if (options.info && options.info.msg_on == false) {
return false
}
if (options.info && options.info.msg) {
var str = options.info.msg;
str = str.replace("{currText}", input);
str = str.replace("{currPage}", currPage);
str = str.replace("{sumPage}", pageCount);
return str
} else {
var str = defaults.info.msg;
str = str.replace("{currText}", input);
str = str.replace("{currPage}", currPage);
str = str.replace("{sumPage}", pageCount);
return str
}
}
function getText() {
var msg = getMsg();
if (msg) {
msg = $(msg)
} else {
return ""
}
var input = msg.children(":text");
if (options.info && options.info.text) {
var css = options.info.text;
for (temp in css) {
var val = eval("css." + temp);
input.css(temp, val)
}
return msg.html()
} else {
var css = defaults.info.text;
for (temp in css) {
var val = eval("css." + temp);
input.css(temp, val)
}
return msg.html()
}
}
function getPageCountId() {
if (options.ajax && options.ajax.pageCountId) {
return options.ajax.pageCountId
} else {
return defaults.ajax.pageCountId
}
}
function getAjaxStart() {
if (options.ajax && options.ajax.ajaxStart) {
options.ajax.ajaxStart()
} else {
defaults.ajax.ajaxStart
}
}
function saveCurrPage(page) {
if (options.info && options.info.cookie_currPageKey
&& options.info.cookie_currPage) {
var key = options.info.cookie_currPageKey + "_currPage";
$.cookie(key, page);
}
}
function getInt(val) {
return parseInt(val);
}
function isCode(val) {
if (val < 1) {
alert("输入值不能小于1");
return false;
}
var patrn = /^[0-9]{1,8}$/;
if (!patrn.exec(val)) {
alert("请输入正确的数字");
return false;
}
if (val > pageCount) {
alert("输入值不能大于总页数");
return false;
}
return true;
}
function updateView() {
currPage = getInt(currPage);
pageCount = getInt(pageCount);
var link = getLink();
var firstPage = lastPage = 1;
if (currPage - tempPage > 0) {
firstPage = currPage - tempPage;
} else {
firstPage = 1;
}
if (firstPage + pageSize > pageCount) {
lastPage = pageCount + 1;
firstPage = lastPage - pageSize;
} else {
lastPage = firstPage + pageSize;
}
var content = "";
content += getFirst();
if (currPage == 1) {
content += "<span class=\"disabled\" title=\"" + getPrev()
+ "\">" + getPrev() + " </span>";
} else {
content += "<a href='" + link + "' title='"
+ (currPage - 1) + "'>" + getPrev() + " </a>";
}
if (firstPage <= 0) {
firstPage = 1;
}
for (firstPage; firstPage < lastPage; firstPage++) {
if (firstPage == currPage) {
content += "<span class=\"current\" title=\""
+ firstPage + "\">" + firstPage + "</span>";
} else {
content += "<a href='" + link + "' title='" + firstPage
+ "'>" + firstPage + "</a>";
}
}
if (currPage == pageCount) {
content += "<span class=\"disabled\" title=\"" + getNext()
+ "\">" + getNext() + " </span>";
} else {
content += "<a href='" + link + "' title='"
+ (currPage + 1) + "'>" + getNext() + " </a>";
}
content += getLast(pageCount);
content += getText();
obj.html(content);
obj.children(":text").keypress(function(event) {
var keycode = event.which;
if (keycode == 13) {
var page = $(this).val();
if (isCode(page)) {
obj.children("a").unbind("click");
obj.children("a").each(function() {
$(this).click(function() {
return false;
});
});
if(options.click){
options.click(page);
return;
}
createView(page);
}
}
});
obj.children("a").each(function(i) {
var page = this.title;
$(this).click(function() {
obj.children("a").unbind("click");
obj.children("a").each(function() {
$(this).click(function() {
return false;
});
});
if(options.click){
options.click(page);
return;
}
createView(page);
$(this).focus();
return false;
});
});
};
function createView(page) {
currPage = page;
saveCurrPage(page);
var ajax = getAjax();
if (ajax.on) {
getAjaxStart();
var varUrl = ajax.url;
var param = getParam();
$.ajax({
url : varUrl,
type : 'GET',
data : param,
contentType : "application/x-www-form-urlencoded;gbk",
async : true,
cache : false,
timeout : 60000,
error : function() {
alert("访问服务器超时，请重试，谢谢！");
},
success : function(data) {
loadPageCount({
dataType : ajax.dataType,
callback : ajax.callback,
data : data
});
updateView();
}
});
} else {
updateView();
}
}
function checkParam() {
if (currPage < 1) {
alert("配置参数错误\n错误代码:-1");
return false
}
if (currPage > pageCount) {
alert("配置参数错误\n错误代码:-2");
return false
}
if (pageSize < 2) {
alert("配置参数错误\n错误代码:-3");
return false
}
return true
}
function loadPageCount(options) {
if (options.dataType) {
var data = options.data;
var resultPageCount = false;
var isB = true;
var pageCountId = getPageCountId();
switch (options.dataType) {
case "json":
data = eval("(" + data + ")");
resultPageCount = eval("data." + pageCountId);
break;
case "xml":
resultPageCount = $(data).find(pageCountId).text();
break;
default:
isB = false;
var callback = options.callback + "(data)";
eval(callback);
resultPageCount = $("#" + pageCountId).val();
break
}
if (resultPageCount) {
pageCount = resultPageCount
}
if (isB) {
var callback = options.callback + "(data)";
eval(callback)
}
}
}
options = param;
currPage = getCurrPage();
pageCount = getPageCount();
pageSize = getPageSize();
tempPage = getInt(pageSize / 2);
var cssStyle = getCssStyle();
obj.addClass(cssStyle);
if (checkParam()) {
updateView();
createView(currPage)
}
}
}
})(jQuery);
pagination.css
/*css digg style pagination*/
div.digg {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.digg a {
border-right: #aaaadd 1px solid; padding-right: 5px; border-top: #aaaadd 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #aaaadd 1px solid; color: #000099; padding-top: 2px; border-bottom: #aaaadd 1px solid; text-decoration: none
}
div.digg a:hover {
border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid
}
div.digg a:active {
border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid
}
div.digg span.current {
border-right: #000099 1px solid; padding-right: 5px; border-top: #000099 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000099 1px solid; color: #fff; padding-top: 2px; border-bottom: #000099 1px solid; background-color: #000099
}
div.digg span.disabled {
border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
/*css yahoo style pagination*/
div.yahoo {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.yahoo a {
border-right: #fff 1px solid; padding-right: 5px; border-top: #fff 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #fff 1px solid; color: #000099; padding-top: 2px; border-bottom: #fff 1px solid; text-decoration: underline
}
div.yahoo a:hover {
border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #000; border-bottom: #000099 1px solid
}
div.yahoo a:active {
border-right: #000099 1px solid; border-top: #000099 1px solid; border-left: #000099 1px solid; color: #f00; border-bottom: #000099 1px solid
}
div.yahoo span.current {
border-right: #fff 1px solid; padding-right: 5px; border-top: #fff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #fff 1px solid; color: #000; padding-top: 2px; border-bottom: #fff 1px solid; background-color: #fff
}
div.yahoo span.disabled {
border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
/*css meneame style pagination*/
div.meneame {
padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 3px; margin: 3px; color: #ff6500; padding-top: 3px; text-align: center
}
div.meneame a {
border-right: #ff9600 1px solid; padding-right: 7px; background-position: 50% bottom; border-top: #ff9600 1px solid; padding-left: 7px; background-image: url(../images/meneame.jpg); padding-bottom: 5px; border-left: #ff9600 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff9600 1px solid; text-decoration: none
}
div.meneame a:hover {
border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794
}
div.meneame a:active {
border-right: #ff9600 1px solid; border-top: #ff9600 1px solid; background-image: none; border-left: #ff9600 1px solid; color: #ff6500; border-bottom: #ff9600 1px solid; background-color: #ffc794
}
div.meneame span.current {
border-right: #ff6500 1px solid; padding-right: 7px; border-top: #ff6500 1px solid; padding-left: 7px; font-weight: bold; padding-bottom: 5px; border-left: #ff6500 1px solid; color: #ff6500; margin-right: 3px; padding-top: 5px; border-bottom: #ff6500 1px solid; background-color: #ffbe94
}
div.meneame span.disabled {
border-right: #ffe3c6 1px solid; padding-right: 7px; border-top: #ffe3c6 1px solid; padding-left: 7px; padding-bottom: 5px; border-left: #ffe3c6 1px solid; color: #ffe3c6; margin-right: 3px; padding-top: 5px; border-bottom: #ffe3c6 1px solid
}
/*css flickr style pagination*/
div.flickr {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.flickr a {
border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none
}
div.flickr a:hover {
border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de
}
div.meneame a:active {
border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de
}
div.flickr span.current {
padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px
}
div.flickr span.disabled {
padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px
}
/*css sabrosus style pagination*/
div.sabrosus {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.sabrosus a {
border-right: #9aafe5 1px solid; padding-right: 5px; border-top: #9aafe5 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #9aafe5 1px solid; color: #2e6ab1; margin-right: 2px; padding-top: 2px; border-bottom: #9aafe5 1px solid; text-decoration: none
}
div.sabrosus a:hover {
border-right: #2b66a5 1px solid; border-top: #2b66a5 1px solid; border-left: #2b66a5 1px solid; color: #000; border-bottom: #2b66a5 1px solid; background-color: lightyellow
}
div.pagination a:active {
border-right: #2b66a5 1px solid; border-top: #2b66a5 1px solid; border-left: #2b66a5 1px solid; color: #000; border-bottom: #2b66a5 1px solid; background-color: lightyellow
}
div.sabrosus span.current {
border-right: navy 1px solid; padding-right: 5px; border-top: navy 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: navy 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: navy 1px solid; background-color: #2e6ab1
}
div.sabrosus span.disabled {
border-right: #929292 1px solid; padding-right: 5px; border-top: #929292 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #929292 1px solid; color: #929292; margin-right: 2px; padding-top: 2px; border-bottom: #929292 1px solid
}
/*css scott style pagination*/
div.scott {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.scott a {
border-right: #ddd 1px solid; padding-right: 5px; border-top: #ddd 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ddd 1px solid; color: #88af3f; margin-right: 2px; padding-top: 2px; border-bottom: #ddd 1px solid; text-decoration: none
}
div.scott a:hover {
border-right: #85bd1e 1px solid; border-top: #85bd1e 1px solid; border-left: #85bd1e 1px solid; color: #638425; border-bottom: #85bd1e 1px solid; background-color: #f1ffd6
}
div.scott a:active {
border-right: #85bd1e 1px solid; border-top: #85bd1e 1px solid; border-left: #85bd1e 1px solid; color: #638425; border-bottom: #85bd1e 1px solid; background-color: #f1ffd6
}
div.scott span.current {
border-right: #b2e05d 1px solid; padding-right: 5px; border-top: #b2e05d 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #b2e05d 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #b2e05d 1px solid; background-color: #b2e05d
}
div.scott span.disabled {
border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
}
/*css quotes style pagination*/
div.quotes {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.quotes a {
border-right: #ddd 1px solid; padding-right: 5px; border-top: #ddd 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ddd 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #ddd 1px solid; text-decoration: none
}
div.quotes a:hover {
border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid
}
div.quotes a:active {
border-right: #a0a0a0 1px solid; padding-right: 5px; border-top: #a0a0a0 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #a0a0a0 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: #a0a0a0 1px solid
}
div.quotes span.current {
border-right: #e0e0e0 1px solid; padding-right: 5px; border-top: #e0e0e0 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #e0e0e0 1px solid; color: #aaa; margin-right: 2px; padding-top: 2px; border-bottom: #e0e0e0 1px solid; background-color: #f0f0f0
}
div.quotes span.disabled {
border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
}
/*css black style pagination*/
div.black {
padding-right: 3px; padding-left: 3px; font-size: 80%; padding-bottom: 10px; margin: 3px; color: #a0a0a0; padding-top: 10px; background-color: #000; text-align: center
}
div.black a {
border-right: #909090 1px solid; padding-right: 5px; background-position: 50% bottom; border-top: #909090 1px solid; padding-left: 5px; background-image: url(bar.gif); padding-bottom: 2px; border-left: #909090 1px solid; color: #c0c0c0; margin-right: 3px; padding-top: 2px; border-bottom: #909090 1px solid; text-decoration: none
}
div.black a:hover {
border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040
}
div.black a:active {
border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; background-image: url(invbar.gif); border-left: #f0f0f0 1px solid; color: #ffffff; border-bottom: #f0f0f0 1px solid; background-color: #404040
}
div.black span.current {
border-right: #ffffff 1px solid; padding-right: 5px; border-top: #ffffff 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ffffff 1px solid; color: #ffffff; margin-right: 3px; padding-top: 2px; border-bottom: #ffffff 1px solid; background-color: #606060
}
div.black span.disabled {
border-right: #606060 1px solid; padding-right: 5px; border-top: #606060 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #606060 1px solid; color: #808080; margin-right: 3px; padding-top: 2px; border-bottom: #606060 1px solid
}
/*css black2 style pagination*/
div.black2 {
padding-right: 7px; padding-left: 7px; padding-bottom: 7px; margin: 3px; padding-top: 7px; text-align: center
}
div.black2 a {
border-right: #000000 1px solid; padding-right: 5px; border-top: #000000 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #000000 1px solid; color: #000000; padding-top: 2px; border-bottom: #000000 1px solid; text-decoration: none
}
div.black2 a:hover {
border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; color: #fff; border-bottom: #000000 1px solid; background-color: #000
}
div.black2 a:active {
border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; color: #fff; border-bottom: #000000 1px solid; background-color: #000
}
div.black2 span.current {
border-right: #000000 1px solid; padding-right: 5px; border-top: #000000 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #000000 1px solid; color: #fff; padding-top: 2px; border-bottom: #000000 1px solid; background-color: #000000
}
div.black2 span.disabled {
border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
/*css black-red style pagination*/
div.black-red {
font-size: 11px; color: #fff; font-family: tahoma, arial, helvetica, sans-serif; background-color: #3e3e3e
}
div.black-red a {
padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #3e3e3e; text-decoration: none
}
div.black-red a:hover {
color: #fff; background-color: #ec5210
}
div.black-red a:active {
color: #fff; background-color: #ec5210
}
div.black-red span.current {
padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #fff; padding-top: 2px; background-color: #313131
}
div.black-red span.disabled {
padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #868686; padding-top: 2px; background-color: #3e3e3e
}
/*css grayr style pagination*/
div.grayr {
padding-right: 2px; padding-left: 2px; font-size: 11px; padding-bottom: 2px; padding-top: 2px; font-family: tahoma, arial, helvetica, sans-serif; background-color: #c1c1c1
}
div.grayr a {
padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #000; padding-top: 2px; background-color: #c1c1c1; text-decoration: none
}
div.grayr a:hover {
color: #000; background-color: #99ffff
}
div.grayr a:active {
color: #000; background-color: #99ffff
}
div.grayr span.current {
padding-right: 5px; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; color: #303030; padding-top: 2px; background-color: #fff
}
div.grayr span.disabled {
padding-right: 5px; padding-left: 5px; padding-bottom: 2px; margin: 2px; color: #797979; padding-top: 2px; background-color: #c1c1c1
}
/*css yellow style pagination*/
div.yellow {
padding-right: 7px; padding-left: 7px; padding-bottom: 7px; margin: 3px; padding-top: 7px; text-align: center
}
div.yellow a {
border-right: #ccc 1px solid; padding-right: 5px; border-top: #ccc 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #ccc 1px solid; color: #000; padding-top: 2px; border-bottom: #ccc 1px solid; text-decoration: none
}
div.yellow a:hover {
border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; color: #000; border-bottom: #f0f0f0 1px solid
}
div.yellow a:active {
border-right: #f0f0f0 1px solid; border-top: #f0f0f0 1px solid; border-left: #f0f0f0 1px solid; color: #000; border-bottom: #f0f0f0 1px solid
}
div.yellow span.current {
border-right: #d9d300 1px solid; padding-right: 5px; border-top: #d9d300 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #d9d300 1px solid; color: #fff; padding-top: 2px; border-bottom: #d9d300 1px solid; background-color: #d9d300
}
div.yellow span.disabled {
border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
/*css jogger style pagination*/
div.jogger {
padding-right: 2px; padding-left: 2px; padding-bottom: 2px; margin: 7px; padding-top: 2px; font-family: "lucida sans unicode", "lucida grande", lucidagrande, "lucida sans", geneva, verdana, sans-serif
}
div.jogger a {
padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #ee4e4e; text-decoration: none
}
div.jogger a:hover {
padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #de1818
}
div.jogger a:active {
padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #fff; padding-top: 0.5em; background-color: #de1818
}
div.jogger span.current {
padding-right: 0.64em; padding-left: 0.64em; padding-bottom: 0.43em; margin: 2px; color: #6d643c; padding-top: 0.5em; background-color: #f6efcc
}
div.jogger span.disabled {
display: none
}
/*css starcraft2 style pagination*/
div.starcraft2 {
padding-right: 3px; padding-left: 3px; font-weight: bold; font-size: 13.5pt; padding-bottom: 3px; margin: 3px; color: #fff; padding-top: 3px; font-family: arial; background-color: #000; text-align: center
}
div.starcraft2 a {
margin: 2px; color: #fa0; background-color: #000; text-decoration: none
}
div.starcraft2 a:hover {
color: #fff; background-color: #000
}
div.starcraft2 a:active {
color: #fff; background-color: #000
}
div.starcraft2 span.current {
font-weight: bold; margin: 2px; color: #fff; background-color: #000
}
div.starcraft2 span.disabled {
margin: 2px; color: #444; background-color: #000
}
/*css tres style pagination*/
div.tres {
padding-right: 7px; padding-left: 7px; font-weight: bold; font-size: 13.2pt; padding-bottom: 7px; margin: 3px; padding-top: 7px; font-family: arial, helvetica, sans-serif; text-align: center
}
div.tres a {
border-right: #d9d300 2px solid; padding-right: 5px; border-top: #d9d300 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #d9d300 2px solid; color: #fff; padding-top: 2px; border-bottom: #d9d300 2px solid; background-color: #d90; text-decoration: none
}
div.tres a:hover {
border-right: #ff0 2px solid; border-top: #ff0 2px solid; border-left: #ff0 2px solid; color: #000; border-bottom: #ff0 2px solid; background-color: #ff0
}
div.tres a:active {
border-right: #ff0 2px solid; border-top: #ff0 2px solid; border-left: #ff0 2px solid; color: #000; border-bottom: #ff0 2px solid; background-color: #ff0
}
div.tres span.current {
border-right: #fff 2px solid; padding-right: 5px; border-top: #fff 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #fff 2px solid; color: #000; padding-top: 2px; border-bottom: #fff 2px solid
}
div.tres span.disabled {
display: none
}
/*css megas512 style pagination*/
div.megas512 {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.megas512 a {
border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #99210b; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none
}
div.megas512 a:hover {
border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #777777
}
div.megas512 a:active {
border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #777777
}
div.megas512 span.current {
padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #99210b; margin-right: 3px; padding-top: 2px
}
div.megas512 span.disabled {
padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px
}
/*css technorati style pagination*/
div.technorati {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.technorati a {
border-right: #ccc 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #ccc 1px solid; padding-left: 6px; font-weight: bold; padding-bottom: 2px; border-left: #ccc 1px solid; color: rgb(66,97,222); margin-right: 3px; padding-top: 2px; border-bottom: #ccc 1px solid; text-decoration: none
}
div.technorati a:hover {
background-image: none; color: #fff; background-color: #4261df
}
div.technorati a:active {
background-image: none; color: #fff; background-color: #4261df
}
div.technorati span.current {
padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #000; margin-right: 3px; padding-top: 2px
}
div.technorati span.disabled {
display: none
}
/*css youtube style pagination*/
div.youtube {
padding-right: 6px; border-top: #9c9a9c 1px dotted; padding-left: 0px; font-size: 13px; padding-bottom: 4px; color: #313031; padding-top: 4px; font-family: arial, helvetica, sans-serif; background-color: #cecfce; text-align: right
}
div.youtube a {
padding-right: 3px; padding-left: 3px; font-weight: bold; padding-bottom: 1px; margin: 0px 1px; color: #0030ce; padding-top: 1px; text-decoration: underline
}
div.youtube a:hover {
}
div.youtube a:active {
}
div.youtube span.current {
padding-right: 2px; padding-left: 2px; padding-bottom: 1px; color: #000; padding-top: 1px; background-color: #fff
}
div.youtube span.disabled {
display: none
}
/*css msdn style pagination*/
div.msdn {
padding-right: 6px; padding-left: 0px; font-size: 13px; padding-bottom: 4px; color: #313031; padding-top: 4px; font-family: verdana,tahoma,arial,helvetica,sans-serif; background-color: #fff; text-align: right
}
div.msdn a {
border-right: #b7d8ee 1px solid; padding-right: 6px; border-top: #b7d8ee 1px solid; padding-left: 5px; padding-bottom: 4px; margin: 0px 3px; border-left: #b7d8ee 1px solid; color: #0030ce; padding-top: 5px; border-bottom: #b7d8ee 1px solid; text-decoration: none
}
div.msdn a:hover {
border-right: #b7d8ee 1px solid; border-top: #b7d8ee 1px solid; border-left: #b7d8ee 1px solid; color: #0066a7; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
}
div.pagination a:active {
border-right: #b7d8ee 1px solid; border-top: #b7d8ee 1px solid; border-left: #b7d8ee 1px solid; color: #0066a7; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
}
div.msdn span.current {
border-right: #b7d8ee 1px solid; padding-right: 6px; border-top: #b7d8ee 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 4px; margin: 0px 3px; border-left: #b7d8ee 1px solid; color: #444444; padding-top: 5px; border-bottom: #b7d8ee 1px solid; background-color: #d2eaf6
}
div.msdn span.disabled {
display: none
}
/*css badoo style pagination*/
div.badoo {
padding-right: 0px; padding-left: 0px; font-size: 13px; padding-bottom: 10px; color: #48b9ef; padding-top: 10px; font-family: arial, helvetica, sans-serif; background-color: #fff; text-align: center
}
div.badoo a {
border-right: #f0f0f0 2px solid; padding-right: 5px; border-top: #f0f0f0 2px solid; padding-left: 5px; padding-bottom: 2px; margin: 0px 2px; border-left: #f0f0f0 2px solid; color: #48b9ef; padding-top: 2px; border-bottom: #f0f0f0 2px solid; text-decoration: none
}
div.badoo a:hover {
border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid
}
div.badoo a:active {
border-right: #ff5a00 2px solid; border-top: #ff5a00 2px solid; border-left: #ff5a00 2px solid; color: #ff5a00; border-bottom: #ff5a00 2px solid
}
div.badoo span.current {
border-right: #ff5a00 2px solid; padding-right: 5px; border-top: #ff5a00 2px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #ff5a00 2px solid; color: #fff; padding-top: 2px; border-bottom: #ff5a00 2px solid; background-color: #ff6c16
}
div.badoo span.disabled {
display: none
}
/*css manu style pagination*/
.manu {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
.manu a {
border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #036cb4; padding-top: 2px; border-bottom: #eee 1px solid; text-decoration: none
}
.manu a:hover {
border-right: #999 1px solid; border-top: #999 1px solid; border-left: #999 1px solid; color: #666; border-bottom: #999 1px solid
}
.manu a:active {
border-right: #999 1px solid; border-top: #999 1px solid; border-left: #999 1px solid; color: #666; border-bottom: #999 1px solid
}
.manu .current {
border-right: #036cb4 1px solid; padding-right: 5px; border-top: #036cb4 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; margin: 2px; border-left: #036cb4 1px solid; color: #fff; padding-top: 2px; border-bottom: #036cb4 1px solid; background-color: #036cb4
}
.manu .disabled {
border-right: #eee 1px solid; padding-right: 5px; border-top: #eee 1px solid; padding-left: 5px; padding-bottom: 2px; margin: 2px; border-left: #eee 1px solid; color: #ddd; padding-top: 2px; border-bottom: #eee 1px solid
}
/*css green-black style pagination*/
div.green-black {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center
}
div.green-black a {
border-right: #2c2c2c 1px solid; padding-right: 5px; border-top: #2c2c2c 1px solid; padding-left: 5px; background: url(../images/image1.gif) #2c2c2c; padding-bottom: 2px; border-left: #2c2c2c 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #2c2c2c 1px solid; text-decoration: none
}
div.green-black a:hover {
border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(../images/image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid
}
div.green-black a:active {
border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(../images/image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid
}
div.green-black span.current {
border-right: #aad83e 1px solid; padding-right: 5px; border-top: #aad83e 1px solid; padding-left: 5px; font-weight: bold; background: url(../images/image2.gif) #aad83e; padding-bottom: 2px; border-left: #aad83e 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #aad83e 1px solid
}
div.green-black span.disabled {
border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid
}
/*css viciao style pagination*/
div.viciao {
margin-top: 20px; margin-bottom: 10px
}
div.viciao a {
border-right: #8db5d7 1px solid; padding-right: 5px; border-top: #8db5d7 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #8db5d7 1px solid; color: #000; margin-right: 2px; padding-top: 2px; border-bottom: #8db5d7 1px solid; text-decoration: none
}
div.viciao a:hover {
border-right: red 1px solid; padding-right: 5px; border-top: red 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: red 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: red 1px solid
}
div.viciao a:active {
border-right: red 1px solid; padding-right: 5px; border-top: red 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: red 1px solid; margin-right: 2px; padding-top: 2px; border-bottom: red 1px solid
}
div.viciao span.current {
border-right: #e89954 1px solid; padding-right: 5px; border-top: #e89954 1px solid; padding-left: 5px; font-weight: bold; padding-bottom: 2px; border-left: #e89954 1px solid; color: #000; margin-right: 2px; padding-top: 2px; border-bottom: #e89954 1px solid; background-color: #ffca7d
}
div.viciao span.disabled {
border-right: #ccc 1px solid; padding-right: 5px; border-top: #ccc 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #ccc 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #ccc 1px solid
}
/*css yahoo2 style pagination*/
div.yahoo2 {
padding-right: 3px; padding-left: 3px; font-size: 0.85em; padding-bottom: 3px; margin: 3px; padding-top: 3px; font-family: tahoma,helvetica,sans-serif; text-align: center
}
div.yahoo2 a {
border-right: #ccdbe4 1px solid; padding-right: 8px; background-position: 50% bottom; border-top: #ccdbe4 1px solid; padding-left: 8px; padding-bottom: 2px; border-left: #ccdbe4 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #ccdbe4 1px solid; text-decoration: none
}
div.yahoo2 a:hover {
border-right: #2b55af 1px solid; border-top: #2b55af 1px solid; background-image: none; border-left: #2b55af 1px solid; color: #fff; border-bottom: #2b55af 1px solid; background-color: #3666d4
}
div.yahoo2 a:active {
border-right: #2b55af 1px solid; border-top: #2b55af 1px solid; background-image: none; border-left: #2b55af 1px solid; color: #fff; border-bottom: #2b55af 1px solid; background-color: #3666d4
}
div.yahoo2 span.current {
padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #000; margin-right: 3px; padding-top: 2px
}
div.yahoo2 span.disabled {
display: none
}
div.yahoo2 a.next {
border-right: #ccdbe4 2px solid; border-top: #ccdbe4 2px solid; margin: 0px 0px 0px 10px; border-left: #ccdbe4 2px solid; border-bottom: #ccdbe4 2px solid
}
div.yahoo2 a.next:hover {
border-right: #2b55af 2px solid; border-top: #2b55af 2px solid; border-left: #2b55af 2px solid; border-bottom: #2b55af 2px solid
}
div.yahoo2 a.prev {
border-right: #ccdbe4 2px solid; border-top: #ccdbe4 2px solid; margin: 0px 10px 0px 0px; border-left: #ccdbe4 2px solid; border-bottom: #ccdbe4 2px solid
}
div.yahoo2 a.prev:hover {
border-right: #2b55af 2px solid; border-top: #2b55af 2px solid; border-left: #2b55af 2px solid; border-bottom: #2b55af 2px solid
}
.load {
background:url(../images/loading.gif) no-repeat left center;
padding:20px;
color:#999;
font-size:12px;
}
p.welcome {
padding:30px 35px 0 35px;
}
p.testimonial {
font-style:italic;
padding:5px 15px 0 5px;
}
.clear {
clear:both;
}
a {
text-decoration:underline;
}
a.read_more {
display:block;
width:66px;
height:23px;
line-height:23px;
text-align:center;
color:#fff;
float:right;
margin:10px 40px 0 0;
padding:0 0 0 17px;
text-decoration:none;
font-size:12px;
background:url(../images/read_more_bg.gif) no-repeat center;
}
a:hover.read_more {
text-decoration:underline;
}
img.left_img {
float:left;
padding:3px 25px 3px 3px;
}
#main_container {
width:821px;
height:auto;
margin:auto;
padding:0px;
}
#header {
width:821px;
height:135px;
margin:0px;
padding:0px;
background:url(../images/header_bg.gif) no-repeat center top;
}
.logo {
padding:30px 0 0 0px;
}
.title {
width: auto;
padding:2px 0 10px 0;
font-size:17px;
color:#2e2721;
font-weight:bold;
}
.title_welcome {
width: auto;
padding:0 0 0 35px;
font-size:22px;
color:#24a4b3;
background:url(../images/checked.gif) no-repeat left top;
margin:0 0 10px 25px;
}
span.red {
font-weight:bold;
color:#da5b23;
}
span.orange {
font-weight:bold;
color:#da5b23;
}
/*---------------- menu tab----------------------*/
.menu {
width:821px;
height:42px;
margin:0px;
background:url(../images/menu_bg.gif) no-repeat left;
}
.menu ul {
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li {
display:inline;
}
.menu ul li a {
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.selected a {
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
background:url(../images/menu_bullet.gif) no-repeat bottom center;
}
.menu ul li a:hover {
background:url(../images/menu_bullet.gif) no-repeat bottom center;
}
/*-------------welcome_box------------*/
.welcome_box {
width:496px;
height:202px;
background:url(../images/welcome_box.gif) no-repeat center;
padding:0px;
}
/*---------------center_content-------*/
.center_content {
width:821px;
height:auto;
clear:both;
padding:25px 0 30px 0;
background-color:#e9e5e2;
}
.center_left {
width:500px;
float:left;
padding:10px 0 10px 10px;
}
.center_right {
width:300px;
float:left;
padding:10px 0 10px 0px;
}
.software_box {
width:187px;
height:265px;
padding:0 0 15px 50px;
}
.features {
padding:10px 0 0 30px;
}
.news_box {
float:left;
width:auto;
border-bottom:1px #CCCCCC dashed;
padding:10px 0 8px 0;
}
.news_icon {
width:30px;
height:33px;
float:left;
background:url(../images/news_icon.gif) no-repeat center;
}
.news_content {
width:400px;
float:left;
text-align:justify;
line-height:20px;
padding:0 0 0 10px;
}
/*-----------------------login_form-------------------*/
.text_box {
width:278px;
height:144px;
padding:15px 0 0 10px;
background:url(../images/text_box.gif) no-repeat center;
background-position:0px 0px;
}
.login_form_row {
float:left;
padding:4px 0 4px 0;
}
label.login_label {
width:70px;
float:left;
padding:3px 5px 0 0;
color:#000;
text-align:right;
}
input.login_input {
width:153px;
height:18px;
float:left;
border:1px #9dbbc6 solid;
background-color:#fff;
color: #000;
}
input.login {
float:right;
padding:10px 20px 0 0;
}
/*----------------------list-------------------------*/
ul.list {
list-style:none;
padding:0px;
margin:0px;
}
ul.list li {
list-style:none;
width: auto;
height: auto;
padding:0px;
margin:8px 0 8px 0;
}
ul.list li a {
height:24px;
width: auto;
padding:0 0 0 15px;
margin:0;
color:#36322b;
text-align:left;
line-height:24px;
text-decoration:none;
}
ul.list li span {
height:24px;
width:24px;
display:block;
padding:0px;
margin:0px;
color:#000;
text-align:center;
float:left;
float:left;
line-height:24px;
background:url(../images/bullet_list.gif) no-repeat left;
}
ul.list li a:hover {
text-decoration:underline;
}
.testimonials {
padding:20px 0 20px 0;
}
/*-------------------footer------------------------*/
#footer {
width:821px;
clear:both;
color:#837d7b;
}
.left_footer {
float:left;
padding:20px 0 0 0;
}
#footer a {
color:#837d7b;
padding:0 8px 0 8px;
text-decoration:none;
}
.right_footer {
float:right;
padding:15px 5px 0 0;
}