2009.12.17(4)-jquery例のすべての表示と簡略表示

5694 ワード
java jquery ブラウザ css 三つ星
2009.12.17(4)-jquery例のすべての表示と簡略表示
私が望んでいる効果は、10個のものを先に6個表示し、「すべて表示」をクリックして10個のものをすべて表示すると、「すべて表示」
表示ボタンが「コンパクト表示」になり、さらにクリックすると6つ表示されるという繰り返し
htmlコードを見て
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>    </title>
<style type="text/css">
 *{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid 

#AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
	<ul>
		<li ><a href="#">  </a><i>(30440) </i></li>

		<li ><a href="#">  </a><i>(27220) </i></li>
		<li ><a href="#">  </a><i>(20808) </i></li>
		<li ><a href="#">  </a><i>(17821) </i></li>
		<li ><a href="#">  </a><i>(12289) </i></li>
		<li ><a href="#">   </a><i>(8242) </i></li>

		<li ><a href="#">  </a><i>(14894) </i></li>
		<li ><a href="#">  </a><i>(9520) </i></li>
		<li ><a href="#">  </a><i>(2195) </i></li>
		<li ><a href="#">  </a><i>(4114) </i></li>
		<li ><a href="#">    </a><i>(12205) </i></li>

		<li ><a href="#">  </a><i>(1466) </i></li>
		<li ><a href="#">   </a><i>(3091) </i></li>
		<li ><a href="#">      </a><i>(7275) </i></li>
	</ul>
	<div class="showmore">
		<a href="more.html"><span>      </span></a>

	</div>
</div>
</body>
</html>

1.まず、liを隠します.例えば、7つ以降は隠しますが、最後の「他のカメラ」は隠してはいけません.
var $hide = $('ul li:gt(5):not(:last)');
$hide.hide();

2.「すべて表示」をクリックするとすべての
var $show = $('div.showmore > a');
$show.click(function(){
	$hide.show();
});

3.「すべて表示」を「簡略表示」に変更
$('.showmore a span').text("    ");

4.ブランドをハイライト表示するなど、効果を加えることができます.
$('ul li').filter(".contains('  ')",":contains('   ')").addClass("promoted");

5.質問があります.その「すべて表示」はハイパーリンクで、他のページにジャンプするので、私たちは浏にあげます.
ビューアはfalseを返します.この5つのステップコードは次のとおりです.
$(function(){
		var $hide = $('ul li:gt(7):not(:last)');
		$hide.hide();//  
		var $show = $('div.showmore > a');
		$show.click(function(){
			$hide.show();//  
			//      
			$('.showmore a span').css("background","url(images/up.gif)no-repeat 0 

0").text("      ");
			//    
			$('ul li').filter(":contains('  '),:contains('  '),:contains('  

 ')").addClass("promoted");
			return false;//return false               
		});
	})
6.そして、単機の「簡略表示」で、一部しか表示されませんが、同じリンクをクリックして、どのようにエリアに来ますかという問題があります.
分は?hideかshowかで区別できます
if($hide.is(":visible")){}else{}//

jqueryのすべてのコードは次のとおりです.
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
	$(function(){
		var $hide = $('ul li:gt(7):not(:last)');
		$hide.hide();//  
		var $show = $('div.showmore > a');
		$show.click(function(){
			if($hide.is(":visible")){
				$hide.hide();
				$('.showmore a span').css("background","url(images/down.gif)no

-repeat 0 0").text("      ");
				//     
				$('ul li').removeClass("promoted");
			}else{
				$hide.show();//  
				//      
				$('.showmore a span').css("background","url(images/up.gif)no-

repeat 0 0").text("      ");
				//    
				$('ul li').filter(":contains('  '),:contains(' 

 '),:contains('   ')").addClass("promoted");
			}
			
			return false;//return false               
		});
	})
	
</script>
log 4 netの簡単な構成は使います
Flex Bindableの使い方