Опубликован: 12.12.2015 | Доступ: свободный | Студентов: 663 / 93 | Длительность: 15:42:00
Лекция 26:

Управление компонентами пользовательского интерфейса

< Лекция 25 || Лекция 26 || Лекция 27 >
Аннотация: В разрабатываемом приложении компоненты интерфейса будут менять свое поведение и внешний вид
Ключевые слова: jQuery, mobile, файл, INDEX, компонент, list, video

Форматирование табличных данных

Библиотека 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.


Рис. 26.5.

Файл 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" />
 </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.

Файл index.html


Рис. 26.7.
<!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 >