Программирование - это просто
Advertisement
Главная arrow Уроки программирования arrow JQuery для чайников arrow JQuery для чайников. Урок 1. Первое знакомство.
26.01.2025 г.
Главное меню
Главная
Интернет магазин
Программные продукты
Биржевые роботы
Искусственный интеллект
Математика и информатика
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 г. )
 
« След.
Вернуться
 
© 2025 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги