Программирование - это просто
Advertisement
Главная arrow Web-программирование arrow JQuery для чайников arrow JQuery для чайников. Урок 1. Первое знакомство.
23.04.2024 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
1С:Предприятие
Уроки C#
Уроки Delphi
Уроки программирования
Web-программирование
Дизайн и графика
Компьютер для блондинок
Исходники
Статьи
Платный раздел
Рассказы про компьютеры
Хитрости и секреты
Системный подход
Размышления
Наука для чайников
Друзья сайта
Excel-это не сложно
Все о финансах
.
JQuery для чайников. Урок 1. Первое знакомство. Печать E-mail
Автор megabax   
29.11.2012 г.
Структура программы на примере простейшей программы

JQuery для чайников. Урок 1. Первое знакомство.

Исходники к уроку можно скачать здесь.

Для начала библиотеку JQuery нужно скачать (это всего один файл с расширением JS). Скачать его можно, например, отсюда http://jquery.com/download/. И так, файл скачали. Что дальше? Прежде всего, нужно подключить его к нашей станице:

<script type='text/javascript' src='jquery.js'></script>

Теперь мы можем пользоваться функционалом JQuery. Для начала рассмотрим простейший пример (не пугайтесь что он большей, на самом деле кода JQuery там всего несколько строчек, остальное - HTML и CSS, тоесть, тут приведен полный код страницы):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>jQuery. Disappear</title>

 

<!--<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>-->

<script type='text/javascript' src='jquery.js'></script>

 

<script type="text/javascript">

$(document).ready(function(){

                          

    $(".pane .delete").click(function(){

        $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");

    });

 

});

</script>

 

<style type="text/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;

}

</style>

</head>

 

<body>

    <div class="pane">

        <h3>Простой заголовок</h3>

        <p>Это тестовый абзац для тестирования

        эффекта простого исчезновения.</p>

        <img src="delete.png" alt="delete" class="delete" />

    </div>

    <div class="pane">

        <h3>Простой заголовок</h3>

        <p>Это тестовый абзац для тестирования

        эффекта простого исчезновения.</p>

        <img src="delete.png" alt="delete" class="delete" />

    </div>

    <div class="pane">

        <h3>Простой заголовок</h3>

        <p>Это тестовый абзац для тестирования

        эффекта простого исчезновения.</p>

        <img src="delete.png" alt="delete" class="delete" />

    </div>

    <div class="pane">

        <h3>Простой заголовок</h3>

        <p>Это тестовый абзац для тестирования

        эффекта простого исчезновения.</p>

        <img src="delete.png" alt="delete" class="delete" />

    </div>

    <div class="pane">

        <h3>Простой заголовок</h3>

        <p>Это тестовый абзац для тестирования

        эффекта простого исчезновения.</p>

        <img src="delete.png" alt="delete" class="delete" />

    </div>

 

</body>

</html>

Эта программа дает эффект исчезновения блока. Запустив ее мы увидим вот такую картину:

JQuery для чайников. Урок 1. Первое знакомство.

Жмем на кнопочку с крестиком (типа "закрыть"). Блок у нас начнет исчезать, он как бы "растворяется". При этом остальные блоки сдвигаются:

JQuery для чайников. Урок 1. Первое знакомство.

Теперь немножко комментариев. Как я уже сказал, сам скрипт для обращения к JQuery, довольно маленький, всего несколько строк:

<script type="text/javascript">

$(document).ready(function(){

                          

    $(".pane .delete").click(function(){

        $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");

    });

 

});

В данном скрипте находиться обработчик нажатия на кнопочку с крестиком, который запускает анимацию: делает родительских элемент прозрачным. Скорость "slow"(медленно).

Можно задать "fast":

<script type="text/javascript">

$(document).ready(function(){

                          

    $(".pane .delete").click(function(){

        $(this).parents(".pane").animate({ opacity: 'hide' }, "fast");

    });

 

});

тогда исчезать будет быстро, хотя и все равно заметно на глаз.

Можно задать время в миллисекундах:

<script type="text/javascript">

$(document).ready(function(){

                          

    $(".pane .delete").click(function(){

        $(this).parents(".pane").animate({ opacity: 'hide' }, 10000);

    });

 

});

Если задать достаточно большой интервал и кликнуть по очереди несколько заголовков, то можно наблюдать любопытный эффект, как они постепенно исчезают в разной стадии исчезновения:

JQuery для чайников. Урок 1. Первое знакомство.
Последнее обновление ( 29.11.2012 г. )
 
« След.
Вернуться
 
© 2024 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги