У нас в школе каждый ребенок обретает ценное среднее образование по специально разработанной методике особого подхода. То есть каждый ученик учится так же, как и в обычной школе, но в онлайн-режиме, и находясь у себя в комнате. Каждый родитель может подобрать максимально подходящую программу образования своего ребенка.

На нашем сервисе присутствуют привычно мощные материалы для проведения обучения и опытные преподаватели.

Сайт школы: https://977.com.ua/

Если вы не читали предыдущие части, то мы настоятельно рекомендуем вам с ними ознакомиться:

Масштабируемая векторная графика (SVG) — Исследование
Масштабируемая векторная графика (SVG) — Оформление посредством CSS
Масштабируемая векторная графика (SVG) — Работаем с текстом
Масштабируемая векторная графика (SVG) — Анимация

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

Конечно же, есть множество различных способов, но мы с вами рассмотрим два решения, которые, как нам кажется, лучшие. Итак, давайте посмотрим, как мы можем это сделать.

При помощи элемента Object

Вместо того чтобы напрямую помещать его в HTML-документ, существует несколько способов встроить SVG. Например, если мы храним графику в .svg-файле, мы можем использовать элемент «object».

<object data=’images/apple.svg’></object>
В демонстрационных целях мы, посредством SVG, добавили логотип Apple на нашу страницу. Тем не менее, в тех браузерах, в которых отсутствует поддержка, страница останется пустой. Чтобы решить эту проблему, мы можем использовать растровую графику следующим образом:

<object data=’images/apple.svg’> <img src=’images/apple.png’/> </object>
Таким образом, поддерживаемые браузеры будет распознавать .svg, а браузеры без поддержки будут отображать растровый графический элемент. Под логотипом Apple мы добавили отметку png для того, чтобы определить, какая графика нам будет отображена.

Начнем.

1. Файл, в котором будет находиться плагин, назовем jquery.PLUGINNAME.js.

2. Псевдоним устанавливаем с помощью метода noConflict ().

Структура, которой мы будем пользоваться для определения jQuery.fn, следующая:

jQuery.fn.firstPlugin = function () { return this.each (function () { alert (this.id); }); }

Назвать Ваш плагин Вы можете, как хотите.

$(‘#test’).firstPlugin ();

Это действие покажет окно предупреждения с id данными

Теперь давайте выясним, как можно разобрать более сложный плагин. Своему плагину Вы можете задать различные параметры. Если Ваш плагин состоит из двух чисел, можно написать следующим образом:

jQuery.fn.secondPlugin = function (number1, number2, options) { myoptions = jQuery.extend ({ operation: "sum", label: "Результат" }, options); $(this).html (myoptions.label + " (" + myoptions.operation + ")" + myoptions.number1+myoptions.number2); }

В выше приведенном коде проверяется, как мы представим значение по умолчанию, в случае если две строки не передают функцию. Таким образом, мы можем вызвать одним из двух способов:

$(‘#test’).secondPlugin (1, 2);

Получаем:

<span id = "test">результат (сумма) 3 </ span>

Или другим способом

$(‘#test’).secondPlugin (1, 2, { operation: "sums two numbers together", label: "We got" });

Если Вы предпочитаете такой вывод

<span id = "test"> Мы получили (суммы двух чисел) 3 </ span>

Досих пор мы не упоминали объект jQuery, который обрабатывается внутренней обработкой. Распространив ее, мы создадим наши собственные функции и селекторы. Вот так это может быть добавлено.

jQuery.fn.extend ({ myFirstFunction : function () { alert ("Первая функция") }, thisIsTheSecond : function (message) { alert ("2nd: "+ message) } });

Затем вызываем, без каких либо проблем:

$.myFirstFunction (); $.thisIsTheSecond ("Привет"); Также мы можем создать собственный селектор, если он еще не существует: jQuery.expr[":"].startsWith = function (element, index, tokens) { if (!tokens[3]) return false; return eval ("/^[/s]*" + tokens[3] + "/i").test ($(element).text()); };

Как вы можете видеть, функция принимает три аргумента, а именно:

1) соответствующего элемента.

2) индекс элемента.

3) объект, который анализирует tokens.

Первый элемент массива является полная строка фильтра (в том числе параметры ), а вторая является ":", третий это имя фильтра и, наконец, четвертый параметр.

Вы всегда должны проверять соответствующий ли параметр был выбран, поскольку фильтр может прекратить работу.

Это лишь некоторые советы для создания собственных плагинов.

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

Платформы и сеточные системы

01. Compass

Compass практически везде сопровождает Sass. Он укомплектован множеством заранее созданных миксинов и инструментов, которые упрощают работу с Sass. Если вы любите Sass, но не пробовали использовать в работе Compass, то пришло время с ним познакомиться!

02. Библиотека Sass-миксинов Bourbon

ereg("^[a-zA-Z0-9_]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$]", $email);

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

if (eregi("^[a-zA-Z0-9_]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$]", $email)) { return FALSE; }

Это основные методы проверки. Но иногда пользователи пишут вроде правильно, например, 123@123.123. Такого адреса не существует. И для этого мы будем проверять имя домена после @ на реальность ввода доменного имени. Делаем проверку на существование MX записи для этого домена, а затем проверяем, если порт 25 закрыт – это нам гарантирует, что домен используеться.

list($Username, $Domain) = split("@",$email); if(getmxrr($Domain, $MXHost)) { return TRUE; } else { if(fsockopen($Domain, 25, $errno, $errstr, 30)) { return TRUE; } else { return FALSE; } }

Для облечения работы, последние два выражение запишем в виде функции. После создания функции, мы можем ее использовать снова и снова.

function checkEmail($email) { if(eregi("^[a-zA-Z0-9_]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$]",$email)) { return FALSE; } list($Username, $Domain) = split("@",$email); if(getmxrr($Domain, $MXHost)) { return TRUE; } else { if(fsockopen($Domain, 25, $errno, $errstr, 30)) { return TRUE; } else { return FALSE; } } }

Теперь все, что нам требуется, это проверить наш код. Для этого пропишем маленький код. Когда Вы хотите сделать проверку электронного адреса, просо введите электронный адрес, как значение функции.

if(checkEmail(johndoe@example.com) == FALSE) { echo "E-mail адрес не правильный."; } else { echo "E-mail адрес правильный."; }

Вот и все! Пользуйтесь!

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

<div id="container"> <ul id="tabs"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <h2>Первый</h2> <p>Контент №1</p> </div> <div id="tab2"> <h2>Второй</h2> <p> Контент №2</p> </div> <div id="tab3" ><h2>Третий</h2> <p> Контент №3</p> </div> </div>

С создание контента закончили. Теперь поработает со стилями. Сначала создадим стиль для основного контейнера, потом приведем в порядок список. Нам необходимо, чтобы список был горизонтальным. И конечно создадим стили управления.

#container { width:600px; margin:50px auto; border:1px solid #ccc; background:#fff; padding:5px; } #tabs { list-style:none; margin:3px 0; padding:0; } #tabs li { display:inline; margin:0px 1px 0 0; } #tabs li a { padding:4px; text-decoration:none; color:#3366cc; border:1px solid #e0e0e0; font-size:11px; font-family:Tahoma; } #tabs li a:hover { background:#3399cc; color:#f0f0f0; } #container div { border:1px solid #ccc; padding:5px; background:#eee; } #tabs li a.selected { background:#eee; color:#333; cursor:default; }

Сейчас займемся непосредственно созданием вкладок. Для этого, как Вы, наверное, уже догадались, мы будем использовать jQuery. Для начала скачайте библиотеку jQuery. Присоедините jQuery к сайту.

<script language="JavaScript" type="text/javascript" src="js/jquery1.4.2.js"></script>

Добавьте код для создания вкладок.

var tabcontainers=$(‘#container > div’); //скрываем каждый контейнер tabcontainers.hide(); $(‘#tabs > li a’).click(function(){ //при нажатии на вкладку навигации tabcontainers.hide(); //показывается содержимое соответствующего контейнера tabcontainers.filter(this.hash).fadeIn(); $(‘#tabs > li a’).removeClass(‘selected’); $(this).addClass(‘selected’); return false; }).filter(‘:first’).click();//ставим значение первой страницы

В первую очередь скрипт делает все содержимое контейнеров невидимым. При нажатии на ссылку скрипт проверяет ее HREF, а затем открывает соответствующий контейнер. На этом все.

Вот что у нас должно получиться:

Этап 01

Создайте новый документ размером 700х700 пикселей. Сначала включите сетку (View > Grid) и активируйте выравнивание по сетке (View > Snap to Grid). Далее, нам нужно, чтобы промежуток между линиями сетки составлял 10 пикселей. Пройдите в меню Edit > Preferences > Guides & Grid и введите число 10 в поле «Gridline every» и 1 в поле «Subdivisions». Вам также нужно будет открыть информацию панель (Info) для ускорения рабочего процесса. Таким образом, вы без труда сможете увидеть все значения ширины и высоты для любой фигуры. Теперь выберите инструмент создания окружностей (Ellipse Tool – L) и создайте окружность с размером 510х510 пикселей. Назовите её «1», а затем пройдите в меню Object > Path > Offset path, и введите значение -10 в поле отступа (offset) и нажмите кнопку ОК. Выберите полученную фигуру, назовите её 2, а затем перейдите в меню Object > Path > Offset path и введите значение -80 пикселей в поле отступа и нажмите ОК. И снова, выберите полученную фигуру, назовите её 3, пройдите в меню Object > Path > Offset path, введите значение -10 в поле отступа и нажмите ОК. Назовите новую полученную фигуру 4.

Создание базы данных.

Для хранения вариантов голосования нам и голосов, мы будем использовать MySql базу данных. Структура базы данных выглядит следующим образом.

CREATE TABLE IF NOT EXISTS `options` ( `id` int(11) NOT NULL auto_increment, `ques_id` int(11) NOT NULL, `value` varchar(300) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=1; CREATE TABLE IF NOT EXISTS `questions` ( `id` int(11) NOT NULL auto_increment, `ques` text NOT NULL, `created_on` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=1; CREATE TABLE IF NOT EXISTS `votes` ( `id` int(11) NOT NULL auto_increment, `option_id` int(11) NOT NULL, `voted_on` datetime NOT NULL, `ip` varchar(16) default NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=1;

У нас есть созданная база данных под названием poll. В ней три таблицы.

В таблице questions хранятся вопросы для голосования.

В таблице options хранятся параметры конкретного вопроса.

В таблице votes хранятся сведения о каждом голосе, которые отдали пользователи.

Надеюсь, что создание MySql базы данных не составит труда.

PHP код.

Вначале мы будем создавать сценарий вывода вопросов голосования.

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

$conn=mysql_connect(‘localhost’, ‘root’, ‘password’) or die("Невозможно подключиться к базе данных"); mysql_select_db("polls"); $query=mysql_query("SELECT id, ques FROM questions ORDER BY id DESC LIMIT 1"); while($row=mysql_fetch_assoc($query)){ //отображает вопросы echo "<p class="pollques" >".$row["ques"]."</p>"; $poll_id=$row["id"]; } // параметры отображения с радио-кнопки $query=mysql_query("SELECT id, value FROM options WHERE ques_id=$poll_id"); if(mysql_num_rows($query)){ echo ‘<div id="formcontainer" ><form method="post" id="pollform" action="’.$_SERVER['PHP_SELF'].’" >’; echo ‘<input type="hidden" name="pollid" value="’.$poll_id.’" />’; while($row=mysql_fetch_assoc($query)){ echo ‘<p><input type="radio" name="poll" value="’.$row['id'].’" id="option-’.$row['id'].’" /> <label for="option-’.$row['id'].’" >’.$row['value'].’</label></p>’; } echo ‘<p><input type="submit" value="Голосовать" /></p></form>’; }

Затем нам необходимо обработать голоса пользователей.

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

$query=mysql_query("SELECT * FROM options WHERE id=’".intval($_POST["poll"])."’"); if(mysql_num_rows($query)) { $query="INSERT INTO votes(option_id, voted_on, ip) VALUES(‘".$_POST["poll"]."’, ‘".date(‘Y-m-d H:i:s’)."’, ‘".$_SERVER['REMOTE_ADDR']."’)"; if(mysql_query($query)) { //Голос добавлен в базу данных setcookie("voted".$_POST['pollid'], ‘yes’, time()+86400*300); } else { echo "Произошла ошибка обработки запроса: ".mysql_error(); } }

Вначале мы проверяем, чтобы убедиться, что этот пользователь еще не голосовал. Кроме того, здесь мы используем функцию intval(), чтобы только цело значение проходило для выбранного варианта. После проверки голос пользователя будет добавлен в базу данных.

Мы уже создали сценарий вывода вопросов и обработчик голосования. Сейчас мы будем создавать вывод результатов.

После того, как пользователь проголосовал, нам нужно вывести все результаты голосования. Для этого мы будем использовать очень легкий способ.

$query=mysql_query("SELECT COUNT(*) as totalvotes FROM votes WHERE option_id IN(SELECT id FROM options WHERE ques_id=’$poll_id’)"); while($row=mysql_fetch_assoc($query)) $total=$row['totalvotes']; $query=mysql_query("SELECT options.id, options.value, COUNT(*) as votes FROM votes, options WHERE votes.option_id=options.id AND votes.option_id IN(SELECT id FROM options WHERE ques_id=’$poll_id’) GROUP BY votes.option_id"); while($row=mysql_fetch_assoc($query)){ $percent=round(($row['votes']*100)/$total); echo ‘<div class="option" ><p>’.$row['value'].’ (<em>’.$percent.’%, ‘.$row['votes'].’ votes</em>)</p>’; echo ‘<div class="bar ‘; if($_POST['poll']==$row['id']) echo ‘ Ваш голос ‘; echo ‘" style="width: ‘.$percent.’%; " ></div></div>’; } echo ‘<p>Результат: ‘.$total.’</p>’;

Отображать результаты мы будем на основании информации, какую мы имеем в таблице. Для этого мы будем использовать Sql функцию GROUP BY, чтобы установить ширину процентной шкалы голосов на основании полученных голосов пользователей. Весь код PHP вставим в файл под названием poll.php.

HTML код

Структура HTML кода довольно проста. Всю тяжелую работу у нас будет выполнять jQuery. Нам нужно только создать контейнер, в котором будет форма голосования или отображение результатов.

<div id="container" > <h1>Пользовательское голосование</h1> <div id="pollcontainer" > </div> <p id="loader" >Загрузка…</p> </div>

JavaScript код

Первым действием осуществим загрузку формы голосования.

При загрузке страницы, мы будем загружать форму для голосования. А если пользователь уже проголосовал, то будет загружаться результат голосования.

var loader=$(‘#loader’); var pollcontainer=$(‘#pollcontainer’); loader.fadeIn(); //Загрузка формы голосования $.get(‘poll.php’, », function(data, status){ pollcontainer.html(data); animateResults(pollcontainer); pollcontainer.find(‘#viewresult’).click(function(){ //если пользователь хочет увидеть результат loader.fadeIn(); $.get(‘poll.php’, ‘result=1′, function(data,status){ pollcontainer.fadeOut(1000, function(){ $(this).html(data); animateResults(this); }); loader.fadeOut(); }); //предупреждение по умолчанию return false; }) })

После того, как пользователь проголосовал, нам нужно выполнить обработку голосов. Для проверки голосов пользователя вначале нам нужно проверить, выбрал ли пользователь хоть один вариант. Затем после обработки PHP сценарием, отобразить результат. Результат мы будем отображать, используя функцию animateResults.

(‘#pollform’).submit(function(){ var selected_val=$(this).find(‘input[name=poll]:checked’).val(); if(selected_val!=»){ // Опубликовать данные, только если значение выбранной loader.fadeIn(); $.post(‘poll.php’, $(this).serialize(), function(data, status){ $(‘#formcontainer’).fadeOut(100, function(){ $(this).html(data); animateResults(this); loader.fadeOut(); }); }); } //предупреждение по умолчанию return false; });

Примечание! Не забудьте в начало HTML страницы добавить jQuery. Весь JavaScript код можно вставить, как отдельным файлом, так и написать в HTML странице.

На этот, пожалуй, и все.

ШАГ №1

Начнем. Предположим, что у нас есть контейнер Div с идентификатором content, в котором будут отображаться полученные данные с сервера. Для выполнения этого действия мы вызовем JavaScript функцию записи параметра ID.

Первое, что нам необходимо сделать, это убедится, что у нас подключена библиотека jQuery, а также создана функция для Ajax запроса.

<script language="javascript" src="/path_to_jquery/jquery.js" ></script> <script language="javascript"> function get_record_id(record_id) { } </script>

ШАГ №2

Далее мы будем использовать jQuery функцию загрузки, в которую мы поместим наш идентификатор content.

function get_record_id(record_id) { $(‘#content’).load() }

ШАГ №3

Функция загрузки принимает три аргумента: HTTP запрос, способ загрузки, а также функция обработки вызова. Выглядит это примерно так:

function get_record_id(record_id) { $(‘#content’).load(/controller/method,p,function(str){ }); }

Давайте немного поговорим об этой функции. CodeIgniter по имени контроллера создает URL адрес, а затем функцию внутри класса контроллера, который будет обрабатывать запрос. Если Ваш сервер не поддерживает mod-rewrite, вам необходимо будет с начала добавить index.php. Значение str внутри функции обратного вызова является результатом работы Ajax запроса. Он имеет очень большой смысл при использовании функции .load, еще этот запрос нам пригодится при использовании других функций jQuery и Ajax, $.post и $.get, которые говорят сами за себя.

ШАГ №4

var p = {}; //экземпляр масива p[record_id] = record_id //присваивает значение record_id переменной.

Вот и все что нам необходимо было сделать. Полная функция выглядит следующим образом:

function get_record_id(record_id) { var p = {}; p[record_id] = record_id $(‘#content’).load(/controller/method,p,function(str){ }); }

ШАГ №5

На стороне CodeIgniter у нас есть контроллер и метод загрузки, который выглядит примерно так:

class Controller { function Controller() { parent::CI; } function method() { } }

Важной частью является функция method(), поскольку она будет содержать часть.

ШАГ №6

Первое, что нам необходимо сделать в CodeIgniter, это получить значение объекта запроса. Это достаточно просто выполнить с помощью $_POST [record_id]. Также Вы можете загрузить копию базы данных, чтобы могли получать записи из нее. Таким образом, загрузите библиотеку базы данных, а затем загрузите конкретную модель. Затем мы хотим отправить идентификатор записи в базу данных, получить итоговые данные, и передать его обратно в функцию.

function method() { $record_id = $_POST[record_id]; //присваивает идентификатор записи $this->load->library(database); //загружает запись базы данных для подключения к базе данных $this->load->model(records); //внутри папки ystem/application/models создаются модели на основе процедуры. $results = $this->records->get_record($record_id); //получаем записи из базы данных }

ШАГ №7

В данный момент нам необходимо перейти к файлу records.php в папке model. Поскольку CodeIgniter использует структуру Модель-Просмотр-Структура, деятельность базы данных, процесс обработки сервера. CodeIgniter это должен делать самостоятельно без Вашей помощи.

Внутри файла records.php необходимо создать метод, который будет называться get_record. Для записи мы будем использовать первичный ключ ID, положим полученные данные в массив и отправим их обратно в контейнер.

function get_record($record_id) { $this->db->where(ID,$record_id); //ишем строку в которой совпадает ID $query = $this->db->get(record_table); //получаем данные, которые присваиваем переменной $query $row = $query->row(); //получаем первую строку в результате. В этом случае только одна строка никогда не будет возвращена. $results[record][$row->ID][name] = $row->name; //создаем мгновенный массив, содержащий возвращенные значения на основе ключа return $results; //отправляем отчет на контроллер }

Деликатной часть этого кода является массив. Сейчас эта часть кода Вам может показаться сложной, но скоро вы увидите, как он становится легче.

ШАГ №8

Поскольку мы побывали в контроллере, у нам имеется еще одна линия, которую необходимо добавить в функцию method(). Сейчас функция должна выглядеть следующим образом:

function method() { $record_id = $_POST[record_id]; //присваивает идентификатор записи $this->load->library(database); //загружает запись базы данных для подключения к базе данных $this->load->model(records); //внутри папки ystem/application/models создаются модели на основе процедуры. $results = $this->records->get_record($record_id); //получаем записи из базы данных $this->load->view(AJAX_record,$results); }

ШАГ №9

Файл AJAX_record.php должен находиться в папке system/application/views. Имейте в виду, что когда Вы передаете массив для просмотра, он будет открыт в папке views. Таким образом, путь к файлу записи в настоявшее время $record, вместо $results[record]. Кроме того, внутри будет стандартная HTML разметка, что-то вроде этого:

< ?php foreach($record as $id=>$value) { ?> Имя, связанное с этим запись:: < ?php print $value[name]; ?> < ?php } ?>

Выходом будет PHP запрос, что загружается в контейнер DIV с идентификатором content. CodeIgniter и jQuery делает данную динамическую загрузку легко с помощью Ajax.

На этом все. Спасибо за внимание.

Перед началом прохождения урока, Вам необходимо скачать библиотеку jQuery и плагин jQuery Cycle.

Шаг №1. Создаем HTML каркас

Так как в примере я не вижу смысла создавать сложный дизайн, мы будем использовать очень легкие HTML и CSS макеты. HTML код будет, например, таким:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""l1/DTD/xhtml1-transitional.dtd"> <html xmlns="l"> <head> <title> JQuery Слайд-шоу </title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> </head> <body> <div id="myslides"> <img src="/images/capitol.jpg" /> <img src="/images/flowers.jpg" /> <img src="/images/countryscene.jpg" /> </div> </body> </html>

Как Вы можете заметить, я создал очень простой макет слайд-шоу, который состоит из простого тега div с идентификатором "myslides". Важно! Все картинки, из которых будет состоять слайд-шоу, необходимо поместить в один тег div.

Шаг №2. Создание таблиц стилей CSS

Далее, конечно, займемся CSS стилями.

body { background: rgb(50,50,50); } #myslides { width: 370px; height: 220px; padding: 0; margin: 0 auto; } #myslides img { padding: 10px; border: 1px solid rgb(100,100,100); background-color: rgb(230,230,230); width: 350px; height: 200px; top: 0; left: 0 }

Итак, что же мы сделали? Главное, нам необходимо убедится, что контейнер div с идентификатором "myslides" имеет фиксированную высоту и ширину. В этом примере мы установили высоту и ширину элемента myslides равную высоте и ширине изображений.

Теперь давайте посмотрим, что у нас должно получиться.

Шаг №4. JavaScript код

Сейчас переходим к самой интересной части нашего урока. Для того чтобы слайд-шоу заработало сначала необходимо подключить библиотеку jQuery и плагин jQuery Cycle. Между тегами <head> вставьте следующий код:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.js"></script>

Ниже разместим, маленький скрипт, который позволяет запустить эффект.

<script type="text/javascript"> $(document).ready(function(){ $(‘#myslides’).cycle(); }); </script>

Первая линия написанного сценария, создает название функции. Вторая линия, вызывает элемент myslides и передает его в цикл. Вот и все! Если заново откроете HTML файл слайд-шоу, то уже увидите слайд шоу. Но на этом еще не все. До сих пор мы создали стандартный переход, далее мы будем его улучшать.

Настройка слайд-шоу

Сейчас мы посмотри, как изменить переход в слайд шоу. Я собираюсь показать, как можно изменить скорость перехода и изменить сам переход.

Настройка плагина очень проста. Если Вы хотите изменить переход, то необходимо чуть-чуть изменить код скрипта.

$(‘#myslides’).cycle({ fx: ‘cover’ });

Теперь мы зададим время перехода.

$(‘#myslides").cycle({ fx: ‘cover’, speed: 500 });

Еще одна вещь, какую мы можем сделать, это уменьшить время тайм-аута, тоисть время необходимое для каждого перехода.

$(‘#myslides’).cycle({ fx: ‘cover’, speed: 500, timeout: 2000 });

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

shuffle

$(‘#myslides’).cycle({ fx: ‘shuffle’, easing: ‘backout’, delay: -4000 });

zoom

$(‘#myslides’).cycle({ fx: ‘zoom’, sync: false, delay: -2000 });

turndown

$(‘#myslides’).cycle({ fx: ‘turnDown’, delay: -4000 });

curtainX

$(‘#myslides’).cycle({ fx: ‘curtainX’, sync: false, delay: -2000 });

scrollRight

$(‘#right’).cycle({ Fx:’scrollRight’, next:’#right’, timeout: 0, easing:’backinout’ });

Полный программный код

Ваш конечный HTML файл должен выглядеть следующим образом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""l1/DTD/xhtml1-transitional.dtd"> <html xmlns="l"> <head> <title> JQuery Слайд-шоу </title> <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> <script type="text/javascript" src="js/jquery-1.4.2.js">/script> <script type="text/javascript" src="js/jquery.cycle.all.js">/script> <script type="text/javascript"> $(document).ready(function(){ $(‘#myslides’).cycle({ fx: ‘cover’, speed: 500, timeout: 2000 }); }); </script> </head> <body> <div id="myslides"> <img src="/images/capitol.jpg" /> <img src="/images/flowers.jpg" /> <img src="/images/countryscene.jpg" /> </div> </body> </html>

Заключение

На простом примере Вы смогли увидеть, как работает плагин jQuery Cycle. Имейте в виде, что этот плагин имеет практически неограниченные возможности.