進擊的網頁前端技術！

主導覽清單

主導覽圖片

指定民宿資訊

標簽名稱

功能

備註

<core-toolbar>

工具列

放在畫面最上方，導覽本頁及切換至其他頁面

<paper-icon-button>

功能按鈕

切換頁面，並提供視覺反饋

<page-item>

清單項目

顯示指定民宿資訊

<core-header-panel>

主題面板

提供water-fall動態效果的主題面板，用來顯示民訴圖片

主導覽清單HTML

(使用JQueryMobile ListView filter功能)

<ul id="list" data-role="listview" data-inset="true" is="listview" data-filter="true">

     <li is="listview-li" style="padding:0" data-id="{{siID}}">

       <paper-item horizontal center layout class="item">

         <div>

           <img src="{{iconURI}}">

         </div><b>{{storeName}}</b>

       </paper-item>

     </li>

   </ul>

//註冊點選清單項目

$('#list').gk('onRow', onRow);

//取得點選的資料ID(指定民宿詳細資料)、民宿圖片

function onRow(li) {

 qq = li;

 var id = li.data('id');

 var imgSrc = li.find('img').attr('src');

 setHeaderPanel(id, imgSrc);

 changePage("#detail", "slide");

}

//切換到民宿詳細資訊頁面 (為了提供觸控視覺反饋，故意延遲0.5秒)

function changePage(pageId, tran, isR) {

 function change() {

   $.mobile.changePage(pageId, {

     transition: tran,

     reverse: isR

   });

 }

 setTimeout(change, 500);

}

主導覽圖片 HTML

<ul id="gallery" data-role="listview" data-inset="true" is="listview">

     <li style="display:inline-block;padding:2px" is="listview-li" data-id="{{siID}}">

       <paper-item horizontal center layout style="height:100%;padding:0px">

         <div>

           <img src="{{iconURI}}" class="ui-li-icon">

         </div>

       </paper-item>

       <div class="store">{{storeName}}</div>

     </li>

   </ul>