2011年10月29日 星期六

看看jquery的Mobile長甚麼樣子

 










(ps.素材是借網路的)

有些網站都建議可以把每一個連結的頁分開,就是可以從index.html連到別的html,聽起來似乎是很正規的作法結果我竟然看不懂這種做法,還好後來google到全部寫在一個html的Demo,稍微懂了點....真是太好了....。


好久沒來打一下心得,不過這陣子真是忙到翻掉,忙就算了還不知道自己得到了甚麼,真是讚阿= = ....。
好吧不管了,來說一下jquery可以應用在手機版網頁的事情,如果去灌一下dreamweaver cs5.5的人都知道為甚麼adobe竟然會有.5的這種奇怪的版本,沒有錯就是為了迎合大眾需求特地多了一個專門為行動裝置而設計的,當然啦...關於5.5的新書只是在最後一節多了這一個部分,還蠻....,恩= = ,真是買不下去,有種為了趕著印刷才放在最後一章節的感覺.... (感覺而已....),挨不過,也沒甚麼時間看這種書說實在.... 。
而且我雖然打開了jquerymobile還是看不懂那個範本才真的是好笑了...,別人只要花一小時看的東西我竟然看了好幾個小時,挨,漸漸了解資質差就是要認命這件事情。不過今天晚上總算有摸出一點脈絡了,謝天謝地阿....


怎麼開始呢?

優雅的點開notepad++或dreamweaver,這個...大部分的模板幾乎是這個樣子。剛開始跟一般網頁架構的確是沒兩樣呦。
<!DOCTYPE html>
<html>
<head>
<title>頁面標題</title>
<link rel="stylesheet" href="載入mobile的css" />
<script src="載入jquery的js"></script>
<script src="載入jqueryMobile的js"></script> 
</head>
<body> 
//body部分目前先省略
</body>
</html>
 ps:

 簡單來說要做jQueryMobile,一定要有這3個東西在你的頁面~
 jQuery Mobile的CSS sytlesheet
 jQuery庫
 jQuery的Mobile.js




body部分
key完以上這段,來說明一下body裡面要放甚麼。通常body裡面,會是這樣的結構

<body> 
<div data-role="page">

 <div data-role="header">
  <h1>Page Title</h1>
 </div><!-- 這是header -->

 <div data-role="content">
  <p>Page content goes here.</p>
 </div><!-- 這是content -->

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div><!-- 這是footer -->
</div><!-- 這樣是一個page -->






沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...