jQuery 모바일 도구 모음
도구 모음 요소는 일반적으로 머리글과 바닥글 내에 위치하여 탐색에 쉽게 액세스할 수 있습니다.
머리글 표시줄
머리글 표시줄에는 일반적으로 페이지 제목/로고 또는 하나 또는 두 개의 버튼(일반적으로 홈, 옵션 또는 검색)이 포함됩니다.
헤더의 왼쪽이나 오른쪽에 버튼을 추가할 수 있습니다.
다음 코드는 헤더 텍스트 왼쪽에 버튼을 추가하고 헤더 텍스트 오른쪽에 버튼을 추가합니다.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p> </div> </div> </body> </html>
Run Instance»
"Run Instance" 버튼을 클릭하여 온라인 인스턴스 보기
아래 코드는 헤더 텍스트 왼쪽에 버튼을 추가합니다:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="header"> <a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> </div> </body> </html>
Run Instance »
온라인을 보려면 "인스턴스 실행" 버튼을 클릭하세요. 예
하지만 <h1> 요소 뒤에 버튼 링크를 배치하면 오른쪽 텍스트가 표시되지 않습니다. 헤더 제목 오른쪽에 버튼을 추가하려면 클래스를 "ui-btn-right"로 지정하세요.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="header"> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">搜索</a> </div> </body> </html>
Run Instance»
"Run Instance" 버튼을 클릭하세요. 온라인 예를 보려면
| 머리에는 하나 또는 두 개의 버튼이 포함될 수 있지만 꼬리에는 제한이 없습니다. |
테일 바
테일 바는 헤더 바보다 더 유연합니다. 페이지 전체에서 더 기능적이고 변경 가능하므로 가능한 많은 버튼을 포함할 수 있습니다.
Instances
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p> </div> <div data-role="footer"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </body> </html>
예제 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
참고: 꼬리의 스타일은 머리와 다릅니다(패딩과 공백이 없고 버튼이 중앙에 위치하지 않음). 간단한 스타일을 사용하여 이 문제를 해결할 수 있습니다.
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram关注我</a> </div> </div> </body> </html>
Run Instance»
"Run Instance" 버튼을 클릭하여 온라인 인스턴스를 확인하세요
버튼을 변경할 수도 있습니다 꼬리에서 가로 또는 세로 조합 만들기:
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </div> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
머리글과 꼬리 막대 위치 지정
머리글과 꼬리는 세 가지 방법으로 배치할 수 있습니다.
인라인 - 기본값. 머리글 및 바닥글 열은 페이지 콘텐츠와 인라인입니다.
Fixed - 머리글 및 바닥글 표시줄이 페이지 상단과 하단에 고정되었습니다.
전체 화면 - 기본적으로 고정 위치 지정 모드와 동일하며 머리글 및 바닥글 표시줄이 페이지 상단과 하단에 고정됩니다. 그러나 도구 모음이 화면 밖으로 스크롤될 때 화면을 클릭하지 않으면 자동으로 다시 나타나지 않습니다. 이는 대체감을 높이는 사진이나 비디오와 같은 응용 프로그램에 매우 유용합니다. 이 모드에서는 도구 모음이 페이지 내용을 다루므로 특별한 상황에서 사용하는 것이 가장 좋습니다.
데이터 위치 속성을 사용하여 머리글 및 꼬리 열 위치 지정:
인라인 위치 지정(기본값)
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline"> <h1>行内页眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b> 如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="inline"> <h1>行内页脚</h1> </div> </div> </body> </html>
인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 보기 인스턴스
Fixed Positioning
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Fixed 页眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p><b>提示：</b> 如果滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="fixed"> <h1>Fixed 页脚</h1> </div> </div> </body> </html>
Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
전체 화면 위치 지정을 활성화하려면 data-position="fixed"를 사용하고 요소에 data-fullscreen 속성을 추가하세요.
Fullscreen Positioning
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 页眉</h1> </div> <div data-role="main" class="ui-content"><br><br> <p><b>提示:</b> T如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p><b>提示:</b> 敲击屏幕会隐藏或显示页眉和页脚。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 页脚</h1> </div> </div> </body> </html>
인스턴스 실행»
"인스턴스 실행"을 클릭하세요. 온라인 예시를 보려면 " " 버튼을 클릭하세요.
팁: 전체 화면 위치 지정은 사진, 이미지 및 비디오에 적합합니다.
팁: 고정 위치 지정 및 전체 화면 위치 지정에서는 화면을 클릭하면 헤더 표시줄과 꼬리 표시줄이 숨겨지고 표시됩니다.
추가 예제
툴바에 아이콘만 표시
툴바에 아이콘만 표시하려면 ui-btn-icon-notext 클래스를 사용할 수 있습니다.
