㈠ 如何用jQuery來創建一個基於移動設備的Web App
在本文中，Jake Rocheleau將為我們展示如何用jQuery來創建一個基於移動設備的Web App。在開發過程中，我們將使用CSS3的媒體查詢功能來找出當前移動設備屏幕的的最大解析度，根據不同的解析度使用不同CSS。此外，Media Queries還可以幫助我們在小屏幕上隱藏導航菜單以展示更多的內容。我們還會使用jQuery來幫助我們使用Ajax.Load()，以便激活菜單欄和載入外部頁面內容。
LIVE DEMO
SOURCE CODE
1. 定義頁面布局
首先，我們先要查看HTML頁面，並且使用CSS樣式來確定頁面的樣式。在開頭我會跳過許多不常見的Meta標簽（對所創建的Web App沒有直接的影響）。但是我們仍然要注意一些代碼片段（在下面我已經列舉出來）。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
X-UA-Compatible是用來描述文件在某些瀏覽器上的渲染程度。不得不說， 在HTML5編程過程中這是一個非常有趣的事情。所以我不用太擔心這個問題。但重要的是，如果我們恰當地使用Meta標簽，它會給我們許多意想不到的幫助。例如加入關鍵字會被大型搜索網站自動搜集，可以設定頁面格式及刷新和讓網頁自動適應移動瀏覽器大小等。
內容主體
在BODY中，我通過ID#w創建了一個Wrapper Div。在其中我將頁面布局分成了#pagebody和#navmenu兩個部分。整個頁面的寬度為640px，所以#pagebody和#navmenu的寬度可以精確地計算。
我給導航菜單賦了一個較低的z-index值來保證#pagebody總能在最頂部面顯示。
<div id="pagebody">
<header id="toolbarnav">
<a rel="external" href="#navmenu" id="menu-btn"></a>
<h1>HK Mobile</h1>
</header>
<section id="content" class="clearfix">
<h2>Welcome to the Mobile Site!</h2>
</section>
</div>
<div id="navmenu">
<header>
<h1>Menu Links</h1>
</header>
<ul>
<li><a rel="external" href="#homepage.html" class="navlink">Home</a></li>
<li><a rel="external" href="#about.html" class="navlink">About Us</a></li>
<li><a rel="external" href="#advertise.html" class="navlink">Advertise</a></li>
<li><a rel="external" href="#write.html" class="navlink">Write for Us</a></li>
<li><a rel="external" href="#contacts.html" class="navlink">Contacts</a></li>
<li><a rel="external" href="#privacy.html" class="navlink">Privacy Policy</a></li>
</ul>
</div>
我在每個.html頁面前都添加了井字元（#）。每當點擊一個鏈接時，URL欄都會出現和下推主體內容。當引用的ID沒有被重載時，我們只能通過JavaScript來重新調用它。
2. CSS定位
我們CSS代碼中並沒有太多復雜的內容。大多數的定位工作都是通過手動完成的，完成之後才會交由jQuery來操作。同樣，這里也有一些我們要注意的代碼片段。
/** @group core body **/
#w #pagebody {
position: relative;
left: 0;
max-width: 640px;
min-width: 320px;
z-index: 99999;
}
#w #navmenu {
background: #475566;
height: 100%;
display: block;
position: fixed;
width: 300px;
left: 0px;
top: 0px;
z-index: 0;
}
上面的這段代碼分別定義了頁面中兩個部分的樣式。導航菜單的寬度為300px，這樣一來，就為我們瀏覽頁面內容留下了一點空間，打開和關閉菜單按鈕也固定在左側。這里最重要的部分就是導航菜單的z-index的屬性值和位置（z-index: 0；position: fixed）。
我們頂部欄標題也是一個有趣的部分。它被放置在一個固定的位置，會隨著頁面內容的滾動而滾動，大多數的iOS App上都有這個效果。
/** @group header **/
#w #pagebody header#toolbarnav {
display: block;
position: fixed;
left: 0px;
top: 0px;
z-index: 9999;
background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
height: 44px;
width: 100%;
max-width: 640px;
}
#w #pagebody header#toolbarnav h1 {
text-align: center;
padding-top: 10px;
padding-right: 40px;
color: #e6e8f2;
font-weight: bold;
font-size: 2.1em;
text-shadow: 1px 1px 0px #313131;
}
移動規則
很容易注意到，在背景上我使用了藍色的橫條作為標題欄。這個標題欄的大小為640x44px，從而能夠與頁面的布局保持吻合。不僅如此，我還為iPhone/iPad視網膜顯示屏設計了一張@2x圖片。大家可以從上圖看到這些圖片，或者從SOURCE CODE中獲取。
{System}/demo/img/[email protected]
{System}/demo/img/[email protected]
/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
#w #pagebody header {
background: #0b1851 url('img/[email protected]') top left no-repeat;
background-size: 640px 44px;
}
#w #pagebody header #menu-btn {
background: url('img/[email protected]') no-repeat;
background-size: 53px 30px;
}
}
菜單箭頭的設計
在導航菜單方面，我為每個菜單鏈接的右側設計了一個指向右方的箭頭圖標。相信大多數CSS3的愛好者都會喜歡這么做，這確實是一個不錯的創意。
我使用transform變數在導航內容後面創建一個小邊框，所以我們可以在左邊的框架內任意的移動，除此之外，在懸停狀態下我們可以很方便地改變邊框的顏色和樣式。更令人驚嘆的是，你只需要使用基本的HTML5和CSS3樣式就可以完成這些邊框地設計。
但首先，我們要進入JavaScript編碼世界。
#w #navmenu ul li a::after {
content: '';
display: block;
width: 6px;
height: 6px;
border-right: 3px solid #d0d0d8;
border-top: 3px solid #d0d0d8;
position: absolute;
right: 30px;
top: 45%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#w #navmenu ul li a:hover::after { border-color: #cad0e6; }
3. jQuery動畫設計
在編寫這些自定義代碼過程中，我新建了一個script.js文件。大家可以根據自己的需要來直接編寫<script> 標簽，也可以從SOURCR CODE中直接下載我的模板。
$(document).ready(function(){
var pagebody = $("#pagebody");
var themenu = $("#navmenu");
var topbar = $("#toolbarnav");
var content = $("#content");
var viewport = {
width : $(window).width(),
height : $(window).height()
};
// retrieve variables as
// viewport.width / viewport.height
在開始之前，我設置一些頁面變數，如此一來，我們就可以更為方便地引用文檔中的變數。我從沒用過視口值，但是如果你想調整動畫階段，設置視口值可以幫你一個大忙。例如：通過視口值，你可以檢查當前瀏覽器的寬度，並能夠的對你的菜單欄進行相應地縮放。
function openme() {
$(function () {
topbar.animate({
left: "290px"
}, { ration: 300, queue: false });
pagebody.animate({
left: "290px"
}, { ration: 300, queue: false });
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { ration: 180, queue: false });
pagebody.animate({
left: "0px"
}, { ration: 180, queue: false });
});
}
接下來，我為打開和關閉菜單定義了兩個重要的函數。除非我們確實需要兩種截然不同的動畫元素，否則我們可以在一個單一的函數和回調切換中完成此項設計，但不幸的是， jQuery並不能幫助我們解決這個問題，所以我們需要求助於其它的替代語法。
這兩個函數我暫且命名為topbar和pagebody。內容區域的白色背景就是pagebody；我們把標題欄放置在頁面的頂部。這就意味著每當我們點擊打開或者關閉按鈕時，我們需要把topbar和pagebody向左和向右平移290px。
4. 載入動態內容
理論上，上述代碼基本上就能滿足大部分人創建一個簡單移動的需求，但是，在這里我還想添加一些另外的東西。
每當用戶點擊一個菜單鏈接，頁面會自動關閉當前的導航欄目和顯示一個載入的GIF圖像。當頁面內容載入完成時，頁面會去除GIF圖片，並且顯示已載入好的內容。通過使用static .htm，我們可以很輕松的完成這項工作，從而避免了PHP、Ruby、Perl或者任何後端語言所帶來的困擾。
點擊設置
首先，我們需要測試導航按鈕。當用戶點擊導航按鈕，頁面會停止href的正常載入，此時，我們可以利用函數來顯示外部內容。
// loading page content for navigation
$("a.navlink").live("click", function(e){
e.preventDefault();
var linkurl = $(this).attr("href");
var linkhtmlurl = linkurl.substring(1, linkurl.length);
var imgloader = '<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>';
通過上段代碼，每當用戶點擊導航菜單鏈接時，我們會停止當前頁面載入並且設置一個完整的URL變數。此外，我還創建一個包含標准圖像Loader的HTML變數。如果你想定製自己的圖像載入方式，Ajaxload會是一個很不錯的助力。
Ajax.Load()
要實現這個功能我們需要兩段不同的代碼，下面這段代碼不僅能幫助我們關閉導航菜單和滑動文檔窗口，而且還能幫助我們使用一個較小的載入動畫來替代當前頁面內的主體內容。
closeme();
$(function() {
topbar.css("top", "0px");
window.scrollTo(0, 1);
});
當外部頁面的內容載入完成時，我們要用外部的載入頁面來取代頁面上的載入動畫。通常情況下，這將只需要幾百毫秒甚至更快，所以我設置了超時功能。
content.html(imgloader);
setTimeout(function() { content.load(linkhtmlurl, function() { /* no callback */.}) }, 1200);
㈡ 移動前端開發和Web前端開發的區別是什麼
一、方式不同：
前端開發主要是研究用戶可以看到的前端顯示界面。後端開發主要集中在邏輯功能等模塊上，用戶看不到的這些模塊。
二、技術不同：
前端開發的技術主要包括但前山不限於html5、css3、javascript、jquery、Bootstrap等技術。而後端開發是以java為例的，主要用到的技術包括但不限於Struts spring springmvc Hibernate Http協議 Servlet Tomcat伺服器等技術。慧皮中
前端開發從網頁製作演變而來
名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文握雹字為主，用戶使用網站的行為也以瀏覽為主。隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。
前端開發跟隨移動互聯網發展帶來了大量高性能的移動終端設備應用。HTML5，Node.js的廣泛應用，各類UI框架，JS類庫層出不窮，開發難度也在逐步提升。