PHP:MySQL函數(shù)mysql_field_type()的用法
716
2023-12-14
剛學(xué)完jQuery選擇器，閑來(lái)無(wú)事，照著書上的范例敲了一段代碼（HTML和CSS抄自書上），自己試著寫了寫jQuery的代碼，感覺(jué)相當(dāng)輕便啊。
顯示效果：
功能說(shuō)明：
1、點(diǎn)擊上邊的圖書分類一欄，實(shí)現(xiàn)向下的伸縮擴(kuò)展，可以控制分類的顯示狀態(tài)；
2、“簡(jiǎn)化”功能點(diǎn)擊后實(shí)現(xiàn)分類顯示菜單數(shù)量的簡(jiǎn)化，簡(jiǎn)化后，簡(jiǎn)化字樣變成“展開(kāi)”；
3、頁(yè)面中的兩個(gè)紅色箭頭圖標(biāo)均為顯示狀態(tài)的圖標(biāo)，每次點(diǎn)擊后都會(huì)變換相應(yīng)的狀態(tài)效果。
代碼實(shí)現(xiàn)：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="http://www.gimoo.net/t/1809/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{font-size:13px}
#divFrame{border:solid 1px #666;width:301px;overflow:hidden}
#divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:pointer}
#divFrame .clsHead h3{padding:0px;margin:0px;float:left}
#divFrame .clsHead span{float:right;margin-top:3px}
#divFrame .clsContent{padding:8px}
#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px}
#divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px}
#divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
.GetFocus{background-color:#eee}
</style>
<body>
<script type="text/javascript">
$(function(){
$('.clsHead').click(function(){
if($('.clsContent').is(':visible')){
$('.clsContent').css('display','none');
$('.clsHead span img').attr('src','a.gif');
}else{
$('.clsContent').css('display','block');
$('.clsHead span img').attr('src','a2.gif');
}
});
$('.clsBot').click(function(){
if($('li:last').is(':visible')){
$('li:gt(5)').css('display','none');
$('.clsBot a').html('展開(kāi)');
$('.clsBot img').attr('src','a.gif');
}else{
$('li:gt(5)').css('display','block');
$('.clsBot a').html('簡(jiǎn)化');
$('.clsBot img').attr('src','a2.gif');
}
});
});
</script>
<div id="divFrame">
<div class="clsHead">
<h3>圖書分類</h3>
<span><img src="http://www.gimoo.net/t/1809/a2.gif" alt="" /></span>
</div>
<div class="clsContent">
<ul>
<li><a >小說(shuō)</a><i>(1110) </i></li>
<li><a >文藝</a><i>(230) </i></li>
<li><a >青春</a><i>(1430) </i></li>
<li><a >少兒</a><i>(235) </i></li>
<li><a >生活</a><i>(7809) </i></li>
<li><a >社科</a><i>(876) </i></li>
<li><a >管理</a><i>(1234) </i></li>
<li><a >計(jì)算機(jī)</a><i>(2434) </i></li>
<li><a >教育</a><i>(234) </i></li>
<li><a >工具書</a><i>(7665) </i></li>
<li><a >引進(jìn)版</a><i>(4557) </i></li>
<li><a >其他類</a><i>(4543) </i></li>
</ul>
<div class="clsBot"><a >簡(jiǎn)化</a>
<img src="http://www.gimoo.net/t/1809/a2.gif">
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持綠夏網(wǎng)。
