алфавитный указатель?

alazankin · November 17, 2010

такой вопрос. есть список фильмов от А до Я, на каждый из которых дано однострочное описание.

надо сделать алфавитный указатель.

самое простое - сделать 30 страниц по одной на каждую букву, однако хочется сделать по-умному )

например разместить все записи на одной странице, и сделать так, чтобы при нажатии определенной буквы скрывались все строчки, начинающиеся с других букв )) примерно как авто-фильтр в экселе.

есть варианты решения?

rus · November 17, 2010

табы+js - долго грузиться страница будет.

mysql+php - страница собирается на лету (ключевое слово - pagination - постранична навигация).

psywalker · November 17, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	div.wrap { width: 805px; margin: 20px auto; }
	ul { list-style: none; overflow: hidden; border-left: 1px solid #000;}
		ul li { float: left;}
			ul li a { 
				display: block; 
				background: red; 
				width: 200px;
				font: bold 14px Verdana, Geneva, sans-serif;
				text-decoration: none;
				color: #300;
				border: 1px solid #000;
				border-left: 0;
				padding: 10px 0;
				text-align: center;
			}
			ul li a:hover { background: #333; color: #fff;}
	div#block div { 
		display: block; 
		background: #993; 
		margin-bottom: 3px; 
		border: 1px solid #000; 
		border-width: 0 1px 1px;
		padding: 10px;
		font: bold 50px Verdana, Geneva, sans-serif;
		color: #fff;

	}
	div#block div.active { display: block;}
	div#block div.none { display: none;}
	ul li.active a{ background: #993;border-width: 1px 1px 0 0; padding-bottom: 11px; color: #fff;}

</style>

</head>

<body>
	<div class="wrap">

	<ul id="menu">
		<li class="active"><a href="#" onclick="test(0); return false;">Overview</a></li>

		<li><a href="#" onclick="test(1); return false;">Requirements</a></li>
		<li><a href="#" onclick="test(2); return false;">Step By Step</a></li>
		<li><a href="#" onclick="test(3); return false;">Notes</a></li>
	</ul>

	<div id="block">
		<div>Content 1</div>
		<div>Content 2</div>

		<div>Content 3</div>
		<div>Content 4</div>
	</div>

	</div>
<script>
	var block = document.getElementById('block')
	var blockDiv = block.getElementsByTagName('div')
	for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none'
	blockDiv.item(0).className = 'active'
	function test(number){
		var menu = document.getElementById('menu')
		var li = menu.getElementsByTagName('li')

		var block = document.getElementById('block')
		var blockDiv = block.getElementsByTagName('div')

		for(var i = 0; i<li.length;i++) li.item(i).className = ''
		for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none'

		li.item(number).className = 'active'
		blockDiv.item(number).className = 'active'

	}

</script>
</body>
</html>

Sign In

алфавитный указатель?

Question

alazankin

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information