以下是 购酒网jquery分类导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购酒网jquery分类导航</title>
<script src="script/global.js" type="text/javascript"></script>
<script src="script/head.js" type="text/javascript"></script>
</head>
<body>
<link rel="stylesheet" href="style/base.css" />
<link rel="stylesheet" href="style/head.css" />
<div class="headNav">
<div class="navCon w1020">
<div class="navCon-cate fl navCon_on">
<div class="navCon-cate-title"> <a href="#">全部商品分类</a></div>
<div class="cateMenu hide">
<ul>
<li style="border-top: none;">
<div class="cate-tag"> <strong><a href="#">白酒</a></strong>
<div class="listModel">
<p> <a href="#">茅台</a> <a href="#">洋河</a> <a href="#">郎酒</a> <a href="#">古井贡酒</a> </p>
<p> <a href="#">习酒</a> <a href="#">珍酒</a> <a href="#">红星</a> <a href="#">泸州老窖</a> </p>
<p> <a href="#">沱牌</a> <a href="#">国台</a> <a href="#">五粮液</a> <a href="#">剑南春</a> </p>
</div>
</div>
<div class="list-item hide">
<ul class="itemleft">
<dl>
<dt>品牌</dt>
<dd> <a href="#">茅台</a> <a href="#">五粮液</a> <a href="#">剑南春</a> <a href="#">水井坊</a> <a href="#">汾酒</a> <a href="#">洋河</a> <a href="#">泸州老窖</a> <a href="#">珍酒</a> <a href="#">郎酒</a> <a href="#">古井贡酒</a> <a href="#">西凤酒</a> <a href="#">董酒</a> <a href="#">酒鬼酒</a> <a href="#">红星</a> <a href="#">文君酒</a> <a href="#">牛栏山</a> <a href="#">四特酒</a> <a href="#">口子酒</a><a href="#">星河湾</a> <a href="#">百年传奇</a> </dd>
</dl>
<div class="fn-clear"></div>
<dl>
<dt>香型</dt>
<dd> <a href="#">酱香型</a> <a href="#">浓香型</a> <a href="#">清香型</a> <a href="#">凤香型</a> <a href="#">馥郁香</a> <a href="#">董香型</a> <a href="#">特香型</a> <a href="#">芝麻香</a> <a href="#">兼香型</a> <a href="#">金门香型</a> <a href="#">老干白</a> <a href="#">绵柔型</a> <a href="#">柔和型</a> <a href="#">小曲型</a> <a href="#">生态竹香型</a> </dd>
</dl>
<div class="fn-clear"></div>
</ul>
<ul class="itemright">
<dl>
<dt>促销信息</dt>
</dl>
<div class="news-list">
<p> <span class="red">[杜康]</span> <a href="#">酒体窖香幽雅、陈香舒适,只需156元，值得一试的好酒</a> </p>
<p> <span class="red">[红星]</span> <a href="#">经典红星153元热销千瓶，敢于全网誓比价！</a> </p>
<p> <span class="red">[太白]</span> <a href="#">中国第一诗酒，全场满200减50</a> </p>
</div>
<dl>
<dt>促销活动</dt>
</dl>
<div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/f011895a50564f6fa4a689b053e9437c.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/67e10be5b9a045d68e01b395b94f57a4.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/3dcc2411eb9847d08e7b80e82d130ebc.jpg' width='210' height='100' /></a> </div>
</ul>
</div>
</li>
<li >
<div class="cate-tag"> <strong><a href="#">葡萄酒</a></strong>
<div class="listModel">
<p> <a href="#">中国</a> <a href="#">法国</a> <a href="#">智利</a> <a href="#">葡萄牙</a> </p>
<p> <a href="#">意大利</a> <a href="#">澳大利亚</a> <a href="#">德国</a> <a href="#">南非</a> </p>
<p> <a href="#">美国</a> <a href="#">阿根廷</a> <a href="#">西班牙</a> </p>
</div>
</div>
<div class="list-item hide">
<ul class="itemleft">
<dl>
<dt>产区</dt>
<dd> <a href="#">澳大利亚</a> <a href="#">德国</a> <a href="#">法国</a> <a href="#">加拿大</a> <a href="#">美国</a> <a href="#">西班牙</a> <a href="#">智利</a> <a href="#">葡萄牙</a> <a href="#">俄罗斯</a> <a href="#">阿根廷</a> <a href="#">新西兰</a> <a href="#">南非</a> <a href="#">意大利</a> <a href="#">中国</a> <a href="#">希腊</a> </dd>
</dl>
<div class="fn-clear"></div>
<dl>
<dt>类型</dt>
<dd> <a href="#">红葡萄酒</a> <a href="#">白葡萄酒</a> <a href="#">桃红葡萄酒</a> <a href="#">起泡酒/香槟</a> <a href="#">冰酒/贵腐/甜酒</a> </dd>
</dl>
<div class="fn-clear"></div>
<dl>
<dt>品种</dt>
<dd> <a href="#">芭贝拉</a> <a href="#">长相思</a> <a href="#">解百纳</a> <a href="#">玛尔维萨</a> <a href="#">综合佳酿</a> <a href="#">美乐</a> </dd>
</dl>
<div class="fn-clear"></div>
</ul>
<ul class="itemright">
<dl>
<dt>促销信息</dt>
</dl>
<div class="news-list">
<p> <span class="red">[加州乐事]</span> <a href="#">美国爆款红酒，超市89元，68元特价售</a> </p>
<p> <span class="red">[华尔兹]</span> <a href="#">德国经典款，39元继续热卖中</a> </p>
<p> <span class="red">[贵妇]</span> <a href="#">法国进口红酒，购满6瓶每瓶仅需38元，超值专享价</a> </p>
</div>
<dl>
<dt>促销活动</dt>
</dl>
<div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/c32d2be3c2f345138b717f8a13fed00e.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/294a3235681345b4a097ef769fdb9348.jpg' width='210' height='100' /></a> </div>
</ul>
</div>
</li>
<li >
<div class="cate-tag"> <strong><a href="#">洋酒</a></strong>
<div class="listModel">
<p> <a href="#">格兰威特</a> <a href="#">杰克丹尼</a> <a href="#">轩尼诗</a> </p>
<p> <a href="#">尊尼获加</a> <a href="#">皇家路易</a> <a href="#">百龄坛</a> </p>
</div>
</div>
<div class="list-item hide">
<ul class="itemleft">
<dl>
<dt>品牌</dt>
<dd><a href="#">第林可</a> <a href="#">本尼维斯</a> <a href="#">奇滋</a> <a href="#">奥凯</a> <a href="#">剑威</a> <a href="#">帕夫利季斯</a> <a href="#">佩特雷城堡</a> <a href="#">斯多克</a> <a href="#">爱德华</a> <a href="#">格兰御鹿</a> <a href="#">萨隆公爵</a> </dd>
</dl>
<div class="fn-clear"></div>
<dl>
<dt>酒种</dt>
<dd> <a href="#">白兰地</a> <a href="#">伏特加</a> <a href="#">朗姆酒</a> <a href="#">力娇酒</a> <a href="#">墨西哥烈酒</a> <a href="#">甜酒</a> <a href="#">威士忌</a> <a href="#">金酒</a> <a href="#">利口酒</a> </dd>
</dl>
<div class="fn-clear"></div>
</ul>
<ul class="itemright">
<dl>
<dt>促销信息</dt>
</dl>
<div class="news-list">
<p> <span class="red">[威士忌]</span> <a href="#">芝华士，月销万瓶！</a> </p>
</div>
<dl>
<dt>促销活动</dt>
</dl>
<div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/51ee0f88c7664b099526214a45076686.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/0815723969be40cb8126353991470fb1.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1115/ce2c2e1eae804529b68785bfd92f5a44.jpg' width='210' height='100' /></a> </div>
</ul>
</div>
</li>
<li >
<div class="cate-tag"> <strong><a href="#">黄酒</a></strong>
<div class="listModel">
<p> <a href="#">石库门</a> <a href="#">女儿红</a> <a href="#">古越龙山</a> </p>
</div>
</div>
<div class="list-item hide">
<ul class="itemleft">
<dl>
<dt>品牌</dt>
<dd> <a href="#">石库门</a> <a href="#">和酒</a> <a href="#">古越龙山</a> <a href="#">女儿红</a> <a href="#">沙洲优黄</a> <a href="#">会稽山</a> <a href="#">塔牌</a> <a href="#">乌毡帽</a> <a href="#">唐宋黄酒</a> <a href="#">钱塘人家</a> <a href="#">咸亨黄酒</a> <a href="#">嘉善黄酒</a> <a href="#">绍兴师爷</a> <a href="#">梁祝</a> <a href="#">组合装</a> </dd>
</dl>
<div class="fn-clear"></div>
<dl>
<dt>年份</dt>
<dd> <a href="#">100年</a> <a href="#">10年</a> <a href="#">12年</a> <a href="#">15年</a> <a href="#">18年</a> <a href="#">20年</a> <a href="#">25年</a> <a href="#">30年</a> <a href="#">3年</a> <a href="#">5年</a> <a href="#">6年</a> <a href="#">8年</a> <a href="#">9年</a> <a href="#">常规年份</a> </dd>
</dl>
<div class="fn-clear"></div>
</ul>
<ul class="itemright">
<dl>
<dt>促销活动</dt>
</dl>
<div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/c58fc62653c64cfb8e7b93ce34733535.jpg' width='210' height='100' /></a> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/ee9514f6a1c341efb0889917e51072af.jpg' width='210' height='100' /></a> </div>
</ul>
</div>
</li>
<li >
<div class="cate-tag"> <strong><a href="#">保健酒与啤酒</a></strong>
<div class="listModel">
<p> <a href="#">百威</a> <a href="#">青岛</a> <a href="#">喜力</a> <a href="#">劲酒</a> </p>
</div>
</div>
<div class="list-item hide">
<ul class="itemleft">
<dl>
<dt>品牌</dt>
<dd> <a href="#">百威</a> <a href="#">喜力</a> <a href="#">青岛</a> <a href="#">劲酒</a> <a href="#">黄金酒</a> <a href="#">蓝莓酒</a> <a href="#">银杏</a> <a href="#">春生堂</a> <a href="#">张裕酒</a> <a href="#">丹力</a> <a href="#">桂花酒</a> <a href="#">森林大猫</a> <a href="#">卡力特</a> <a href="#">麒麟</a> <a href="#">凯撒</a> <a href="#">修士</a> <a href="#">黑森马蹄</a> <a href="#">威兰仕</a> <a href="#">科罗娜</a> <a href="#">蓝带</a> <a href="#">布格福斯</a> <a href="#">博瑞克</a> <a href="#">力兹堡</a> <a href="#">嘉士伯</a> <a href="#">美名格</a> <a href="#">阿登堡</a> <a href="#">博德</a> <a href="#">德福堡</a> <a href="#">德力士</a> <a href="#">朗克</a> <a href="#">麦德奥黑</a> <a href="#">威欧</a> <a href="#">威斯玛</a> <a href="#">朝日</a> <a href="#">彼乐</a> <a href="#">白鹳</a> <a href="#">德博</a> <a href="#">庄园主</a> <a href="#">德拉克</a> <a href="#">西藏青稞</a> </dd>
</dl>
<div class="fn-clear"></div>
</ul>
<ul class="itemright">
<dl>
<dt>促销活动</dt>
</dl>
<div class="ad-list mt10"> <a href="#"><img src='http://img0.gjw.com/famous/2013/1108/882341974a8543cf93f2a7d18ff277ab.jpg' width='210' height='100' /></a> </div>
</ul>
</div>
</li>
<li>
<div class="float-list-dnav"> <a href="#">新品</a> <a href="#">清仓</a> <a href="#">多买优惠</a> </div>
</li>
</ul>
</div>
</div>
<div class="navCon-menu fl">
<ul>
<li><a class="curMenu" href="#">首页</a></li>
<li><a href="#">购酒团</a></li>
<li><a href="#">我爱小酒版</a></li>
<li><a href="#">名家鉴赏</a></li>
<li><a href="#">名庄酒窖</a></li>
<li><a href="#">VIP专场</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(head.js):
/*品牌列表*/
var brandArea = function (){
$(".brand_class li").each(function (i){
$(this).mouseenter(function (){
$(this).find("div").stop().animate({
"top":-50}
,300);
}
) $(this).mouseleave(function (){
$(this).find("div").stop().animate({
"top":0}
,300);
}
)}
);
}
$(function (){
//搜索 $("#btnsch").click(function (){
window.location = SiteUrl + '/product/search_jump.htm?key=' + encodeURIComponent($("#sch").val());
}
);
//读取购物车数量 var dd = new Date();
$("#head_cart_no").load("/ajax/head/shoppingcart.htm?act=getcount&d=" + escape(dd));
//head 弹出菜单部分 var cateMenu = function (){
var cateLiNum = $(".cateMenu li").length;
$(".cateMenu li").each(function (index,element){
if (index < cateLiNum - 1){
$(this).mouseenter(function (){
var ty = $(this).offset().top - 158;
var obj = $(this).find(".list-item");
var sh = document.documentElement.scrollTop || document.body.scrollTop;
var oy = ty + (obj.height() + 30) + 158 - sh;
var dest = oy - $(window).height() if (oy > $(window).height()){
ty = ty - dest - 10;
}
if (ty < 0) ty = 0;
$(this).addClass("on");
obj.show();
$(".cateMenu li").find(".list-item").stop().animate({
"top":ty}
);
obj.stop().animate({
"top":ty}
);
}
) $(this).mouseleave(function (){
$(this).removeClass("on");
$(this).find(".list-item").hide();
}
)}
}
);
$(".navCon_on").hover(function (){
$(".cateMenu").show();
}
,function (){
$(".cateMenu").hide();
}
)}
();
var miniMenu = function (){
/*购物列表*/
$(".miniMenu").find(".m1").hover(function (){
$(this).addClass("on");
$(this).find(".mini-cart").show();
var dd = new Date();
$("#head_cart").load("/ajax/head/shoppingcart.htm?act=getitems&d=" + escape(dd));
}
,function (){
$(this).removeClass("on");
$(this).find(".mini-cart").hide();
}
) /*用户中心*/
$(".miniMenu").find(".m3").hover(function (){
$(this).addClass("cur");
$(this).find(".miniMenu-child").show();
}
,function (){
$(this).removeClass("cur");
$(this).find(".miniMenu-child").hide();
}
)}
();
/*topBar置顶*/
var positionMenu = function (id){
var mc = document.getElementById(id);
var minNumber = mc.offsetTop;
var isIE6 = navigator.appVersion.indexOf("MSIE 6") > -1;
$(window).scroll(function (){
var sh = document.documentElement.scrollTop || document.body.scrollTop;
var th = document.documentElement.clientHeight;
if (sh > minNumber){
mc.style.position = !isIE6 ? "fixed":"absolute";
mc.style.top = !isIE6 ? "0px":sh + "px";
}
else{
mc.style.position = "static";
mc.style.top = minNumber + "px"}
}
)}
("topBar") /*快捷搜索*/
// var quickSearch = function (id){
// var that = $("#" + id);
// var tw = document.documentElement.clientWidth;
// var ow = (tw - that.width()) / 2;
// that.css({
"left":ow}
);
// var isIE6 = navigator.appVersion.indexOf("MSIE 6") > -1;
// $(window).scroll(function (){
// var sh = document.documentElement.scrollTop || document.body.scrollTop;
// if (isIE6){
// that.css({
"top":sh + 200}
);
//}
//}
)// $(document).keydown(function (event){
// var e = window.event || event;
// if (e.shiftKey && e.keyCode == 191){
// var sh = isIE6 ? document.documentElement.scrollTop || document.body.scrollTop:0;
// that.css({
"top":150 + sh,"display":"block"}
);
// that.animate({
"top":200 + sh,"opacity":1}
);
//}
// if (e.keyCode == 27){
// closeThis();
//}
//}
);
// that.find(".s_close").click(function (){
// closeThis();
//}
)// function closeThis(){
v .l// that.animate({
"top":150,"opacity":0}
,function (){
// that.css({
"display":"block"}
);
//}
);
//}
//}
("quickSearch")// var tdata = [{
"keyword":"aaaaa"}
,{
"keyword":"bbbbb"}
,{
"keyword":"ccccc"}
,{
"keyword":"ddddd"}
,{
"keyword":"eeeee"}
,{
"keyword":"fffff"}
];
// searchTips.init({
// "inputID":"sch2",// "listID":"search_list_box2",// onChange:function (){
// //alert("AJAX查询");
// searchTips.find(tdata);
//}
,// onSubmit:function (){
// alert("提交查询");
//}
//}
);
}
)/*搜索提示*/
var searchTips ={
keyBoo:false,currentIndex:-1,currentArr:[],box:null,input:null,init:function (obj){
var that = this;
this.input = document.getElementById(obj.inputID);
this.createContent(obj.listID);
this.onChange = obj.onChange || null;
this.onSubmit = obj.onSubmit || null;
this.addKeyBoardEvent();
this.change();
this.addEvent(that.input,"blur",function (){
that.focusout();
}
);
}
,change:function (){
var that = this;
if (that.input.addEventListener){
that.input.addEventListener("input",function (){
that.onChange();
that.keyBoo = true;
}
,false);
}
else if (that.input.attachEvent){
that.input.attachEvent("onpropertychange",function (){
that.onChange();
that.keyBoo = true;
}
);
}
}
,find:function (data){
this.box.parentNode.style.display = "block";
//this.box.style.display = "block";
var ul = this.box.getElementsByTagName("ul")[0];
ul.innerHTML = "";
this.currentArr = [];
this.currentIndex = -1;
for (var i = 0;
i < data.length;
i++){
var li = this.getLi();
li.innerHTML = data[i].keyword;
ul.appendChild(li);
this.currentArr.push(li);
}
}
,createContent:function (sBox){
this.box = document.createElement("div");
this.box.className = "searchTips";
document.getElementById(sBox).appendChild(this.box);
var ul = document.createElement("ul");
this.box.appendChild(ul);
//this.box.style.display = "none";
}
,selectCurrent:function (){
var len = this.currentArr.length;
if (this.currentIndex < 0) this.currentIndex = len - 1;
if (this.currentIndex > len) this.currentIndex = 0;
for (var i = 0;
i < len;
i++){
this.currentArr[i].className = this.currentIndex == i ? "on":"";
}
}
,addKeyBoardEvent:function (){
var that = this;
this.addEvent(document,"keydown",function (e){
if (that.keyBoo){
var e = e || window.event;
switch (e.keyCode){
case 40:that.currentIndex++;
that.selectCurrent();
break;
case 38:that.currentIndex--;
that.selectCurrent();
break;
case 13:if (that.currentIndex != -1){
that.input.value = that.currentArr[that.currentIndex].innerHTML;
}
that.onSubmit();
that.focusout();
break default:break;
}
}
}
)}
,focusout:function (){
var that = this;
setTimeout(function (){
//that.box.style.display = "none";
that.box.parentNode.style.display = "none";
that.keyBoo = false;
}
,100)}
,getLi:function (){
var that = this;
var li = document.createElement("li");
this.addEvent(li,"mouseover",function (){
li.className = "on";
}
);
this.addEvent(li,"mouseout",function (){
li.className = "";
}
);
this.addEvent(li,"click",function (){
that.input.value = li.innerHTML;
that.onSubmit();
}
);
return li;
}
,addEvent:function (obj,type,fn){
if (obj.addEventListener){
obj.addEventListener(type,fn,false);
}
else if (obj.attachEvent){
obj.attachEvent("on" + type,fn);
}
}
}
JS代码(jquery.thickbox.js):
/* dialog */
$(document).ready(TB_launch);
function TB_launch(){
$(".thickbox").click(function (){
var sender = $(this);
var t = sender.attr("title");
var d = sender.attr("dialog");
TB_show(t,d);
sender.blur();
return false;
}
);
}
function TB_show(caption,url){
try{
$("body").append("<div id='TB_overlay'></div><div id='TB_window' style='z-index:9999;
top:100px;
'></div>");
$("#TB_overlay").css("opacity","0.6");
$("#TB_overlay").css("filter","alpha(opacity=60)");
$("#TB_overlay").css("-moz-opacity","0.6");
$(window).resize(TB_position);
$("#TB_overlay").show();
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.aspx|.dom/g;
var urlType = url.match(urlString);
var queryString = url.replace(/^[^\?]+\??/,'');
var params = parseQuery(queryString);
TB_WIDTH = 400;
TB_HEIGHT = 300;
if (queryString.indexOf('width') > -1)TB_WIDTH = (params['width'] * 1) + 30;
if (queryString.indexOf('height') > -1)TB_HEIGHT = (params['height'] * 1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
$("#TB_window").append("<div id='TB_closeAjaxWindow'><span style='float:left'>
" + caption + "</span><a href='#' id='TB_closeWindowButton'>关闭</a></div><div id='TB_ajaxContent' style='width:" + ajaxContentW + "px;
'></div>");
$("#TB_closeWindowButton").click(TB_remove);
if (urlType == '.htm' || urlType == '.html' || urlType == '.aspx'){
$("#TB_ajaxContent").load(url,function (){
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
}
);
}
else if (urlType == '.jpg' || urlType == '.gif'){
$("#TB_ajaxContent").append("<img src='" + url + "'>");
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
}
else if (urlType == '.dom'){
url = url.substring(0,url.indexOf('.dom'));
$('#' + url).show();
$("#TB_ajaxContent").append($('#' + url));
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
}
else{
$("#TB_ajaxContent").append($('#' + url));
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
}
}
catch (e){
alert(e);
}
var s_top = document.body.scrollTop || document.documentElement.scrollTop $("#TB_window").css({
"top":s_top + 50}
)}
function TB_remove(){
$("#TB_window").fadeOut("fast",function (){
var ch = $("#TB_ajaxContent").children().eq(0);
if (ch.attr("remove") == 'false'){
ch.hide();
ch.appendTo($("body"));
}
$('#TB_window,#TB_overlay,#TB_load').remove();
}
);
return false;
}
function TB_position(){
var de = document.documentElement;
var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
var h = self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
var isIE6 = navigator.appVersion.indexOf("MSIE 6") > -1;
if (window.innerHeight && window.scrollMaxY){
yScroll = window.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight > document.body.offsetHeight){
// all but Explorer MacyScroll = document.body.scrollHeight;
}
else{
// Explorer Mac...would also work in Explorer 6 Strict,Mozilla and SafariyScroll = document.body.offsetHeight;
}
var th = isIE6 ? ((h - TB_HEIGHT) / 2) + de.scrollTop:((h - TB_HEIGHT) / 2);
$("#TB_window").css({
width:TB_WIDTH + "px",/* height:TB_HEIGHT + "px",*/
left:((w - TB_WIDTH) / 2) + "px",top:th + "px"}
);
$("#TB_overlay").css("height",yScroll + "px");
}
function parseQuery(query){
var Params = new Object();
if (!query) return Params;
var Pairs = query.split(/[;
&]/);
for (var i = 0;
i < Pairs.length;
i++){
var KeyVal = Pairs[i].split('=');
if (!KeyVal || KeyVal.length != 2) continue;
var key = unescape(KeyVal[0]);
var val = unescape(KeyVal[1]);
val = val.replace(/\+/g,' ');
Params[key] = val;
}
return Params;
}
function showAlert(caption,content,icon,event){
if (event == "") event = null;
var div = $("<div id='divDialogBox'><p class='box_message'>" + content + "</p><p class='box_button'><input type='button' value='确定' id='box_btnok' /></p></div>");
div.find("#box_btnok").unbind("click");
div.find("#box_btnok").click(function (){
TB_remove();
if (event)setTimeout(event,200);
}
);
$("body").append(div);
TB_show(caption,"divDialogBox.dom?width=400;
");
if (!icon || icon == "") icon = "alert";
var bgcolor,frcolor,bgimage;
if (icon == "alert"){
bgcolor = "#FFEDAB";
frcolor = "#78580F";
bgimage = "/image/box_alert.gif";
}
else if (icon == "error"){
bgcolor = "#FFB3B3";
frcolor = "#C01303";
bgimage = "/image/box_error.gif";
}
else if (icon == "correct"){
bgcolor = "#DDEEBA";
frcolor = "#517337";
bgimage = "/image/box_correct.gif";
}
else if (icon == "info"){
bgcolor = "#B5E2F7";
frcolor = "#004484";
bgimage = "/image/box_info.gif";
}
$("#TB_ajaxContent").css("background-color",bgcolor);
$("#divDialogBox .box_message").css("color",frcolor);
$("#divDialogBox .box_message").css("background-image","url('" + bgimage + "')");
}
function showConfirm(caption,content,event){
if (event == "") event = null;
var div = $("<div id='divDialogBox'><p class='box_message'>" + content + "</p><p class='box_button'><input type='button' value='确定' id='box_btnok' /> <input type='button' value='取消' onclick='TB_remove()'></p></div>");
div.find("#box_btnok").unbind("click");
div.find("#box_btnok").click(function (){
TB_remove();
if (event)setTimeout(event,200);
}
);
$("body").append(div);
TB_show(caption,"divDialogBox.dom?width=400;
");
var bgcolor,frcolor,bgimage;
bgcolor = "#FFFFFF";
frcolor = "#333333";
bgimage = "/image/box_confirm.gif";
$("#TB_ajaxContent").css("background-color",bgcolor);
$("#divDialogBox .box_message").css("color",frcolor);
$("#divDialogBox .box_message").css("background-image","url('" + bgimage + "')");
}
CSS代码(help.style.css):
/*页面除去头尾部分全局css*/
#help_top_line{position:relative;height:22px;line-height:22px;color:#888888;border-bottom:1px solid #c0c0c0;margin-bottom:4px;text-align:right;padding-right:32px;}
#help_top_line img{margin-left:5px;}
#plate{position:absolute;right:0;top:7px;display:block;height:21px;width:15px;background:url(../image/plate.gif) no-repeat top left;}
.top_nav{height:40px;line-height:40px;color:#9f9f9f;}
.top_nav a{padding:0 2px;color:#999;}
.top_nav a:link{color:#999;}
.top_nav a:visited{color:#999;}
.top_nav a:hover{color:#c90809;}
.top_nav span{color:#c90809;padding-left:2px;}
#help_left{float:left;width:180px;}
#help_left_box{height:auto;background-color:#f1f1f1;margin-bottom:15px;}
.help_left_topbox{top:-2PX;left:-2PX;width:178px;border:1PX solid #dbdbdb;background-color:#FFF;position:relative;}
#help_left_top{height:70px;background:url(../image/help_info_title.gif) no-repeat 12px 12px;background-color:#FFF;}
.help_left_list{top:-2PX;left:-2PX;margin:0;width:178px;border:1PX solid #dbdbdb;border-bottom:1px solid #dbdbdb;border-top:none;background-color:#FFF;position:relative;font-family:Arial;line-height:31px;padding:15px 0;}
.help_left_list dt{padding-left:15px;margin:0;}
.help_left_list dt b{color:#9a9a9a;font-weight:bold;background:none;}
.help_left_list dt span{color:#c90809;}
.help_left_list dd{padding-left:25px;margin:0;}
.help_left_list dd a font{color:#999;font-size:30px;_font-size:12px;vertical-align:middle;}
.help_left_list_selected{color:#c90809;}
.help_left_list_selected a{color:#c90809;}
.help_left_list_selected font{color:#c90809;}
.help_left_list_selected a:link{color:#c90809;}
.help_left_list_selected a:visited{color:#c90809;}
.help_left_list_selected a:hover{color:#c90809;}
#help_right_box{float:right;width:809px;height:auto;}
#help_right_box_1220{float:right;width:1029px;height:auto;}
#help_right_view_position{margin-top:52px;height:21px;line-height:21px;background-color:#f9f9f9;padding-left:25px;color:#bababa;margin-bottom:27px;}
#help_right_index_box{height:21px;border-bottom:4px solid #e4e4e4;margin-left:20px;position:relative;}
.help_right_index_box_ul{position:absolute;display:block;left:0;top:0;}
.help_right_index_box_ul li{display:block;float:left;width:80px;margin-right:4px;line-height:21px;text-align:center;background:url(../image/help_right_index_bg_2.gif) no-repeat top left;border-bottom:none;}
#help_right_index_box_li_selected{display:block;float:left;width:80px;height:39px;color:#fff;margin-right:4px;background:url(../image/help_right_index_bg_1.gif) no-repeat top left;}
#help_right_index_icon{position:absolute;width:87px;height:61px;background:url(../image/explain_way.gif) no-repeat top left;right:-3px;bottom:6px;}
#help_right_index_icon1{position:absolute;width:87px;height:61px;background:url(../image/fishman_way.gif) no-repeat top left;right:-3px;bottom:6px;}
#way_title{margin-left:20px;margin-top:30px;height:14px;padding-bottom:8px;border-bottom:1px solid #e9e9e9;background:url(../image/way_square.gif) no-repeat 0 2px;color:#d10000;font-weight:bold;line-height:14px;padding-left:20px;}
.question_title{margin-left:20px;margin-top:30px;height:14px;padding-bottom:8px;border-bottom:1px solid #e9e9e9;color:#d10000;font-weight:bold;line-height:14px;}
.question_title span{float:left;}
.to_top_box{float:right;}
.to_top_box a{color:#ca2c23;display:block;background:url(../image/top_arrow.gif) no-repeat top left;width:30px;padding-left:15px;}
.to_top_box a:link{color:#ca2c23;}
.to_top_box a:visited{color:#ca2c23;}
.to_top_box a:hover{color:#ca2c23;}
#special_notice{margin-left:20px;margin-top:30px;padding-top:2px;height:14px;padding-bottom:8px;border-bottom:1px solid #e9e9e9;background:url(../image/star_empty.gif) no-repeat 0 0;color:#979797;font-weight:bold;line-height:14px;padding-left:20px;}
.help_text_box{margin-left:20px;line-height:22px;color:#6f6f6f;}
.help_text_boxx a{color:#3399cc;}
.help_text_box a:link{color:#3399cc;}
.help_text_box a:visited{color:#3399cc;}
.help_text_box a:hover{color:#3399cc;text-decoration:underline;}
.help_tel_box{background-color:#f7f7f7;height:auto;padding:35px;line-height:35px;padding-left:45px;margin-bottom:15px;}
/*分页控件样式*/
.page_box{height:24px;line-height:23px;padding-bottom:18px;padding-top:15px;text-align:center;}
.page_box a{display:inline-block;height:23px;padding:0 9px;}
.page_box span{border:1px solid #DBDBDB;display:inline-block;height:23px;line-height:23px;margin:0 3px;}
.page_box font{font-size:12px;padding:0 5px;}
.page_box b{color:#CC0809;font-weight:normal;}
#page_on{background-color:#FFF9EB;border:1px solid #CA0809;color:#CA0809;padding:0 9px;}
.page_on{background-color:#FFF9EB;border:1px solid #CA0809;color:#CA0809;padding:0 9px;}
CSS代码(jquery.thickbox.css):
#TB_overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%;background-color:#CCC;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6;}
#TB_window{top:0px;left:0px;/*position:fixed;_position:absolute;*/
position:absolute;background:#fff;z-index:102;color:#000000;display:none;border:5px solid #666;}
#TB_caption{height:25px;padding:10px 30px 10px 25px;}
#TB_closeWindow{height:25px;padding:10px 25px 10px 0;float:right;}
#TB_closeAjaxWindow{padding:5px 10px 7px 0;margin-bottom:1px;text-align:right;background-color:#e8e8e8;}
#TB_ajaxContent{padding:2px 15px 15px 15px;overflow:auto;}
#TB_load{text-align:center;position:absolute;top:50%;left:0px;width:100%;overflow:visible;visibility:visible;display:block;z-index:101;}
#TB_loadContent{margin-left:-125px;position:absolute;top:-50px;left:50%;width:250px;/*height:100px;*/
visibility:visible;}
#divDialogBox p{margin:0px;}
#divDialogBox .box_message{padding:6px 0px 6px 0px;line-height:24px;text-align:left;/*height:58px;*/
background-image:url('/image/box_alert.gif') !important;background-position:0px 5px;background-repeat:no-repeat;padding-left:40px;}
#divDialogBox .box_button{text-align:center;}
#divDialogBox .box_button input{width:60px;}
分享到QQ
分享到微博
微信扫一扫
