jquery实现联想词搜索框和搜索结果分页的示例
程序员文章站
2022-06-11 16:02:04
index.htm
index.htm
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>demo</title>
<link href="css/suggest.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<link href="css/pagination.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<style type="text/css">
em{font-style:normal;color: red;font-weight: bold}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
$('.isearchsug').bind('keypress',function(event){
if(event.keycode == "13"){
dosearch();
}
});
});
function page(page_id){
var total = pageselectcallback(page_id);
if(total==0){
$("#pagination").html("");
}
else{
//调用分页函数，将分页插件绑定到id为pagination的div上
$("#pagination").pagination(total, { //recordcount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
callback: pageselectcallback, //点击分页时，调用的回调函数
prev_text: '<上一页', //显示上一页按钮的文本
next_text: '下一页>', //显示下一页按钮的文本
items_per_page:10, //每页显示的项数
num_display_entries:6, //分页插件中间显示的按钮数目
current_page:page_id, //当前页索引
num_edge_entries:2 //分页插件左右两边显示的按钮数目
});
}
}
//点击分页时调用的函数，page_id为当前页的索引
function pageselectcallback(pageindex)
{
var temp="";
var total=0;
var q = $("#isearch").val();
var t = $("#type").val();
alert(t);
var p = pageindex+1;
// var p = pageindex;
$.ajax({
async:false,
datatype: "json",
type: "post",
url: "http://10.18.224.102/edusearch/search/search",
data: {
"q":q,
"t":t,
"n":10,
"p":p
},
//发送请求前，显示加载动画
beforesend:function(){$("#divload").show();$("#datas #pagination").hide()},
//请求完毕后，隐藏加载动画
complete:function(){$("#divload").hide();$("#datas #pagination").show()},
success: function(data,textstatus,jqxhr) {
// alert(data);
if(data!=null&&data!=""){
var obj = eval(data);
if(obj.retcode==0){
var items = obj.items;
// for(var i=0;i<items.length;i++){
// if(items[i]!=null){
// alert(items[i].name);
// }
// }
var json=items;//json数据
total=obj.total;//记录总数
if(json==null||json==undefined){
$("#datas").html("");
}
else{
$.each(json,function(index,item){
// temp+="<div id='datas' classdivclass=\"d_out\" onmouseover=\"this.classname='d_over'\" "+
// "onmouseout=\"this.classname='d_out'\" style='padding: 10px 15px 12px 15px;'>"+
// "<strong> <a style='font-size: 20px;font-famliy: 宋体;color:#333;' href='"+item.user_id+"' target='_blank'>"+
// item.user_name+"</a></strong>"+
// "<div style='font-size: 12px; font-famliy: 宋体; '>"+"part_id:"+item.part_id+" </div>"+
// "<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+
// "user_id:"+item.user_id+" </div></div><hr />";
temp+=eval('(' + item + ')')+"<hr />";
});
$("#datas").html(temp); //将创建的新行附加在div中
}
}
}
},
error : function() {
alert("搜索失败！");
}
});
return total;
}
function pageclick(pageindex, total, spaninterval){
var total = pageselectcallback(pageindex);
if(total!=0){
var intpageindex = parseint(pageindex);
//创建分页
//将总记录数结果 得到 总页码数
var pages = total;
if (pages % 10 == 0)
pages = pages / 10;
else
pages = parseint(total / 10) + 1;
var $pager = $("#pagination");
//清楚分页div中的内容
$("#pagination span").remove();
$("#pagination a").remove();
//添加第一页
if (intpageindex == 1)
$pager.append("<span class='disabled'>第一页</span>");
else {
var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () {
pageclick($(this).attr('first'), total, spaninterval);
return false;
});
$pager.append(first);
}
//添加上一页
if (intpageindex == 1)
$pager.append("<span class='disabled'>上一页</span>");
else {
var pre = $("<a href='javascript:void(0)' pre='" + (intpageindex - 1) + "'>上一页</a>").click(function () {
pageclick($(this).attr('pre'), total, spaninterval);
return false;
});
$pager.append(pre);
}
//设置分页的格式 这里可以根据需求完成自己想要的结果
var interval = parseint(spaninterval); //设置间隔
var start = math.max(1, intpageindex - interval); //设置起始页
var end = math.min(intpageindex + interval, pages)//设置末页
if (intpageindex < interval + 1) {
end = (2 * interval + 1) > pages ? pages : (2 * interval + 1);
}
if ((intpageindex + interval) > pages) {
start = (pages - 2 * interval) < 1 ? 1 : (pages - 2 * interval);
}
//生成页码
for (var j = start; j < end + 1; j++) {
if (j == intpageindex) {
var spanselectd = $("<span class='current'>" + j + "</span>");
$pager.append(spanselectd);
} //if
else {
var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {
pageclick($(this).text(), total, spaninterval);
return false;
});
$pager.append(a);
} //else
} //for
//上一页
if (intpageindex == total) {
$pager.append("<span class='disabled'>下一页</span>");
}
else {
var next = $("<a href='javascript:void(0)' next='" + (intpageindex + 1) + "'>下一页</a>").click(function () {
pageclick($(this).attr("next"), total, spaninterval);
return false;
});
$pager.append(next);
}
//最后一页
if (intpageindex == pages) {
$pager.append("<span class='disabled'>最后一页</span>");
}
else {
var last = $("<a href='javascript:void(0)' last='" + pages + "'>最后一页</a>").click(function () {
pageclick($(this).attr("last"), total, spaninterval);
return false;
});
$pager.append(last);
}
}
}
function dosearch(){
// var total = pageselectcallback(1);
// pageclick(1, total, 3);
page(0);
}
</script>
</head>
<body>
<div id="content">
<form autocomplete="off" action="result.jsp" method="post">
<p>
<label>search:</label>
<input type="text" id="isearch" name="isearch" class="isearchsug"/>
<select id="type" name="type">
<option value="00">全部</option>
<option value="01">用户</option>
<option value="02">圈子</option>
<option value="03">消息动态</option>
<option value="04">门户</option>
<option value="05">--资源--</option>
<option value="0521"> -教案</option>
<option value="0522"> -学案</option>
<option value="0523"> -课件</option>
<option value="0525"> -同步试卷</option>
<option value="0526"> -录课通</option>
<option value="0527"> -微视频</option>
<option value="06">作业</option>
<option value="07">问答</option>
<option value="08">课程</option>
<option value="09">问答</option>
</select>
<input type="submit" value="用户搜索"/>
</p>
</form>
<div class="page">
<div style="margin: 10px 0;"></div>
<div id="datas">
</div>
<div id="divload" style="text-align: center">
</div>
<div id="pagination" class="digg"></div>
</div>
</div>
</body>
</html>
result.jsp
<%@page language="java" pageencoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>demo</title>
<link href="css/suggest.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<link href="css/pagination.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
<style type="text/css">
em{font-style:normal;color: red;font-weight: bold}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
<%
request.setcharacterencoding("utf-8");
string isearch = "";
isearch = request.getparameter("isearch");
if(isearch!=null&&isearch!=""){
%>
dosearch();
<%
}
%>
// $('.isearchsug').bind('keypress',function(event){
// if(event.keycode == "13"){
// dosearch();
// }
// });
});
/**
* 对象转json数组
*/
function arraytojson(o) {
var r = [];
if (o==undefined||o==null) return "null";
if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
if (typeof o == "object") {
if (!o.sort) {
for (var i in o)
r.push("\""+ i +"\""+ ":" + arraytojson(o[i]));
if (!!document.all && !/^\n?function\s*tostring\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.tostring)) {
r.push("tostring:" + o.tostring.tostring());
}
r = "{" + r.join() + "}";
} else {
for (var i = 0; i < o.length; i++) {
r.push(arraytojson(o[i]));
}
r = "[" + r.join() + "]";
}
return r;
}
return o.tostring();
}
function page(page_id){
var total = pageselectcallback(page_id);
if(total==0){
$("#pagination").html("");
}
else{
//调用分页函数，将分页插件绑定到id为pagination的div上
$("#pagination").pagination(total, { //recordcount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
callback: pageselectcallback, //点击分页时，调用的回调函数
prev_text: '<上一页', //显示上一页按钮的文本
next_text: '下一页>', //显示下一页按钮的文本
items_per_page:10, //每页显示的项数
num_display_entries:6, //分页插件中间显示的按钮数目
current_page:page_id, //当前页索引
num_edge_entries:2 //分页插件左右两边显示的按钮数目
});
}
}
//点击分页时调用的函数，page_id为当前页的索引
function pageselectcallback(pageindex)
{
var temp="";
var total=0;
var q = $("#isearch").val();
var t = $("#type").val();;
var p = pageindex+1;
// var p = pageindex;
$.ajax({
async:false,
datatype: "json",
type: "post",
url: "http://10.18.224.102/edusearch/search/search",
data: {
"q":q,
"t":t,
"n":10,
"p":p
},
//发送请求前，显示加载动画
beforesend:function(){$("#divload").show();$("#datas #pagination").hide()},
//请求完毕后，隐藏加载动画
complete:function(){$("#divload").hide();$("#datas #pagination").show()},
success: function(data,textstatus,jqxhr) {
// alert(data);
if(data!=null&&data!=""){
var obj = eval(data);
if(obj.retcode==0){
var items = obj.items;
// for(var i=0;i<items.length;i++){
// if(items[i]!=null){
// alert(items[i].name);
// }
// }
var json=items;//json数据
total=obj.total;//记录总数
if(json==null||json==undefined){
$("#datas").html("");
}
else{
$.each(json,function(index,item){
// temp+="<div id='datas' classdivclass=\"d_out\" onmouseover=\"this.classname='d_over'\" "+
// "onmouseout=\"this.classname='d_out'\" style='padding: 10px 15px 12px 15px;'>"+
// "<strong> <a style='font-size: 20px;font-famliy: 宋体;color:#333;' href='"+item.user_id+"' target='_blank'>"+
// item.user_name+"</a></strong>"+
// "<div style='font-size: 12px; font-famliy: 宋体; '>"+"part_id:"+item.part_id+" </div>"+
// "<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+
// "user_id:"+item.user_id+" </div></div><hr />";
temp+=arraytojson(item)+"<hr />";
});
$("#datas").html(temp); //将创建的新行附加在div中
}
}
}
},
error : function() {
alert("搜索失败！");
}
});
return total;
}
function pageclick(pageindex, total, spaninterval){
var total = pageselectcallback(pageindex);
if(total!=0){
var intpageindex = parseint(pageindex);
//创建分页
//将总记录数结果 得到 总页码数
var pages = total;
if (pages % 10 == 0)
pages = pages / 10;
else
pages = parseint(total / 10) + 1;
var $pager = $("#pagination");
//清楚分页div中的内容
$("#pagination span").remove();
$("#pagination a").remove();
//添加第一页
if (intpageindex == 1)
$pager.append("<span class='disabled'>第一页</span>");
else {
var first = $("<a href='javascript:void(0)' first='" + 1 + "'>第一页</a>").click(function () {
pageclick($(this).attr('first'), total, spaninterval);
return false;
});
$pager.append(first);
}
//添加上一页
if (intpageindex == 1)
$pager.append("<span class='disabled'>上一页</span>");
else {
var pre = $("<a href='javascript:void(0)' pre='" + (intpageindex - 1) + "'>上一页</a>").click(function () {
pageclick($(this).attr('pre'), total, spaninterval);
return false;
});
$pager.append(pre);
}
//设置分页的格式 这里可以根据需求完成自己想要的结果
var interval = parseint(spaninterval); //设置间隔
var start = math.max(1, intpageindex - interval); //设置起始页
var end = math.min(intpageindex + interval, pages)//设置末页
if (intpageindex < interval + 1) {
end = (2 * interval + 1) > pages ? pages : (2 * interval + 1);
}
if ((intpageindex + interval) > pages) {
start = (pages - 2 * interval) < 1 ? 1 : (pages - 2 * interval);
}
//生成页码
for (var j = start; j < end + 1; j++) {
if (j == intpageindex) {
var spanselectd = $("<span class='current'>" + j + "</span>");
$pager.append(spanselectd);
} //if
else {
var a = $("<a href='javascript:void(0)'>" + j + "</a>").click(function () {
pageclick($(this).text(), total, spaninterval);
return false;
});
$pager.append(a);
} //else
} //for
//上一页
if (intpageindex == total) {
$pager.append("<span class='disabled'>下一页</span>");
}
else {
var next = $("<a href='javascript:void(0)' next='" + (intpageindex + 1) + "'>下一页</a>").click(function () {
pageclick($(this).attr("next"), total, spaninterval);
return false;
});
$pager.append(next);
}
//最后一页
if (intpageindex == pages) {
$pager.append("<span class='disabled'>最后一页</span>");
}
else {
var last = $("<a href='javascript:void(0)' last='" + pages + "'>最后一页</a>").click(function () {
pageclick($(this).attr("last"), total, spaninterval);
return false;
});
$pager.append(last);
}
}
}
function dosearch(){
// var total = pageselectcallback(1);
// pageclick(1, total, 3);
page(0);
}
</script>
</head>
<body>
<div id="content">
<form autocomplete="off" action="result.jsp" method="post">
<p>
<label>search:</label>
<input type="text" id="isearch" name="isearch" class="isearchsug" value="<%=isearch%>"/>
<select id="type" name="type">
<option value="00" <c:if test="${param.type=='00'}">selected</c:if>>全部</option>
<option value="01" <c:if test="${param.type=='01'}">selected</c:if>>用户</option>
<option value="02" <c:if test="${param.type=='02'}">selected</c:if>>圈子</option>
<option value="03" <c:if test="${param.type=='03'}">selected</c:if>>消息动态</option>
<option value="04" <c:if test="${param.type=='04'}">selected</c:if>>门户</option>
<option value="05" <c:if test="${param.type=='05'}">selected</c:if>>--资源--</option>
<option value="0521" <c:if test="${param.type=='0521'}">selected</c:if>> -教案</option>
<option value="0522" <c:if test="${param.type=='0522'}">selected</c:if>> -学案</option>
<option value="0523" <c:if test="${param.type=='0523'}">selected</c:if>> -课件</option>
<option value="0525" <c:if test="${param.type=='0525'}">selected</c:if>> -同步试卷</option>
<option value="0526" <c:if test="${param.type=='0526'}">selected</c:if>> -录课通</option>
<option value="0527" <c:if test="${param.type=='0527'}">selected</c:if>> -微视频</option>
<option value="06" <c:if test="${param.type=='06'}">selected</c:if>>作业</option>
<option value="07" <c:if test="${param.type=='07'}">selected</c:if>>问答</option>
<option value="08" <c:if test="${param.type=='08'}">selected</c:if>>课程</option>
<option value="09" <c:if test="${param.type=='09'}">selected</c:if>>问答</option>
</select>
<input type="submit" value="用户搜索"/>
</p>
</form>
<div class="page">
<div style="margin: 10px 0;"></div>
<div id="datas">
</div>
<div id="divload" style="text-align: center">
</div>
<div id="pagination" class="digg"></div>
</div>
</div>
</body>
</html>
suggest.htm
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>demo</title> <link href="css/suggest.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/suggest.js"></script> </head> <body> <div id="content"> <form> <p> <label>search:</label> <input type="text" class="isearchsug"/><input type="submit" value="submit"/> </p> </form> </div> </body> </html>
jquery.autocomplete.css
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0a246a;
color: white;
}
pagination.css
div.digg {padding: 3px; margin: 3px; text-align: center; font-family:verdana; font-size:12px;}
div.digg a { border: #aaaadd 1px solid; padding:2px 5px; margin: 2px; color: #000099; text-decoration: none}
div.digg a:hover {border: #000099 1px solid; color: #000; }
div.digg a:active {border: #000099 1px solid; color: #000; }
div.digg span.current {border: #000099 1px solid; padding:2px 5px; font-weight: bold; margin: 2px; color: #fff;background-color: #000099}
div.digg span.disabled { border: #eee 1px solid; padding:2px 5px; margin: 2px; color: #ddd; padding-top: 2px;}
/*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; font-family:verdana; font-size:12px;
}
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(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:0px;margin:0px; text-align:center; font-family:verdana; font-size:12px;
}
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 scott style pagination*/
div.scott {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:verdana; font-size:12px;
}
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; font-family:verdana; font-size:12px;
}
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; font-family:verdana; font-size:12px;
}
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; font-family:verdana; font-size:12px;
}
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 green-black style pagination*/
div.green-black {
padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; font-family:verdana; font-size:12px;
}
div.green-black a {
border-right: #2c2c2c 1px solid; padding-right: 5px; border-top: #2c2c2c 1px solid; padding-left: 5px; background: url(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(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(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(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 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; font-family:verdana; font-size:12px;
}
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 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
}
/*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
}
jquery.autocomplete.js
$().ready(function() {
if($("input[type=text]").hasclass('isearchsug')){
$( ".isearchsug" ).iautocomplete("http://10.18.224.45:8080/lenovo/lenovo", {
selectfirst: false,
matchsubset:false,
scroll:false
});
}
});
;(function($) {
$.fn.extend({
iautocomplete: function(urlordata, options) {
var isurl = typeof urlordata == "string";
options = $.extend({}, $.iautocompleter.defaults, {
url: isurl ? urlordata : null,
data: isurl ? null : urlordata,
delay: isurl ? $.iautocompleter.defaults.delay : 10,
max: options && !options.scroll ? 10 : 150
}, options);
// if highlight is set to false, replace it with a do-nothing function
options.highlight = options.highlight || function(value) { return value; };
// if the formatmatch option is not specified, then use formatitem for backwards compatibility
options.formatmatch = options.formatmatch || options.formatitem;
return this.each(function() {
new $.iautocompleter(this, options);
});
},
result: function(handler) {
return this.bind("result", handler);
},
search: function(handler) {
return this.trigger("search", [handler]);
},
flushcache: function() {
return this.trigger("flushcache");
},
setoptions: function(options){
return this.trigger("setoptions", [options]);
},
unautocomplete: function() {
return this.trigger("unautocomplete");
}
});
$.iautocompleter = function(input, options) {
var key = {
up: 38,
down: 40,
del: 46,
tab: 9,
return: 13,
esc: 27,
comma: 188,
pageup: 33,
pagedown: 34,
backspace: 8
};
// create $ object for input element
var $input = $(input).attr("autocomplete", "off").addclass(options.inputclass);
var timeout;
var previousvalue = "";
var cache = $.iautocompleter.cache(options);
var hasfocus = 0;
var lastkeypresscode;
var config = {
mousedownonselect: false
};
var select = $.iautocompleter.select(options, input, selectcurrent, config);
var blocksubmit;
// prevent form submit in opera when selecting with return key
$.browser.opera && $(input.form).bind("submit.iautocomplete", function() {
if (blocksubmit) {
blocksubmit = false;
return false;
}
});
// only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".iautocomplete", function(event) {
// a keypress means the input has focus
// avoids issue where input had focus before the autocomplete was applied
hasfocus = 1;
// track last key pressed
lastkeypresscode = event.keycode;
switch(event.keycode) {
case key.up:
event.preventdefault();
if ( select.visible() ) {
select.prev();
} else {
onchange(0, true);
}
break;
case key.down:
event.preventdefault();
if ( select.visible() ) {
select.next();
} else {
onchange(0, true);
}
break;
case key.pageup:
event.preventdefault();
if ( select.visible() ) {
select.pageup();
} else {
onchange(0, true);
}
break;
case key.pagedown:
event.preventdefault();
if ( select.visible() ) {
select.pagedown();
} else {
onchange(0, true);
}
break;
// matches also semicolon
case options.multiple && $.trim(options.multipleseparator) == "," && key.comma:
case key.tab:
case key.return:
if( selectcurrent() ) {
// stop default to prevent a form submit, opera needs special handling
event.preventdefault();
blocksubmit = true;
return false;
}
break;
case key.esc:
select.hide();
break;
default:
cleartimeout(timeout);
timeout = settimeout(onchange, options.delay);
break;
}
}).focus(function(){
// track whether the field has focus, we shouldn't process any
// results if the field no longer has focus
hasfocus++;
}).blur(function() {
hasfocus = 0;
if (!config.mousedownonselect) {
hideresults();
}
}).click(function() {
// show select when clicking in a focused field
if ( hasfocus++ > 1 && !select.visible() ) {
onchange(0, true);
}
}).bind("search", function() {
// todo why not just specifying both arguments?
var fn = (arguments.length > 1) ? arguments[1] : null;
function findvaluecallback(q, data) {
var result;
if( data && data.length ) {
for (var i=0; i < data.length; i++) {
if( data[i].result.tolowercase() == q.tolowercase() ) {
result = data[i];
break;
}
}
}
if( typeof fn == "function" ) fn(result);
else $input.trigger("result", result && [result.data, result.value]);
}
$.each(trimwords($input.val()), function(i, value) {
request(value, findvaluecallback, findvaluecallback);
});
}).bind("flushcache", function() {
cache.flush();
}).bind("setoptions", function() {
$.extend(options, arguments[1]);
// if we've updated the data, repopulate
if ( "data" in arguments[1] )
cache.populate();
}).bind("input", function() {
onchange(0,true);
}).bind("unautocomplete", function() {
select.unbind();
$input.unbind();
$(input.form).unbind(".iautocomplete");
}).bind("change", function() {
$input.search(
function (result){
$input.trigger("result", result && [result.data, result.value]);
}
);
});
function selectcurrent() {
var selected = select.selected();
if( !selected )
return false;
var v = selected.result;
previousvalue = v;
if ( options.multiple ) {
var words = trimwords($input.val());
if ( words.length > 1 ) {
var seperator = options.multipleseparator.length;
var cursorat = $(input).selection().start;
var wordat, progress = 0;
$.each(words, function(i, word) {
progress += word.length;
if (cursorat <= progress) {
wordat = i;
return false;
}
progress += seperator;
});
words[wordat] = v;
// todo this should set the cursor to the right position, but it gets overriden somewhere
//$.autocompleter.selection(input, progress + seperator, progress + seperator);
v = words.join( options.multipleseparator );
}
v += options.multipleseparator;
}
$input.val(v);
hideresultsnow();
$input.trigger("result", [selected.data, selected.value]);
return true;
}
function onchange(crap, skipprevcheck) {
if( lastkeypresscode == key.del ) {
select.hide();
return;
}
var currentvalue = $input.val();
if ( !skipprevcheck && currentvalue == previousvalue )
return;
previousvalue = currentvalue;
currentvalue = lastword(currentvalue);
if ( currentvalue.length >= options.minchars) {
$input.addclass(options.loadingclass);
if (!options.matchcase)
currentvalue = currentvalue.tolowercase();
request(currentvalue, receivedata, hideresultsnow);
} else {
stoploading();
select.hide();
}
};
function trimwords(value) {
if (!value)
return [""];
if (!options.multiple)
return [$.trim(value)];
return $.map(value.split(options.multipleseparator), function(word) {
return $.trim(value).length ? $.trim(word) : null;
});
}
function lastword(value) {
if ( !options.multiple )
return value;
var words = trimwords(value);
if (words.length == 1)
return words[0];
var cursorat = $(input).selection().start;
if (cursorat == value.length) {
words = trimwords(value)
} else {
words = trimwords(value.replace(value.substring(cursorat), ""));
}
return words[words.length - 1];
}
// fills in the input box w/the first match (assumed to be the best match)
// q: the term entered
// svalue: the first matching result
function autofill(q, svalue){
// autofill in the complete box w/the first match as long as the user hasn't entered in more data
// if the last user key pressed was backspace, don't autofill
if( options.autofill && (lastword($input.val()).tolowercase() == q.tolowercase()) && lastkeypresscode != key.backspace ) {
// fill in the value (keep the case the user has typed)
$input.val($input.val() + svalue.substring(lastword(previousvalue).length));
// select the portion of the value not typed by the user (so the next character will erase)
$(input).selection(previousvalue.length, previousvalue.length + svalue.length);
}
};
function hideresults() {
cleartimeout(timeout);
timeout = settimeout(hideresultsnow, 200);
};
function hideresultsnow() {
var wasvisible = select.visible();
select.hide();
cleartimeout(timeout);
stoploading();
if (options.mustmatch) {
// call search and run callback
$input.search(
function (result){
// if no value found, clear the input box
if( !result ) {
if (options.multiple) {
var words = trimwords($input.val()).slice(0, -1);
$input.val( words.join(options.multipleseparator) + (words.length ? options.multipleseparator : "") );
}
else {
$input.val( "" );
$input.trigger("result", null);
}
}
}
);
}
};
function receivedata(q, data) {
if ( data && data.length && hasfocus ) {
stoploading();
select.display(data, q);
autofill(q, data[0].value);
select.show();
} else {
hideresultsnow();
}
};
function request(term, success, failure) {
if (!options.matchcase)
term = term.tolowercase();
var data = cache.load(term);
// recieve the cached data
if (data && data.length) {
success(term, data);
// if an ajax url has been supplied, try loading the data now
} else if( (typeof options.url == "string") && (options.url.length > 0) ){
var extraparams = {
timestamp: +new date()
};
$.each(options.extraparams, function(key, param) {
extraparams[key] = typeof param == "function" ? param() : param;
});
$.ajax({
// try to leverage ajaxqueue plugin to abort previous requests
mode: "abort",
// limit abortion to this input
port: "iautocomplete" + input.name,
datatype: options.datatype,
url: options.url,
data: $.extend({
q: lastword(term),
limit: options.max
}, extraparams),
success: function(data) {
var parsed = options.parse && options.parse(data) || parse(data);
cache.add(term, parsed);
success(term, parsed);
}
});
} else {
// if we have a failure, we need to empty the list -- this prevents the the [tab] key from selecting the last successful match
select.emptylist();
failure(term);
}
};
function parse(data) {
var parsed = [];
// var rows = data.split("\n");
if(data==null||data==""){
return parsed;
}
var obj = eval(data);
var arr = obj.lenovowords;
var rows = arr;
for (var i=0; i < rows.length; i++) {
var row = $.trim(rows[i]);
if (row) {
row = row.split("|");
parsed[parsed.length] = {
data: row,
value: row[0],
result: options.formatresult && options.formatresult(row, row[0]) || row[0]
};
}
}
return parsed;
};
function stoploading() {
$input.removeclass(options.loadingclass);
};
};
$.iautocompleter.defaults = {
inputclass: "ac_input",
resultsclass: "ac_results",
loadingclass: "ac_loading",
minchars: 1,
delay: 400,
matchcase: false,
matchsubset: true,
matchcontains: false,
cachelength: 10,
max: 100,
mustmatch: false,
extraparams: {},
selectfirst: true,
formatitem: function(row) { return row[0]; },
formatmatch: null,
autofill: false,
width: 0,
multiple: false,
multipleseparator: ", ",
highlight: function(value, term) {
return value.replace(new regexp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
},
scroll: true,
scrollheight: 180
};
$.iautocompleter.cache = function(options) {
var data = {};
var length = 0;
function matchsubset(s, sub) {
if (!options.matchcase)
s = s.tolowercase();
var i = s.indexof(sub);
if (options.matchcontains == "word"){
i = s.tolowercase().search("\\b" + sub.tolowercase());
}
if (i == -1) return false;
return i == 0 || options.matchcontains;
};
function add(q, value) {
if (length > options.cachelength){
flush();
}
if (!data[q]){
length++;
}
data[q] = value;
}
function populate(){
if( !options.data ) return false;
// track the matches
var stmatchsets = {},
nulldata = 0;
// no url was specified, we need to adjust the cache length to make sure it fits the local data store
if( !options.url ) options.cachelength = 1;
// track all options for minchars = 0
stmatchsets[""] = [];
// loop through the array and create a lookup structure
for ( var i = 0, ol = options.data.length; i < ol; i++ ) {
var rawvalue = options.data[i];
// if rawvalue is a string, make an array otherwise just reference the array
rawvalue = (typeof rawvalue == "string") ? [rawvalue] : rawvalue;
var value = options.formatmatch(rawvalue, i+1, options.data.length);
if ( value === false )
continue;
var firstchar = value.charat(0).tolowercase();
// if no lookup array for this character exists, look it up now
if( !stmatchsets[firstchar] )
stmatchsets[firstchar] = [];
// if the match is a string
var row = {
value: value,
data: rawvalue,
result: options.formatresult && options.formatresult(rawvalue) || value
};
// push the current match into the set list
stmatchsets[firstchar].push(row);
// keep track of minchars zero items
if ( nulldata++ < options.max ) {
stmatchsets[""].push(row);
}
};
// add the data items to the cache
$.each(stmatchsets, function(i, value) {
// increase the cache size
options.cachelength++;
// add to the cache
add(i, value);
});
}
// populate any existing data
settimeout(populate, 25);
function flush(){
data = {};
length = 0;
}
return {
flush: flush,
add: add,
populate: populate,
load: function(q) {
if (!options.cachelength || !length)
return null;
/*
* if dealing w/local data and matchcontains than we must make sure
* to loop through all the data collections looking for matches
*/
if( !options.url && options.matchcontains ){
// track all matches
var csub = [];
// loop through all the data grids for matches
for( var k in data ){
// don't search through the stmatchsets[""] (minchars: 0) cache
// this prevents duplicates
if( k.length > 0 ){
var c = data[k];
$.each(c, function(i, x) {
// if we've got a match, add it to the array
if (matchsubset(x.value, q)) {
csub.push(x);
}
});
}
}
return csub;
} else
// if the exact item exists, use it
if (data[q]){
return data[q];
} else
if (options.matchsubset) {
for (var i = q.length - 1; i >= options.minchars; i--) {
var c = data[q.substr(0, i)];
if (c) {
var csub = [];
$.each(c, function(i, x) {
if (matchsubset(x.value, q)) {
csub[csub.length] = x;
}
});
return csub;
}
}
}
return null;
}
};
};
$.iautocompleter.select = function (options, input, select, config) {
var classes = {
active: "ac_over"
};
var listitems,
active = -1,
data,
term = "",
needsinit = true,
element,
list;
// create results
function init() {
if (!needsinit)
return;
element = $("<div/>")
.hide()
.addclass(options.resultsclass)
.css("position", "absolute")
.appendto(document.body);
list = $("<ul/>").appendto(element).mouseover( function(event) {
if(target(event).nodename && target(event).nodename.touppercase() == 'li') {
active = $("li", list).removeclass(classes.active).index(target(event));
$(target(event)).addclass(classes.active);
}
}).click(function(event) {
$(target(event)).addclass(classes.active);
select();
// todo provide option to avoid setting focus again after selection? useful for cleanup-on-focus
input.focus();
return false;
}).mousedown(function() {
config.mousedownonselect = true;
}).mouseup(function() {
config.mousedownonselect = false;
});
if( options.width > 0 )
element.css("width", options.width);
needsinit = false;
}
function target(event) {
var element = event.target;
while(element && element.tagname != "li")
element = element.parentnode;
// more fun with ie, sometimes event.target is empty, just ignore it then
if(!element)
return [];
return element;
}
function moveselect(step) {
listitems.slice(active, active + 1).removeclass(classes.active);
moveposition(step);
var activeitem = listitems.slice(active, active + 1).addclass(classes.active);
if(options.scroll) {
var offset = 0;
listitems.slice(0, active).each(function() {
offset += this.offsetheight;
});
if((offset + activeitem[0].offsetheight - list.scrolltop()) > list[0].clientheight) {
list.scrolltop(offset + activeitem[0].offsetheight - list.innerheight());
} else if(offset < list.scrolltop()) {
list.scrolltop(offset);
}
}
};
function moveposition(step) {
active += step;
if (active < 0) {
active = listitems.size() - 1;
} else if (active >= listitems.size()) {
active = 0;
}
}
function limitnumberofitems(available) {
return options.max && options.max < available
? options.max
: available;
}
function filllist() {
list.empty();
var max = limitnumberofitems(data.length);
for (var i=0; i < max; i++) {
if (!data[i])
continue;
var formatted = options.formatitem(data[i].data, i+1, max, data[i].value, term);
if ( formatted === false )
continue;
var li = $("<li/>").html( options.highlight(formatted, term) ).addclass(i%2 == 0 ? "ac_even" : "ac_odd").appendto(list)[0];
$.data(li, "ac_data", data[i]);
}
listitems = list.find("li");
if ( options.selectfirst ) {
listitems.slice(0, 1).addclass(classes.active);
active = 0;
}
// apply bgiframe if available
if ( $.fn.bgiframe )
list.bgiframe();
}
return {
display: function(d, q) {
init();
data = d;
term = q;
filllist();
},
next: function() {
moveselect(1);
},
prev: function() {
moveselect(-1);
},
pageup: function() {
if (active != 0 && active - 8 < 0) {
moveselect( -active );
} else {
moveselect(-8);
}
},
pagedown: function() {
if (active != listitems.size() - 1 && active + 8 > listitems.size()) {
moveselect( listitems.size() - 1 - active );
} else {
moveselect(8);
}
},
hide: function() {
element && element.hide();
listitems && listitems.removeclass(classes.active);
active = -1;
},
visible : function() {
return element && element.is(":visible");
},
current: function() {
return this.visible() && (listitems.filter("." + classes.active)[0] || options.selectfirst && listitems[0]);
},
show: function() {
var offset = $(input).offset();
element.css({
width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(),
top: offset.top + input.offsetheight,
left: offset.left
}).show();
if(options.scroll) {
list.scrolltop(0);
list.css({
maxheight: options.scrollheight,
overflow: 'auto'
});
if($.browser.msie && typeof document.body.style.maxheight === "undefined") {
var listheight = 0;
listitems.each(function() {
listheight += this.offsetheight;
});
var scrollbarsvisible = listheight > options.scrollheight;
list.css('height', scrollbarsvisible ? options.scrollheight : listheight );
if (!scrollbarsvisible) {
// ie doesn't recalculate width when scrollbar disappears
listitems.width( list.width() - parseint(listitems.css("padding-left")) - parseint(listitems.css("padding-right")) );
}
}
}
},
selected: function() {
var selected = listitems && listitems.filter("." + classes.active).removeclass(classes.active);
return selected && selected.length && $.data(selected[0], "ac_data");
},
emptylist: function (){
list && list.empty();
},
unbind: function() {
element && element.remove();
}
};
};
$.fn.selection = function(start, end) {
if (start !== undefined) {
return this.each(function() {
if( this.createtextrange ){
var selrange = this.createtextrange();
if (end === undefined || start == end) {
selrange.move("character", start);
selrange.select();
} else {
selrange.collapse(true);
selrange.movestart("character", start);
selrange.moveend("character", end);
selrange.select();
}
} else if( this.setselectionrange ){
this.setselectionrange(start, end);
} else if( this.selectionstart ){
this.selectionstart = start;
this.selectionend = end;
}
});
}
var field = this[0];
if ( field.createtextrange ) {
var range = document.selection.createrange(),
orig = field.value,
teststring = "<->",
textlength = range.text.length;
range.text = teststring;
var caretat = field.value.indexof(teststring);
field.value = orig;
this.selection(caretat, caretat + textlength);
return {
start: caretat,
end: caretat + textlength
}
} else if( field.selectionstart !== undefined ){
return {
start: field.selectionstart,
end: field.selectionend
}
}
};
})(jquery);
jquery.pagination.js
/**
* this jquery plugin displays pagination links inside the selected elements.
*
* @author gabriel birke (birke *at* d-scribe *dot* de)
* @version 1.2
* @param {int} maxentries number of entries to paginate
* @param {object} opts several options (see readme for documentation)
* @return {object} jquery object
*/
jquery.fn.pagination = function(maxentries, opts){
opts = jquery.extend({
items_per_page:10,
num_display_entries:10,
current_page:0,
num_edge_entries:0,
link_to:"#",
prev_text:"prev",
next_text:"next",
ellipse_text:"...",
prev_show_always:true,
next_show_always:true,
callback:function(){return false;}
},opts||{});
return this.each(function() {
/**
* 计算最大分页显示数目
*/
function numpages() {
return math.ceil(maxentries/opts.items_per_page);
}
/**
* 极端分页的起始和结束点，这取决于current_page 和 num_display_entries.
* @返回 {数组(array)}
*/
function getinterval() {
var ne_half = math.ceil(opts.num_display_entries/2);
var np = numpages();
var upper_limit = np-opts.num_display_entries;
var start = current_page>ne_half?math.max(math.min(current_page-ne_half, upper_limit), 0):0;
var end = current_page>ne_half?math.min(current_page+ne_half, np):math.min(opts.num_display_entries, np);
return [start,end];
}
/**
* 分页链接事件处理函数
* @参数 {int} page_id 为新页码
*/
function pageselected(page_id, evt){
current_page = page_id;
drawlinks();
var continuepropagation = opts.callback(page_id, panel);
if (!continuepropagation) {
if (evt.stoppropagation) {
evt.stoppropagation();
}
else {
evt.cancelbubble = true;
}
}
return continuepropagation;
}
/**
* 此函数将分页链接插入到容器元素中
*/
function drawlinks() {
panel.empty();
var interval = getinterval();
var np = numpages();
// 这个辅助函数返回一个处理函数调用有着正确page_id的pageselected。
var getclickhandler = function(page_id) {
return function(evt){ return pageselected(page_id,evt); }
}
//辅助函数用来产生一个单链接(如果不是当前页则产生span标签)
var appenditem = function(page_id, appendopts){
page_id = page_id<0?0:(page_id<np?page_id:np-1); // 规范page id值
appendopts = jquery.extend({text:page_id+1, classes:""}, appendopts||{});
if(page_id == current_page){
var lnk = jquery("<span class='current'>"+(appendopts.text)+"</span>");
}else{
var lnk = jquery("<a>"+(appendopts.text)+"</a>")
.bind("click", getclickhandler(page_id))
.attr('href', opts.link_to.replace(/__id__/,page_id));
}
if(appendopts.classes){lnk.addclass(appendopts.classes);}
panel.append(lnk);
}
// 产生"previous"-链接
if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
appenditem(current_page-1,{text:opts.prev_text, classes:"prev"});
}
// 产生起始点
if (interval[0] > 0 && opts.num_edge_entries > 0)
{
var end = math.min(opts.num_edge_entries, interval[0]);
for(var i=0; i<end; i++) {
appenditem(i);
}
if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
{
jquery("<span>"+opts.ellipse_text+"</span>").appendto(panel);
}
}
// 产生内部的些链接
for(var i=interval[0]; i<interval[1]; i++) {
appenditem(i);
}
// 产生结束点
if (interval[1] < np && opts.num_edge_entries > 0)
{
if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
{
jquery("<span>"+opts.ellipse_text+"</span>").appendto(panel);
}
var begin = math.max(np-opts.num_edge_entries, interval[1]);
for(var i=begin; i<np; i++) {
appenditem(i);
}
}
// 产生 "next"-链接
if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
appenditem(current_page+1,{text:opts.next_text, classes:"next"});
}
}
//从选项中提取current_page
var current_page = opts.current_page;
//创建一个显示条数和每页显示条数值
maxentries = (!maxentries || maxentries < 0)?1:maxentries;
opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
//存储dom元素，以方便从所有的内部结构中获取
var panel = jquery(this);
// 获得附加功能的元素
this.selectpage = function(page_id){ pageselected(page_id);}
this.prevpage = function(){
if (current_page > 0) {
pageselected(current_page - 1);
return true;
}
else {
return false;
}
}
this.nextpage = function(){
if(current_page < numpages()-1) {
pageselected(current_page+1);
return true;
}
else {
return false;
}
}
// 所有初始化完成，绘制链接
drawlinks();
// 回调函数
opts.callback(current_page, this);
});
}
以上这篇jquery实现联想词搜索框和搜索结果分页的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
上一篇： 利用jQuery动态设置单选框的选中
下一篇： Ai绘制漂亮的小花朵图标