ããå¨æ¬æä¸ï¼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"
}, { duration: 300, queue: false });
pagebody.animate({
left: "290px"
}, { duration: 300, queue: false });
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { duration: 180, queue: false });
pagebody.animate({
left: "0px"
}, { duration: 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);
ãã