→
←
Интересные фишки на jQuery. Выпуск #1

Интересные фишки на jQuery. Выпуск #1

CMS

Привет! Сегодня я решил начать делать серию постов, связаных с интересными фишками на jQuery и способы их реализации. Сам я очень люблю jQuery и по возможности стараюсь реализовать многие из фишек на своих проектах. Каждая фишка будет сопровождаться скриншотом, ссылкой на страничку с демо, небольшое описание и непосредственно сам код. Исходя из популярности постов, будет видно: стоит ли делать отдельную рубрику под jQuery и насколько частыми будут подборки. Надеюсь тебе понравиться.

Первым делом, для использования любого из примеров, необходима сама библиотека jQuery. Скачать ее можно с официального сайта. После чего необходимо подключить к нужной страничке (страницам) где какая-либо из фишек будет применена. Сделать это очень просто. Разместите этот код, между тегами head и /head:

1

<script type="text/javascript" src="ццц.домен.ру/jquery.js"></script>

Вызов элементов jQuery рекомендую размещать сразу под кодом подключения самой библиотеки.
Так-же не забывайте, что можно просмотреть исходной код страничек с демо. В большинстве браузеров это сочетание клавиш Ctrl+U.

1. Выезжающая панель

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

Вызов элементов:

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
$(document).ready(function(){
 
	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
 
 
});
</script>

HTML:

1
2
3
4
5

<div id="panel">
	здесь контент
</div>
 
<p class="slide"><a href="#" class="btn-slide">Нажми!</a></p>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#panel {
	background: #754c24;
	height: 200px;
	display: none;
	padding: 5px;
	color: #fff;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(btn-slide.gif) no-repeat center top;
}
.btn-slide {
	background: url(white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}

Посмотреть демо »

2. Эффект исчезновения

Простой эффект исчезновения чего либо, при нажатии на заранее подготовленную кнопку\ссылку. Например, если ты администратор сайта, можно прикрутить данную фишку к списку комментариев. Что бы эффектно их удалять. :D

Вызов элементов:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
$(document).ready(function(){
 
	$(".pane .delete").click(function(){
		$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
	});
 
});
</script>

HTML:

1
2
3
4
5

<div class="pane">
	<h3>Заголовок</h3>
	<p>здесь остальной текст</p>
	<img src="btn-delete.gif" alt="delete" class="delete" />
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

body {
	margin: 10px auto;
	width: 470px;
}
h3 {
	margin: 0;
	padding: 0 0 .3em;
}
p {
	margin: 0;
	padding: 0 0 .5em;
}
.pane {
	background: #edf5e1;
	padding: 10px 20px 10px;
	position: relative;
	border-top: solid 2px #c4df9b;
}
.pane .delete {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

Посмотреть демо »

3. Всплывающие подсказки

Стильный эффект вывода всплывающих подсказок (hover). В демо, эффект продемонстрирован на примере крупных кнопок (они же ссылки).

Вызов элементов:

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
$(document).ready(function(){
 
	$(".menu a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});
 
 
});
</script>

HTML:

1
2
3
4
5
6

<ul class="menu">
	<li>
		<a href="http://neutron.com.ua/category/internet/">Интернет</a>		
		<em>Просмотреть все записи в рубрике &laquo;Интернет&raquo;</em>
	</li>
</ul>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

body {
	margin: 0 auto;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;
}
.menu li {
	padding: 0;
	margin: 0 2px;
	float: left;
	position: relative;
	text-align: center;
}
.menu a {
	padding: 14px 10px;
	display: block;
	color: #000000;
	width: 144px;
	text-decoration: none;
	font-weight: bold;
	background: url(button.gif) no-repeat center center;
}
.menu li em {
	background: url(hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	left: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none;
}

Посмотреть демо »

4. Кликабельный блок

Делаем нужный блок полностью кликабельным. Т.е. кликнув в любом месте, внутри болока, мы перейдем по указанной в коде ссылке. Ссылку можно размещать в любом месте, внутри блока. Плюс при наведении мышкой на нужный блок, меняется его фон.

Вызов элементов:

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
$(document).ready(function(){
 
	$(".pane-list li").click(function(){
    	window.location=$(this).find("a").attr("href");return false;
	});
 
});
</script>

HTML:

1
2
3
4
5
6

<ul class="pane-list">
	<li>
		<h3><a href="http://neutron.com.ua/category/sport/">Спорт</a></h3>
		<p>Просмотреть все записи в рубрике Спорт</p>
	</li>
</ul>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

body {
	margin: 10px auto;
	width: 470px;
}
a {
	color: #333300;
	text-decoration: none;
}
a:visited {
	color: #333300;
}
a:hover {
	color: #333300;
	text-decoration: underline;
}
h3 {
	margin: 0;
	padding: 0 0 .3em;
}
p {
	margin: 0;
	padding: 0 0 .5em;
}
.pane-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.pane-list li {
	background: #ecfad7;
	padding: 10px 20px 10px;
	border-top: solid 1px #c4df9b;
	cursor: pointer;
}
.pane-list li:hover {
	background: #f6ffe9;
}

Посмотреть демо »

5. Галерея изображений на jQuery

Простая галерея. Будет удобна например для собственного портфолио. Поддерживаются JPG изображения. Необходимо так-же вручную создавать уменьшенные копии изображений.

Вызов элементов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script type="text/javascript">
$(document).ready(function(){
 
	$("h2").append('<em></em>')
 
	$(".thumbs a").click(function(){
 
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
 
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
 
		$("h2 em").html(" (" + largeAlt + ")"); return false;
	});
 
});
</script>

HTML:

1
2
3
4
5
6
7
8
9

<p><img id="largeImg" src="img1-lg.jpg" alt="Изображение" /></p>
 
<p class="thumbs">
	<a href="img2-lg.jpg" title="Изображение 2"><img src="img2-thumb.jpg" /></a>
	<a href="img3-lg.jpg" title="Изображение 3"><img src="img3-thumb.jpg" /></a>
	<a href="img4-lg.jpg" title="Изображение 4"><img src="img4-thumb.jpg" /></a>
	<a href="img5-lg.jpg" title="Изображение 5"><img src="img5-thumb.jpg" /></a>
	<a href="img6-lg.jpg" title="Изображение 6"><img src="img6-thumb.jpg" /></a>
</p>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

body {
	margin: 20px auto;
	padding: 0;
	width: 580px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
	font: bold 190%/100% Arial, Helvetica, sans-serif;
	margin: 0 0 .2em;
}
h2 em {
	font: normal 80%/100% Arial, Helvetica, sans-serif;
	color: #999999;
}
#largeImg {
	border: solid 1px #ccc;
	width: 550px;
	height: 400px;
	padding: 5px;
}
.thumbs img {
	border: solid 1px #ccc;
	width: 100px;
	height: 100px;
	padding: 4px;
}
.thumbs img:hover {
	border-color: #FF9900;
}

Посмотреть демо »

Много чего еще опубликую. Скриптов и плагинов на jQuery неимоверно много. Самое главное, что почти все интересные. Жду Ваших комментариев. :)

Девушки глазами парней.
Правдиво, что сказать…

На правах рекламы!
Отпуск уже не за горами. Надумал ехать в Грецию? Разузнай расписание экскурсии в Афины. Посмотри достопримечательности.





4
6
2
3
2
2
4

,
Опубликовано 25 мая 2010

Понравилась статья? Оставь свой комментарий и подпишись на rss.
А еще, можно получать обновления прямо на свой электронный ящик:
Прямая ссылка на статью «Интересные фишки на jQuery. Выпуск #1»:

Комментарии (5) к «Интересные фишки на jQuery. Выпуск #1»

  1. kifitim:
    26 мая 2010 в 13:28

    супер подборка, а на mootools не опубликуете?

    Ответить
  2. extezy:
    26 мая 2010 в 14:37

    mootools обязательно будет в одном из следующих постов.
    Забыл об этом упомянуть в посте.

    Ответить
  3. eviralUA:
    27 мая 2010 в 12:00

    класный пост. побольше б таких. спасибо. :)

    Ответить
  4. itslam:
    28 мая 2010 в 14:26

    пост безусловно полезный, однако стоит мне набрать в поисковике "jquery для начинающих", и все эти примеры будут на первых строках – это все один урок. У меня вопрос – планируется ли что нибудь новое???? Это я уже до дыр изъюзал ))))

    Ответить
    • extezy:
      29 мая 2010 в 7:08

      Да, конечно. Ну во всяком случае, я постараюсь. ;)
      Пост – пилотный. Думал с чего начать, решил взять попроще примеры.

      Ответить

Оставить комментарий