zombie45
zombie's dev story
zombie45

공지사항

  • 분류 전체보기
    • iPhone
    • Study

인기 글

최근 댓글

최근 글

티스토리

반응형

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록
  • 글쓰기
전체 방문자
오늘
어제

태그

  • CI/CD
  • 큰파일
  • android_key_hash
  • FocusScope
  • appDelegate
  • Flutter
  • flutter l10n helper
  • code spell checker
  • cache
  • Nodejs node express expressjs
  • Box2d cocos2dx cocos2d-x
  • TextInputAction
  • caching
  • intl
  • nextFocus
  • 오블완
  • l10nization
  • 자동배포
  • flutter_localizations
  • cspell
  • actions
  • jks
  • UIViewController
  • 큰폴더
  • Animtaion
  • textformfield
  • 티스토리챌린지
  • cocoapods-binary-cache
  • 카카오 로그인
  • 안드로이드
hELLO · Designed By 정상우.
zombie45

zombie's dev story

Study

jQuery Mobile Buttons

2012. 10. 23. 20:32

reading "Teach Yourself jQuery Mobile In 24 Hours"

these are some buttons you can use


<!DOCTYPE html>

<html>

<head>

<title>Buttons jQuery Mobile</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<style type="text/css">

.ui-icon-custom-sams {

background-image:url("custom-icon-sams.png");

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

.ui-icon-custom-sams {

background-image: url("custom-icon-sams-hd.png");

background-size: 18px 18px;

}

}

</style>

</head>

<body>

<div data-role="page">

<div data-role="header"><h1>Buttons</h1></div>

<div data-role="content">

<p>Link-based button</p>

<a href="#" data-role="button">Link-based</a>

<p>&lt;button&gt; Element</p>

<button type="button">Button</button>

<p>&lt;input type="submit"&gt;</p>

<input type="submit" value="Submit" />

<p>&lt;input type="button"&gt;</p>

<input type="button" value="Button"/>

<p>&lt;input type="reset"&gt;</p>

<input type="reset" value="Reset" />

<p>&lt;input type="image"&gt;</p>

<input type="image" value="Image" />

<a href="#" data-role="button" data-corners="false">Squared</a>

<a href="#" data-role="button">Rounded</a>

<a href="#" data-role="button" data-corners="false">Squared</a>

<a href="#" data-role="button" data-shadow="false">No Shadow</a>

<a href="#" data-role="button" data-corners="false" data-shadow="false">Squared no Shadow</a>

<a href="#" data-role="button">Full Width Button</a>

<a href="#" data-role="button" data-inline="true">Inline Button</a>

<a href="#" data-role="button" data-inline="true">Also an Inline Button</a>

<div class="ui-grid-a">

<div class="ui-block-a"><a href="#" data-role="button">Left</a></div>

<div class="ui-block-b"><a href="#" data-role="button">Right</a></div>

</div>

<a href="#" data-role="button" data-icon="arrow-l">Click left</a>

<a href="#" data-role="button" data-icon="arrow-r">Click right</a>

<a href="#" data-role="button" data-icon="arrow-u">Click Up</a>

<a href="#" data-role="button" data-icon="arrow-d">Click Down</a>

<a href="#" data-role="button" data-icon="delete">Delete</a>

<a href="#" data-role="button" data-icon="plus">Plus</a>

<a href="#" data-role="button" data-icon="minus">Minus</a>

<a href="#" data-role="button" data-icon="check">Check</a>

<a href="#" data-role="button" data-icon="gear">Gear</a>

<a href="#" data-role="button" data-icon="refresh">Refresh</a>

<a href="#" data-role="button" data-icon="forward">Forward</a>

<a href="#" data-role="button" data-icon="back">Back</a>

<a href="#" data-role="button" data-icon="star">Star</a>

<!-- With icon position -->

<a href="#" data-role="button" data-icon="alert" data-iconpos="notext">Alert</a>

<a href="#" data-role="button" data-icon="info" data-iconpos="top">Info</a>

<a href="#" data-role="button" data-icon="home" data-iconpos="right">Home</a>

<a href="#" data-role="button" data-icon="search" data-iconpos="bottom">Search</a>

<!-- Custom icon -->

<a href="#" data-role="button" data-icon="custom-sams">Custom icon</a>

</div>

<div data-role="footer" data-position="fixed">

<h4>footer section</h4>

</div>

</div>

</body>

</html>

반응형

'Study' 카테고리의 다른 글

Finder에서 보기 안될때  (0) 2012.11.19
php POST/REQUEST testing through url  (0) 2012.11.03
cocos2d unable to load font  (0) 2012.10.22
SenchaSDKTools error after installation  (0) 2012.10.14
cocos2d 2.0  (0) 2012.10.12
    'Study' 카테고리의 다른 글
    • Finder에서 보기 안될때
    • php POST/REQUEST testing through url
    • cocos2d unable to load font
    • SenchaSDKTools error after installation
    zombie45
    zombie45
    잡다한 개발

    티스토리툴바