와 동일한 수준에 헤더 태그를 추가해야 하며, id는 header여야 합니다. ."/> 내부, 즉

와 동일한 수준에 헤더 태그를 추가해야 하며, id는 header여야 합니다. .">

집 >웹 프론트엔드 >H5 튜토리얼 >Xiaoqiang의 HTML5 모바일 개발로의 길(40) - jqMobi에서 헤더 정의를 연습하는 여러 가지 방법

Xiaoqiang의 HTML5 모바일 개발로의 길(40) - jqMobi에서 헤더 정의를 연습하는 여러 가지 방법

黄舟원래의: 2017-02-15 13:08:531834검색

1. 전역 헤더 정의

이 헤더는 모든 패널의 기본 헤더이며 4d3cdd0d6096fc7d10c3f51eabfb6ad0 내부에 있어야 합니다. 즉, c849ef5745f95b0ab40a18c475e9bcc1 내부, 즉 1a73dfa055a76c3606858f541f15b00f와 동일한 레벨에 헤더 태그를 넣고 이름을 id로 지정합니다. 그런 다음 이 헤더가 필요한 창에 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> 
	<p id="afui">
		
        <p id="content">
            <p 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>
            </p>
            <p id="sketch">
                <p>sketch</p>
            </p>
        </p>
        <header id="custom_header">
            <a id="backButton" href="javascript:;" class="button" >Back</a>
            <h1>Single Page App</h1>
        </header>
        <p id="navbar">
                <a href="#home" id=&#39;navbar_home&#39; class=&#39;icon home&#39;>home</a>
                <a href="#sketch" id=&#39;navbar_pencil&#39; class=&#39;icon pencil&#39;>Sketch</a>
                <a href="#picture" id=&#39;navbar_picture&#39; class=&#39;icon picture&#39;>Picture</a>
        </p>
    </p>
</body>
</html>

속성을 추가합니다. 3. 각 패널 헤더를 사용자 지정합니다.

사용자 정의가 필요한 패널 내부 헤더를 정의하세요. 이 헤더는 현재 패널에만 속합니다.

<!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> 
	<p id="afui">
        <p id="content">
            <p 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>
            </p>
            <p id="sketch">
                <p>sketch</p>
            </p>
        </p>
       
        <p id="navbar">
                <a href="#home" id=&#39;navbar_home&#39; class=&#39;icon home&#39;>home</a>
                <a href="#sketch" id=&#39;navbar_pencil&#39; class=&#39;icon pencil&#39;>Sketch</a>
                <a href="#picture" id=&#39;navbar_picture&#39; class=&#39;icon picture&#39;>Picture</a>
        </p>
    </p>
</body>
</html>

4. Give 해당 태그는 제목 속성을 정의하고 시스템은 자동으로 헤더

<!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> 
	<p id="afui">
    	<p id="content">
        	<p id="home" title="首页" class="panel" selected="true"
            	data-footer="custom_footer">
            
            </p>
            <p id="about" title="关于我们" class="panel"
            	data-footer="custom_footer">
                
           	</p>
            <header id="custom_header">
            	<h1>首页</h1>
            </header>
            <footer id="custom_footer">
            	<a href=&#39;#home&#39; class=&#39;icon home&#39;>首页</a>
                <a href=&#39;#about&#39; class=&#39;icon info&#39;>关于我们</a>
            </footer>
            <nav>
            	<p class=&#39;title&#39;>Home</p>
                <ul>
                	<li><a class="icon home mini" href="#main">Home</a></li>
                </ul>
            </nav>
        </p>
    </p>
</body>
</html>

위는 Xiaoqiang의 HTML5 모바일 개발로 가는 길(40) - jqMobi에서 헤더 정의를 연습하는 여러 가지 방법입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!

성명：

이전 기사：Xiaoqiang의 HTML5 모바일 개발 도로(39) - jqMobi 플러그인 json 형식 ActionSheet다음 기사：Xiaoqiang의 HTML5 모바일 개발 도로(39) - jqMobi 플러그인 json 형식 ActionSheet

Xiaoqiang의 HTML5 모바일 개발로의 길(40) - jqMobi에서 헤더 정의를 연습하는 여러 가지 방법

관련 기사