Разработка насыщенных веб-интерфейсов

Скачать 427.64 Kb.

Название	Разработка насыщенных веб-интерфейсов
страница	3/4
Дата публикации	25.08.2013
Размер	427.64 Kb.
Тип	Документы

100-bal.ru > Информатика > Документы

1 2 3 4

(которые, в свою очередь, располагаются в этом документе между тегами и ) сразу после тега

когда таблица стилей находится, описана в самом документе, она может располагаться в нём между тегами (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;

.....

type="text/css">

body {

color: red;

}

Построение правила CSS

В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений.Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

селектор, селектор {

свойство: значение;

свойство: значение;

свойство: значение;

}

Особенности CSS3

http://vremenno.net/html-css/css3-review/

Javascript

Библиотека JavaScript — сборник классов и/или функций на языке JavaScript.

Наиболее испольтзуемыми сегодня являются:

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

Возможности:

Движок кроссбраузерных CSS-селекторов Sizzle[2], выделившийся в отдельный проект;

Переход по дереву DOM, включая поддержку XPath как плагина;

события;

визуальные эффекты;

AJAX-дополнения;

JavaScript-плагины.

MooTools — это свободный JavaScript-фреймворк для разработки кроссбраузерных веб-приложений и веб-сервисов.

MooTools является модульным, объектно-ориентированным фреймворком, созданным для помощи разработчикам JavaScript.

MooTools совместим и протестирован с браузерами: Safari 2+, Internet Explorer 6+, Firefox 2+ (и другими, основанными на движке Gecko), Opera 9+.

Фреймворк MooTools используется в CMS Typolight, Joomla (1.5-1.7), ZoneMinder, MODx.

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

Prototype — JavaScript фреймворк, упрощающий работу с Ajax и некоторыми другими функциями. Несмотря на его доступность в виде отдельнойбиблиотеки, он обычно используется программистами вместе с Ruby on Rails, Tapestry, script.aculo.us и Rico.

Заявлено, что данный фреймворк поддерживается следующими браузерами: Internet Explorer (Windows) 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0+ иOpera 9.25+. Поддержка данных браузеров подразумевает, что фреймворк поддерживается также Camino, Konqueror, IceWeasel, Netscape 7+,SeaMonkey, и др., которые принадлежат этим же семействам.

Возможности: В Prototype присутствуют самые разные способы упрощения создания JavaScript приложений, от сокращённого вызова некоторых функций языка до сложных методов обращения кXMLHttpRequest. Ниже приведены некоторые примеры.

Для обращения к DOM элементу HTML страницы обычно используется функция document.getElementById:

document.getElementById("id_of_element")

Функция $() уменьшает код до:

$("id_of_element")
Например, для указания цвета текста можно использовать следующий код:

$("id_of_element").style.color = "#ffffff";

Или, используя расширенные функции Prototype:

$("id_of_element").setStyle({color: '#ffffff'});

Yahoo! UI Library (YUI) — библиотека JavaScript для создания богатых интерактивными возможностями приложений или/и пользовательского интерфейса. Использует AJAX, анимацию, надстройки над XMLHttpRequest и DOM, «drag-and-drop», слайдеры, слайды, календари, деревья, табы и другие новинки, составляющие понятие «Web 2.0». Собственное API для работы с JavaScript.

YUI включает множество компонентов, среди них

Автоматический подбор вводимой фразы (AutoComplete)

Менеджер истории браузера (Browser History Manager)

Нестандартные кнопки (Button)

Календарь (Calendar)

Построение диаграмм (Charts)

Подбор цвета на палитре (Color Picker)

AJAX-компонент (Connection Manager)

Удобная работа с куками (Cookie)

Генерация различных блоков (Container)

Хранение данных (DataSource)

Создание удобных таблиц, с сортировками и редактированием «на лету» (DataTable)

Работа с dom-деревом (Dom)

Перемещение пользователем элементов на странице (Drag & Drop)

Удобная работа с элементами страницы (Element)

Создание и управление событиями (Event)

Прием дополнительных css- и javascript-файлов (Get)

и тд

jQuery UI — библиотека JavaScript с открытым исходным кодом для создания насыщенного пользовательского интерфейса в веб-приложениях, часть проекта jQuery. Построена поверх главной библиотеки jQuery и предоставляет разработчику упрощенный доступ к её функциям взаимодействия, анимации и эффектов, а также набор виджетов.

Возможности:
Взаимодействия

Draggable — Предоставляет элементу возможность быть перемещенным с помощью мыши (см. Drag & Drop)

Droppable — Контролирует где перетаскиваемый элемент может быть брошен (см. Drag & Drop)

Resizable — Предоставляет возможность динамически изменять размеры элемента с помощью мыши

Selectable — Предоставляет возможность выделять один или несколько элементов пользовательского интерфейса из группы

Sortable — Представляет возможность сортировки для группы элементов

[править]Виджеты

Accordion — виджет «Аккордеон»

Autocomplete — Поле ввода с автодополнением

Button — улучшенная кнопка, может также быть флажком (check box) или радио-кнопкой (radio button); все виды кнопки могут располагаться на панели инструментов (toolbar)

Datepicker — виджет для выбора даты или диапазона дат

Dialog — диалоговое окно, которое может иметь любое содержимое

Progressbar — полоса прогресса

Slider — слайдер

Tabs — вкладки

[править]Эффекты

Color Animation — анимирует изменение цвета компонента

Toggle Class, Add Class, Remove Class, Switch Class — анимируют изменение набора класса стилей компонента (см. CSS)

Effect — множество эффектов связанных с появлением и исчезновением компонентов интерфейса

Toggle — функция переключения между режимами видимости компонентов с использованием эффектов

Hide — функция исчезновения компонента с использованием эффектов

Show — функция появления компонента с использованием эффектов

[править]Утилиты

Position — установка положения элемента относительно позиции другого элемента (выравнивание)

jQuery AJAX
Query(..).load

Начнем с самого простого – загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

?

1

2

3

4

5

$(document).ready(function(){              // по окончанию загрузки страницы

    $('#example-1').click(function(){      // вешаем на клик по элементу с id = example-1

        $(this).load('ajax/example.html'); // загрузку HTML кода из файла example.html

    })

});

Пример подгружаемых данных (содержимое файла example.html):

?

1

2

3

Example<br/>

Data Loaded By AJAX<br/>

Bye-Bye

jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

async – асинхронность запроса, по умолчанию true

cache – вкл/выкл кэширование данных браузером, по умолчанию true

contentType – по умолчанию “application/x-www-form-urlencoded”

data – передаваемые данные – строка иль объект

dataFilter – фильтр для входных данных

dataType – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

global – тригер – отвечает за использование глобальных AJAX Event’ов, по умолчанию true

ifModified – тригер – проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false

jsonp – переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)

processData – по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем

scriptCharset – кодировочка – актуально для JSONP и подгрузки JavaScript’ов

timeout – время таймаут в миллисекундах

type – GET либо POST

url – url запрашиваемой страницы

Локальные AJAX Event’ы:

beforeSend – срабатывает перед отправкой запроса

error – если произошла ошибка

success – если ошибок не возникло

complete – срабатывает по окончанию запроса

Для организации HTTP авторизации (О_о):

username – логин

password – пароль

Пример javaScript’а:

?

1

2

3

4

5

6

7

8

9

$.ajax({

    url: '/ajax/example.html',             // указываем URL и

    dataType : "json",                     // тип загружаемых данных

    success: function (data, textStatus) { // вешаем свой обработчик на функцию success

        $.each(data, function(i, val) {    // обрабатываем полученные данные

            /* ... */

        });

    }

});

jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

callback функция, которой будет скормлен результат (необязательный параметр)

тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

callback функция, которой будет скормлен результат (необязательный параметр)

тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

$(document).ready(function(){                          // по завершению загрузки страницы

    $('#example-3').click(function(){                  // вешаем на клик по элементу с id = example-3

        $.post('ajax/example.xml', {}, function(xml){ // загрузку XML из файла example.xml

            $('#example-3').html('');

            $(xml).find('note').each(function(){       // заполняем DOM элемент данными из XML

                $('#example-3').append('To: '   + $(this).find('to').text() + '
')

                               .append('From: ' + $(this).find('from').text() + '
')

                               .append(''    + $(this).find('heading').text() + '
')

                               .append(           $(this).find('body').text() + '
');

            });

        }, 'xml');                                     // указываем явно тип данных

    })

});

Файл example.xml:

?

1

2

3

4

5

6

7

xml version="1.0" encoding="UTF-8"?>

<note>

    <to>Toveto>

    <from>Janifrom>

    <heading>Reminderheading>

    <body>Don't forget me this weekend!body>

note>

Пример работы
jQuery.getJSON

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

?

01

02

03

04

05

06

07

08

09

10

11

12

$(document).ready(function(){                            // по завершению загрузки страницы

    $('#example-4').click(function(){                    // вешаем на клик по элементу с id = example-4

        $.getJSON('ajax/example.json', {}, function(json){ // загрузку JSON данных из файла example.json

            $('#example-4').html('');

                                                         // заполняем DOM элемент данными из JSON объекта

            $('#example-4').append('To: '   + json.note.to + '
')

                           .append('From: ' + json.note.from + '
')

                           .append(''    + json.note.heading + '
')

                           .append(           json.note.body + '
');

        });

    })

});

Файл example.json:

?

1

2

3

4

5

6

7

8

{

    note:{

        to:'Tove',

        from:'Jani',

        heading:'Reminder',

        body:'Don\'t forget me this weekend!'

    }

}

Пример работы
jQuery.getScript

jQuery.getScript данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

url запрашиваемого скрипта

callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

?

1

2

3

4

5

6

7

$(document).ready(function(){                          // по завершению загрузки страницы

    $('#example-5').click(function(){                  // вешаем на клик по элементу с id = example-5

        $.getScript('ajax/example.js', function(){     // загрузку JavaScript'а из файла example.js

            testAjax();                                // выполняем загруженный JavaScript

        });

    })

});

Файл example.js:

?

1

2

3

function testAjax() {

    $('#example-5').html('Test completed'); // изменяем элемент с id = example-5

}

Пример работы
Обработчики подгруженного контента

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

?

01

02

03

04

05

06

07

08

09

10

11

12

// было бы, если бы контент элемента #main не подгружался AJAX'ом

$('#main a').click(function(event){

    console.log($(this).attr('href'));

    return false; // отменяем действие по умолчанию и всплытие события

});

// теперь предположим, что контент элемента #main подгружается AJAX'ом

// вносим минимум изменений в предыдущий код

$('#main a').live('click', function(event){

    console.log($(this).attr('href'));

    event.preventDefault(); // отменяем действие по умолчанию, но не трогаем bubbling - чтобы не мешать другим обработчикам

});

В данном примере используется метод live, но я бы всё же посоветовал использовать метод delegate, более подробно о данном методе описано в 6-ой части — «События»
Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства “сбора” данных из формы лучше использовать плагин jQuery Form либо родный методы serialize и serializeArray.
Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload ильOne Click Upload
Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery
Примеры использования JSONP

Отдельно стоит отметить использование JSONP – ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать – то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

http://api.domain.com/?type=jsonp&query=test&callback=?

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

1 2 3 4

	Дипломная работа разработка макета преобразователя интерфейсов Разработка макета преобразователя интерфейсов Ethernet-rs232 для системы контроля и		№4 “взаимодействие приложний на основе веб-сервисов. Технология wcf microsoft” Цель работы Стандарты веб-сервисов определяют формат сообщений, интерфейс, которому передается сообщение, правила привязки содержания сообщения...
	Презентация «Разработка веб-приложений» В ходе работы, в течении данного семестра мы изучали технологии веб-программирования и верстки позволяющие делать стабильные, удобные...		Реферат 3 3 Содержание 4 4 Определения 5 5 Введение 6 6 Основная... В ходе работы, в течении данного семестра мы изучали технологии веб-программирования и верстки позволяющие делать стабильные, удобные...
	Пояснительная записка к курсовому проекту по дисциплине «Разработка сапр» Целью работы является разработка и реализация библиотеки элементов «Отвертка» на базе системы компас 3D, с использованием методов...		Инструкция пользователя 10 заключение 13 Практически в программе... Это промышленный стандарт для работы с интерактивным контентом. Это наиболее передовая среда для создания насыщенных диалоговых веб-сайтов,...
	Пояснительная записка к курсовому проекту по дисциплине: «Разработка сапр» Целью данной работы является разработка и реализация модуля к сапр «Зубчатая передача с пересекающимися осями колес» на базе системы...		Пояснительная записка на курсовой проект по дисциплине «Разработка... Целью данной работы является разработка программы для автоматизации проектирования систем молниезащиты на базе сапр компас 3D, с...
	Правительство Российской Федерации Федеральное государственное автономное... Целью работы является разработка веб-приложения, которое а обеспечит автоматический сбор социально-демографических данных пользователей...		Правительство Российской Федерации Федеральное государственное автономное... Целью работы является разработка веб-приложения, которое а обеспечит автоматический сбор социально-демографических данных пользователей...
	Правительство Российской Федерации Федеральное государственное автономное... Целью работы является разработка веб-приложения, которое а обеспечит автоматический сбор социально-демографических данных пользователей...		Разработка для веб-версии комплекса ат-технология генератора психологических тестов Панов М. В. А все-таки она хорошая! Рассказ о русской орфографии. М., Просвещение,1964
	Программа по формированию навыков безопасного поведения на дорогах... Открытие веб-лаборатории по разработке веб-ориентированных систем автоматизации бизнес-процессов		Пояснительная записка на курсовой проект по дисциплине Разработка... Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования
	Использование технологии веб-портфолио в образовательном процессе С 2012 года – научный руководитель ит-проекта создания и развития социальной сети для ведения веб-портфолио 4portfolio ru		Пояснительная записка на курсовую работу по дисциплине Разработка... Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

Разработка насыщенных веб-интерфейсов

Построение правила CSS

Взаимодействия

[править]Виджеты

[править]Эффекты

[править]Утилиты

Query(..).load

jQuery.ajax

jQuery.get

jQuery.post

jQuery.getJSON

jQuery.getScript

Обработчики подгруженного контента

Отправка Формы

Отправка Файлов

Взаимодействие с PHP

Примеры использования JSONP

Похожие: