Xiaoqiang의 HTML5 모바일 개발 도로(43) - JqueryMobile 헤더, 도구 모음 및 탭 표시줄 탐색

1. 헤더

1. 헤더 및 바닥글 추가

rrreerrree

기본 헤더는 화면 상단에 표시되며, 화면 외부로 스크롤하면 헤더가 슬라이드됩니다. 화면에서 data-position 속성을 추가하여 고정 헤더를 생성할 수 있습니다

<p data-role="header">
    <h1>第 1 页</h1>
</p>

<p data-role="footer">
    <h4>页面脚注</h4>
</p>

date-theme 속성을 사용하여 헤더의 테마를 조정할 수 있습니다. 기본 테마는 black data-theme="a입니다. "

<p data-role="header" data-position="fixed">
    <h1>第 1 页</h1>
</p>

페이지 컨테이너에 data-fullscreen="true"를 추가한 후 화면을 클릭하면 머리글과 바닥글이 나타나고 다시 클릭하면 사라집니다.

2. 돌아가기 버튼 추가

<p data-role="footer" data-position="fixed">
    <h4>页面脚注</h4>
</p>

왼쪽에 텍스트 아이콘 버튼이 있고 오른쪽의 순수 아이콘 버튼.

3. 분할된 도구 모음 추가

<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>



<p data-role="page" id="page">
    <p data-role="header" data-position="fixed">
        <h1>第 1 页</h1>
    </p>
    </p><p data-role="content">
        </p><ul data-role="listview">
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
            <li><a href="#page2">第 2 页</a></li>
            <li><a href="#page3">第 3 页</a></li>
            <li><a href="#page4">第 4 页</a></li>
        </ul>
    <p></p>
    <p data-role="footer" data-position="fixed">
        <h4>页面脚注</h4>
    </p>
<p></p>

<p data-role="page" id="page2">
    </p><p data-role="header">
        </p><h1>第 2 页</h1>
    <p></p>
    <p data-role="content">
        内容
    </p>
    <p data-role="footer">
        <h4>页面脚注</h4>
    </p>
<p></p>

<p data-role="page" id="page3">
    </p><p data-role="header">
        </p><h1>第 3 页</h1>
    <p></p>
    <p data-role="content">
        内容
    </p>
    <p data-role="footer">
        <h4>页面脚注</h4>
    </p>
<p></p>

<p data-role="page" id="page4">
    </p><p data-role="header">
        </p><h1>第 4 页</h1>
    <p></p>
    <p data-role="content">
        内容
    </p>
    <p data-role="footer">
        <h4>页面脚注</h4>
    </p>
<p></p>

<p data-role="header" data-position="fixed">
    <a href="#" data-icon="back">返回</a>
    <h1>第 1 页</h1>
    <a href="#" data-icon="plus" data-iconpos="notext"/>
</p>

4. >

위는 Xiaoqiang의 HTML5 모바일 개발 경로(43) - JqueryMobile 헤더, 도구 모음 및 탭 표시줄 탐색 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어를 따르세요. 홈페이지(www.php.cn)!