Автор: Neutron. Рубрики: CMS. Опубликовано: мая 25, 2010

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

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

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

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

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

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


HTML:

здесь контент

Нажми!

CSS:

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

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

HTML:

Заголовок

здесь остальной текст

delete

CSS:

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). В демо, эффект продемонстрирован на примере крупных кнопок (они же ссылки).

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

HTML:

CSS:

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. Кликабельный блок

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

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

HTML:

  • Спорт

    Просмотреть все записи в рубрике Спорт

CSS:

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 изображения. Необходимо так-же вручную создавать уменьшенные копии изображений.

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

HTML:

Изображение

CSS:

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 неимоверно много. Самое главное, что почти все интересные. Жду Ваших комментариев. :)

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

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

Вы можете пропустить до конца и оставить ответ. Pinging в настоящее время не доступны.

Есть 5 коммент. к “Интересные фишки на jQuery. Выпуск #1”

  1. :

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

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

  3. eviralUA:

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

  4. :

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

    • :

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

Написать комментарий