Опубликован: 12.12.2015 | Доступ: свободный | Студентов: 688 / 118 | Длительность: 15:42:00
Специальности: Системный архитектор, Разработчик интернет-проектов
Лекция 26:
Управление компонентами пользовательского интерфейса
< Лекция 25 || Лекция 26 || Лекция 27 >
Аннотация: В разрабатываемом приложении компоненты интерфейса будут менять свое поведение и внешний вид
Форматирование табличных данных
Библиотека jquery mobile предоставляет программистам интересные возможности представления табличных данных. С одним из способов форматирования таблиц мы познакомимся на следующем примере. Данные взяты из википедии (https://ru.wikipedia.org/wiki/Перечень_коренных_малочисленных_народов_России). Создайте проект TableData, заполните файл index.html следующим содержимым.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - Single-Page</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css"/>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style type="text/css">
th {
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Форматирование табличных данных</h1>
</div>
<div data-role="main" class="ui-content">
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
<thead>
<tr>
<th data-priority="6">NationID</th>
<th>Наименование</th>
<th data-priority="1">Расселение</th>
<th data-priority="2">Численность</th>
<th data-priority="3">Антропология</th>
<th data-priority="4">Этногенез</th>
<th data-priority="5">История</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Алеуты</td>
<td>Коренное население Алеутских островов, о-вов Шумагина, а также западного берега Аляски вплоть до р. Угашика на севере</td>
<td>30000</td>
<td>Алеуты в составе арктической расы занимают особое положение, у них обнаружена примесь южных элементов тихоокеанской ветви монголоидов</td>
<td>Согласно одной, алеуты пришли с северо-восточного азиатского побережья, согласно другой — с Аляски</td>
<td>История изучения алеутов начинается со времени открытия в 1741 году Алеутских островов Великой Северной (Второй Камчатской) экспедицией (1733—1743)</td>
</tr>
<tr>
<td>2</td>
<td>Ительме?ны</td>
<td>Проживают на западе полуострова Камчатка, в основном в Тигильском районе Камчатского края и в Магаданской области</td>
<td>3193</td>
<td>Ительмены включаются в материковую группу популяций арктической малой расы северных монголоидов</td>
<td>В XVIII — начале XIX вв. ительмены делились на ряд крупных локальных подразделений, имеющих собственные самоназвания и особенности культуры: камчатскую, авачинскую, большерецкую, западную, хайрюзовскую</td>
<td>Традиционные верования ительменов — анимизм, тотемизм, фетишизм — связаны с поклонением духам — хозяевам</td>
</tr>
<tr>
<td>3</td>
<td>Кере?ки</td>
<td>Беринговский район Чукотского автономного округа (Мейныпильгыно, Хатырка, Беринговский)</td>
<td>8</td>
<td>Археологи выделяют древнекерекскую археологическую культуру (с 1-й половины 1-го тысячелетия до н. э.), происхождение которой связывают с общим протоэскалеуто-ительменским этническим пластом</td>
<td>Выделялись группы северных (наваринских, или майно-пыльгынских, самоназвание ыйулалгалакку — верхние) и южных (хатырских, самоназвание иутылалгакку — нижние) кереков. В XIX—XX веках кереков обычно относили к корякам.</td>
<td>Кереки занимались рыболовством, морским зверобойным и пушным промыслом, охотой на дикого оленя и горного барана, собирательством</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>Нижний колонтитул</h1>
</div>
</div>
</body>
</html>
Компонент Autodividers
Компонент Autodividers является расширением компонента list view и он автоматически создает разделители для list view.
Создадим проект UIComponent.
Код index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<script src="./lib/jquery.js"></script>
<script type="text/javascript" src="./lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
<link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
<script src="./js/main.js"></script>
<title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework - Single-Page</title>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Single-page application </h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-autodividers="true">
<li><a href="#">Orange</a></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Apricot</a></li>
<li><a href="#">Lemon</a></li>
<li><a href="#">Mustard</a></li>
<li><a href="#">Garlic</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Компонент Collapsible
Этот компонент позволяет разворачивать и сворачивать содержимое при нажатии.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - Single-Page</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css"/>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<script>
var collapsible = $("#collapsible").collapsible();
</script>
</head>
<body>
<div data-role="page" >
<div data-role="header" data-position="fixed" data-tap-toggle="false" >
<h1>Single-page application </h1>
</div><!-- /header -->
<div data-role="content" >
<div id="collapsible" data-role="collapsible" data-inset="false">
<h1>William Shakespeare - To be, or not to be (from Hamlet 3/1)</h1>
<div>To be, or not to be: that is the question:</br>
Whether 'tis nobler in the mind to suffer</br>
The slings and arrows of outrageous fortune,</br>
Or to take arms against a sea of troubles,</br>
And by opposing end them? To die: to sleep;</br>
No more; and by a sleep to say we end</br>
The heart-ache and the thousand natural shocks</br>
That flesh is heir to, 'tis a consummation</br>
Devoutly to be wish'd. To die, to sleep;</br>
To sleep: perchance to dream: ay, there's the rub;</br>
For in that sleep of death what dreams may come</br>
When we have shuffled off this mortal coil,</br>
Must give us pause: there's the respect</br>
That makes calamity of so long life;</br>
For who would bear the whips and scorns of time,</br>
The oppressor's wrong, the proud man's contumely,</br>
The pangs of despised love, the law's delay,</br>
The insolence of office and the spurns</br>
That patient merit of the unworthy takes,</br>
When he himself might his quietus make</br>
With a bare bodkin? who would fardels bear,</br>
To grunt and sweat under a weary life,</br>
But that the dread of something after death,</br>
The undiscover'd country from whose bourn</br>
No traveller returns, puzzles the will</br>
And makes us rather bear those ills we have</br>
Than fly to others that we know not of?</br>
Thus conscience does make cowards of us all;</br>
And thus the native hue of resolution</br>
Is sicklied o'er with the pale cast of thought,</br>
And enterprises of great pith and moment</br>
With this regard their currents turn awry,</br>
And lose the name of action. - Soft you now!</br>
The fair Ophelia! Nymph, in thy orisons</br>
Be all my sins remember'd.</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
<h4>Footer content</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Компонент Multimedia View
Этот компонент отображает аудио и видео плеер. Для начала мы воспроизведем видеоклип (можно, например, скачать с youtub клип Кристины Агилеры Candyman). Создадим папку video и скопируем туда файл Candyman.mp4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - Single-Page</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css"/>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div data-role="page" >
<div data-role="header" data-position="fixed" data-tap-toggle="false" >
<h1>Single-page application </h1>
</div><!-- /header -->
<div data-role="content" >
<div data-role="content">
<video data-controls="true" style="width:100%;" controls>
<source src="video/Candyman.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
<h4>Footer content</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Далее, предлагаю прослушать песню Аллы Борисовны Пугачевой "Я тебя поцеловала". Создадим папку Audio и запишем в нее файл Alla.mp3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="A single-page template generated by Tizen Web IDE"/>
<title>Tizen Web IDE - Tizen - jQuery Mobile - Single-Page</title>
<link rel="stylesheet" href="./css/jquery.mobile-1.3.2.css"/>
<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div data-role="page" >
<div data-role="header" data-position="fixed" data-tap-toggle="false" >
<h1>Single-page application </h1>
</div><!-- /header -->
<div data-role="content" >
<div data-role="content">
<video data-controls="true" style="width:100%;" controls>
<source src="video/Candyman.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
</div>
<div data-role="content">
<audio data-controls="true" style="width:100%;" controls>
<source src="Audio/Alla.mp3" type="audio/mpeg" />
<p>Your browser does not support the audio tag.</p>
</audio>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
<h4>Footer content</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Литература
< Лекция 25 || Лекция 26 || Лекция 27 >