概述

本文是两部分系列的展示循环显示UI模式的第二部分。 在这篇文章中，用户界面​​修改遵循Tizen UX指南。

循环显示（Page Carousel）HTML页面

HTML页面被分为不同的部分如标题栏，其次是标签式菜单，里面有图像，如下面的截图内容。

标题栏（TitleBar）

在标题栏，三个选项——视频、食谱和购物都被提供给用户进行图像旋转。 标题中的代码如下所示。

<div data-role="header" data-position="fixed">
  <h1 id="pagetitle">RECEIPES</h1>
  <div data-role="tabbar">
    <ul>
      <li id="list1"><a data-icon="star">RECEPIES</a></li>
      <li id="list2"><a data-icon="star">VIDEOS</a></li>
      <li id="list3"><a data-icon="star">SHOPPING</a></li>
      <li id="list4"><a data-icon="plus">MORE</a></li>
    </ul>
  </div>
</div>

图像循环显示（Image Carousel）

要创建具有三个图像的内容，如截图所示，对于所有图像、文本和背景的单独样式的定义被应用到“格”元素，如下图所示

<div id="carusel" class="ui-main-content">
  <div class="ui-coru-background ui-coru-item-prev">
    <img id="prev-image" class="ui-coru-image-thumb" src="./images/recepies/RECE-01.jpg" />
    <div class="ui-coru-sub-text1">First Text1</div>
    <div class="ui-coru-sub-text2">Sub Text</div>
  </div>
</div>

循环显示CSS文件

图像循环风格

所有图片的一个图片背景、图像、子文本和位置的风格如下所示

ui-main-content {
  position: relative;
  width: 100%;
  height: 75%;
  top:112px;
}
.ui-coru-background {
  width: 60%;
  background: white;
  border-radius: 4%;
}
.ui-coru-item-prev {
  position: absolute;
  left: -45%;
}
.ui-coru-item-curr {
  position: absolute;
  left: 20%;
}

.ui-coru-item-next {
  position: absolute;
  left: 85%;
}
.ui-coru-item-next1 {
  position: absolute;
  left: 150%;
}
.ui-coru-item-next2 {
  position: absolute;
  left: 215%;
}
.ui-coru-image-thumb {
  width: 92%;
  height: 80%;
  margin-top: 4%;
  margin-bottom: 4%;
  margin-right: 4%;
  margin-left: 4%;
  border-top-left-radius: 4%;
  border-top-right-radius: 4%;
}
.ui-coru-sub-text1 {
  width: 90%;
  font-size: 24px;
  color: black;
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
}
.ui-coru-sub-text2 {
  width: 90%;
  font-size: 18px;
  color: grey;
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
}

循环显示JavaScript文件

处理滑动事件

对于用户的滑动事件，基于滑动方向，将内容区域中的图像从左到右，从右向左滚动。 这个功能可以通过移动页面滚动视图实现，如下所示。

$("#content").on('swipeleft', function(e) {
  if( index < 6)
  {
    $("#carusel").animate( 	{"left": "-=65%"},"slow");
    index++ ;
    $('#pagecontrol1').pagecontrol("value", index);
  }
});

处理菜单单击事件

下面的示例代码用于激活标签菜单状态，并在内容区域中用VIDEO图像改变图像。

$("#list2").bind("vclick", function() {
$("#pagetitle").text("VIDEOS");
  var data=   ' <div  class="ui-coru-background ui-coru-item-prev">';
  data += '<img id="prev-image" class="ui-coru-image-thumb" src="./images/videos/01.jpg" />';
  data +=  '<div class="ui-coru-sub-text1">First Text1</div>';
  data  +=  '<div class="ui-coru-sub-text2">Sub Text</div>';
  data += '</div>';
  data += '<div  class="ui-coru-background ui-coru-item-curr">';
  data += '	<img id="curr-image" class="ui-coru-image-thumb" src="./images/videos/02.jpg" />';
  data += '	<div class="ui-coru-sub-text1">First Text2</div>';
  data += '	<div class="ui-coru-sub-text2">Sub Text</div>';
  data +=  '</div>';
  data += '<div  class="ui-coru-background ui-coru-item-next">';
  data +='	<img id="next-image" class="ui-coru-image-thumb" src="./images/videos/03.jpg" />';
  data += '	<div class="ui-coru-sub-text1">First Text3</div>';
  data +='	<div class="ui-coru-sub-text2">Sub Text</div>';
  data+=  '</div>';
  $("#carusel").empty().append(data);
});

屏幕截图

下面是页面循环的截图