Advanced Search

Return to Snippet

Revision: 23408
at February 6, 2010 07:58 by cadic
Initial Code 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Acco example</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<!-- Подключаем библиотеку jQuery -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

	<script type="text/javascript">
		//<![CDATA[
		// Немного jQuery-магии :)

		// После загрузки окна сворачиваем блок "остальные".
		// Это сделано для того чтобы при отключенном JS
		// пользователь видел полную картину.
		// Ну и поисковики будут недовольны, если у нас в HTML есть
		// скрытые блоки.
		window.onload=function(){
			$("#moreFollowers").hide();
		}

		// Функция сворачивания.разворачивания
		function toggleFollowers() {
			// Операция toggle переключает отображение блока. Если блок невидим -
			// разворачивает его, если видим - сворачивает. Первый параметр может
			// принимать значения "slow", "fast" или числовое значение (кол-во
			// миллисекунд за которое надо "провернуть" операцию. Вместо toggle()
			// можно использовать другие функции jQuery (slideToggle, animate, ...)
			// Второй параметр - функция, которую нужно выполнить после завершения
			// анимации. У нас это - изменение текста ссылки.
			$("#moreFollowers").toggle("slow", function(){
				l = $("#moreFollowersLink");
				l.text(
					// обычный трехместный оператор - если текст ссылки = "more..."
					// то заменяем его на "less...", иначе - вставляем "more..."
					l.text()=="more..."?"less...":"more..."
				);
			});
		}

		//]]>
	</script>

</head>
<body>
	<div id="test" class="test">
		<div id="container">
			<div id="wrapper">
				<h3>HAHAHA</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus eros, varius non blandit sit amet, posuere in
					mauris. Duis ultrices hendrerit convallis. Aenean ultrices dui et massa congue euismod. Nulla odio felis, tristique in
					pellentesque quis, dictum a nisi. Donec congue tempor suscipit. Fusce ultrices tincidunt leo eget pellentesque. Sed ligula
					nulla, suscipit a consectetur sodales, ultrices a nulla. Proin venenatis varius ligula, non ultricies justo vestibulum
					quis.
				</p><br />
	<!--
		Блок фоловеров лучше переработать. Сделать не два блока (короткий и длинный),
		а "короткий" и "остальные". Все операции проводить только над блоком "остальные"
	-->
				<div id="followers">
				<p>
					<strong>Followers</strong><br />

					<!-- вот короткий блок с тремя товарищами -->
					<div id="commonFollowers">
						<a href="#">Mike</a> <a href="#">Alex</a> <a href="#">Vince</a>
					</div>
					<!-- а вот блок остальные, здесь у нас ещё три товарища. -->
					<div id="moreFollowers">
						<a href="#">Max</a> <a href="#">Gillian</a> <a href="#">Peter</a>
					</div>

					<!-- ну и ссылка, она немного упрощена -->
					<a onclick="toggleFollowers(); return false;" href="#" id="moreFollowersLink" class="more">more...</a>
				</p>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</body>
</html>
Initial URL 









Initial Description














Initial Title





Аккордеон









Initial Tags














Initial Language





HTML