一、定義全域的header
這個header是所有panel預設的header,需要在<div id="afui">內部，也就是和<div id="content">同一級的位置添加一個header 標籤，並且id必須是header
例如：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>jqMobi</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head> <body> <div id="afui"> <header id="header"> <a id="backButton" href="javascript:;" class="button" >Back</a> <h1>Single Page App</h1> </header> <div id="content"> <div id="home"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="sketch"> <p>sketch</p> </div> </div> <div id="navbar"> <a href="#home" id='navbar_home' class='icon home'>home</a> <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a> <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a> </div> </div></body></html>運行效果
二、panel引入header標籤
在<div id="afui">內部，也就是和<div id="content">同一級的位置頂一個header 標籤，並且命名id。 然後再需要這個header的pane添加一個屬性data-header="custom_header"
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>jqMobi</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head> <body> <div id="afui"> <div id="content"> <div id="home" data-header="custom_header"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="sketch"> <p>sketch</p> </div> </div> <header id="custom_header"> <a id="backButton" href="javascript:;" class="button" >Back</a> <h1>Single Page App</h1> </header> <div id="navbar"> <a href="#home" id='navbar_home' class='icon home'>home</a> <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a> <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a> </div> </div></body></html>
三、給每個panel自訂header
在需要自訂的panel的內部定義一個header，這個header此時只屬於該panel
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>jqMobi</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head> <body> <div id="afui"> <div id="content"> <div id="home" class="panel"> <header> <a id="backButton" href="javascript:;" class="button" >Back</a> <h1>Single Page App</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="sketch"> <p>sketch</p> </div> </div> <div id="navbar"> <a href="#home" id='navbar_home' class='icon home'>home</a> <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a> <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a> </div> </div></body></html>四、給相應的標籤定義title屬性，系統也會自動產生header
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>jqMobi</title><link href="css/af.ui.css" rel="stylesheet" type="text/css"/><link href="css/icons.css" rel="stylesheet" type="text/css"/><script src="appframework.js" type="text/javascript"></script><script src="ui/appframework.ui.js" type="text/javascript"></script></head> <body> <div id="afui"> <div id="content"> <div id="home" title="首頁" class="panel" selected="true" data-footer="custom_footer"> </div> <div id="about" title="關於我們" class="panel" data-footer="custom_footer"> </div> <header id="custom_header"> <h1>首頁</h1> </header> <footer id="custom_footer"> <a href='#home' class='icon home'>首頁</a> <a href='#about' class='icon info'>關於我們</a> </footer> <nav> <div class='title'>Home</div> <ul> <li><a class="icon home mini" href="#main">Home</a></li> </ul> </nav> </div> </div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
