jQuery 모바일 테마
jQuery Mobile은 "a"에서 "b"까지 2가지 테마 스타일을 제공합니다. 각 테마의 버튼, 도구 모음, 콘텐츠 블록 등은 색상이 일관되지 않으며 각 테마의 시각적 효과도 다릅니다. .
요소의 데이터 테마 속성을 설정하여 애플리케이션의 모양을 사용자 정의할 수 있습니다.
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
| Value | Description | Instance |
|---|---|---|
| a | 페이지의 배경이 회색이고 검은색입니다. text 머리와 하단 모두 회색 배경에 검은색 텍스트 회색 배경에 검은색 텍스트가 있는 버튼 활성화된 버튼과 링크는 파란색 배경에 흰색 텍스트가 있습니다 입력 입력 상자의 자리 표시자 속성 값은 밝은 회색이며, 값 값은 검정색 | 사용해 보세요 |
| b | 페이지는 검정색 배경에 흰색 텍스트가 있습니다. 머리와 하단은 모두 검정색 배경에 흰색 텍스트입니다. 버튼은 흰색 텍스트와 차콜색 배경이 있습니다. 활성화된 버튼과 링크에는 흰색 텍스트와 파란색 배경이 있습니다. 입력 입력 상자의 자리 표시자 속성 값은 밝은 회색이고 값은 흰색입니다. | 사용해 보세요 |
버튼 스타일은 class="ui-btn"을 사용하고, "ui- 버튼을 회색(기본값) 또는 검정색으로 설정하는 btn-a|b" 클래스:
<a href="#" class="ui-btn ui-btn-a|b">按钮</a>
 | "a" 테마의 스타일은 대부분의 요소에 사용되며 하위 요소는 일반적으로 테마의 스타일을 상속합니다. 상위 요소. |
|---|
테마 헤더 및 하단
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" id="pageone"> <div data-role="header" data-theme="b"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>文本内容</p> <a href="#" class="ui-btn">按钮</a> <p>插入 <a href="#">链接</a> !</p> </div> <div data-role="footer" data-theme="b"> <h1>页面底部</h1> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
테마 대화 상자의 헤더 하단
인스턴스
<!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" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>欢迎!</p> <a href="#pagetwo" class="ui-btn">跳转到页面二</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header" data-theme="b"> <h1>主题对话框!</h1> </div> <div data-role="main" class="ui-content"> <p>我是一个主题对话框 - 我的头部和底部是黑色的!</p> <a href="#pageone" class="ui-btn ui-btn-inline">跳转到页面一</a> </div> <div data-role="footer" data-theme="b"> <h1>对话框底部文本</h1> </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" id="pageone"> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>普通按钮:</p> <a href="#" class="ui-btn">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-b">黑色按钮</a> <br> <p>内联按钮:</p> <a href="#" class="ui-btn ui-btn-inline">灰色按钮 (默认)</a> <a href="#" class="ui-btn ui-btn-inline ui-btn-b">黑色按钮</a> </div> <div data-role="footer"> <h1>页面底部</h1> </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" id="pageone"> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</a> <a href="#" class="ui-btn ui-btn-b ui-shadow ui-corner-all ui-icon-search ui-btn-icon-notext">Search</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">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all">Show Popup</a>
<div data-role="popup" id="myPopup" class="ui-content" data-theme="b">
<a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<p>我是主题弹窗!.</p>
<p>在我右上角有个关闭按钮</p>
<p><b>提示：</b> 你可以点击弹窗的外部区域来关闭弹窗。</p>
</div>
</div>
<div data-role="footer">
<h1>底部文本</h1>
</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-btn-b 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-btn-b 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-btn-b ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </div> </body> </html>인스턴스
rr 리
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" id="pageone">
<div data-role="header">
<h1>文本头部</h1>
</div>
<div data-role="main" class="ui-content">
<p>导航栏将会主动基础父元素的样式。可以通过添加 data-theme 属性来自定义按钮样式。</p>
</div>
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
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" id="pageone">
<div data-role="panel" id="myPanel" data-theme="b">
<h2>主题面板</h2>
<p>我是一个主题面板!</p>
<p> 你可以点击面板之外的区域来关闭，或者按下 Esc 键或滑动来关闭。</p>
</div>
<div data-role="header">
<h1>页面头部</h1>
</div>
<div data-role="main" class="ui-content">
<p>点击以下按钮打开面板。</p>
<a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
</div>
<div data-role="footer">
<h1>页面底部</h1>
</div>
</div>
</body>
</html>
인스턴스 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
테마 축소 가능 목록
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" id="pageone"> <div data-role="header"> <h1>文本头部</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h1>点我 - 我是可折叠的！</h1> <p>我是折叠的内容</p> </div> </div> <div data-role="footer"> <h1>文本底部</h1> </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" id="pageone"> <div data-role="main" class="ui-content"> <h2>有序列表</h2> <ol data-role="listview" data-theme="b"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li data-theme="a"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ol> <br> <h2>无序列表</h2> <ul data-role="listview"> <li><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li data-theme="b"><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> <br> </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" id="pageone"> <div data-role="main" class="ui-content"> <h2>分割按钮实例</h2> <ul data-role="listview" data-inset="true" data-split-theme="b"> <li data-role="divider" data-theme="a">浏览器</li> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome 是一款免费的开源浏览器。发布于 2008 年。</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox 是一款来自 Mozilla。发布于 2004 年。</p> </a> <a href="#download" data-rel="dialog" data-transition="pop">下载浏览器</a> </li> </ul> </div> </div> <div data-role="page" id="download"> <div data-role="main" class="ui-content"> <h3>分割按钮实例</h3> <p>下面的按钮仅供演示。</p> <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-check ui-btn-icon-left" data-rel="back">下载</a> <a href="#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-delete ui-btn-icon-left" data-rel="back">取消</a> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
새 테마 추가
jQuery Mobile은 모바일 페이지에 새 테마를 추가할 수 있습니다.
CSS 파일을 수정하여 새 테마를 추가하거나 편집합니다(jQuery Mobile을 다운로드한 경우). 스타일 모듈을 복사한 다음 문자 클래스 이름(c-z)을 다시 명령하고 좋아하는 색상과 글꼴을 스타일에 추가하면 됩니다.
HTML 문서에 새로운 테마 스타일을 추가할 수도 있습니다. 도구 모음 클래스 추가: ui-bar-(a-z), 텍스트 콘텐츠 클래스 추가: ui-body-(a-z), 페이지 클래스 추가: UI 페이지 테마 -(a-z) .
Example
<!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" id="pageone"> <div data-role="header"> <h1>主题化的可折叠列表</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible" data-theme="b" data-content-theme="b"> <h4>A</h4> <ul data-role="listview"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> </ul> </div> <div data-role="collapsible" data-theme="b" data-content-theme="a"> <h4>B</h4> <ul data-role="listview"> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> </ul> </div> </div> <div data-role="footer"> <h1>此处是页脚文本</h1> </div> </div> </body> </html>
예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
| 이전 버전의 jQuery Mobile에서는 JavaScript를 사용하여 상위 항목을 상속했습니다. 요소의 테마 스타일. 버전 1.4 이후 프레임워크는 성능 개선에 더 많은 관심을 기울이고 더 이상 상속을 위해 JavaScript를 사용하지 않고 순수한 CSS를 사용합니다. jQuery Mobile 팀은 ThemeRoller에서 이를 위한 도구를 만들었습니다. 이 도구를 사용하면 이전 테마를 업그레이드하여 최신 버전과 호환되도록 만들 수 있습니다. |
|---|
