jQuery_Mobileボタン学習
12455 ワード
jQueryMobile1.4前のbuttonの書き方:
aラベルはdata-roleのプロパティを使用し、デフォルトはフィレットです.(これで丸みのbuttonが正常に表示されます)
1.4以前は、いくつかの属性を追加するとdata-が使用されます... data-... 例えば、data-inline=「true」、data-icon=「back」など、1.4になるとすべて1つのclass属性で済ませ、何を使ってclassに追加します.例えば、class=「ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left」など、これまでbuttonの書き方は1.4でもサポートされていました
1.4のbuttonの書き方、コード:(デフォルトはフィレットではありません)
フィレットのボタン:
1.4ボタン総括コード:
inputラベル定義のボタン要約コード:
aラベルはdata-roleのプロパティを使用し、デフォルトはフィレットです.(これで丸みのbuttonが正常に表示されます)
<a href="#" data-role="button">Anchor</a>
<button>Button</button>1.4以前は、いくつかの属性を追加するとdata-が使用されます... data-... 例えば、data-inline=「true」、data-icon=「back」など、1.4になるとすべて1つのclass属性で済ませ、何を使ってclassに追加します.例えば、class=「ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left」など、これまでbuttonの書き方は1.4でもサポートされていました
1.4のbuttonの書き方、コード:(デフォルトはフィレットではありません)
<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>フィレットのボタン:
<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<button class="ui-btn ui-corner-all">Button</button>1.4ボタン総括コード:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery-mobile-study</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Css/CssMobile/jquery.mobile-1.4.2.css" rel="stylesheet">
<link href="Css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
<script src="Js/JsMobile/jquery-1.11.0.js">
</script>
<script src="Js/JsMobile/jquery.mobile-1.4.2.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1> </h1>
</div>
<div role="main" class="ui-content" style="background: red;">
<p>Basic markup</p>
<!--Basic markup-->
<a href="#" class="ui-btn">Anchor</a>
<button class="ui-btn">Button</button>
<p>Corners</p>
<!--Corners-->
<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<button class="ui-btn ui-corner-all">Button</button>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" >No text</a>
<div id="custom-border-radius">
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a>
</div>
<p>shadow</p>
<!--shadow-->
<a href="#" class="ui-btn ui-shadow">Anchor</a>
<button class="ui-btn ui-shadow">Button</button>
<p>inline</p>
<!--inline-->
<a href="#" class="ui-btn ui-btn-inline ui-corner-all">Anchor</a>
<button class="ui-btn ui-btn-inline ">Button</button>
<p>Theme</p>
<!--Theme-->
<a href="#" class="ui-btn">Anchor - Inherit</a>
<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a>
<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a>
<button class="ui-btn">Button - Inherit</button>
<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>
<p>Mini</p>
<!--Mini-->
<a href="#" class="ui-btn ui-mini">Anchor</a>
<button class="ui-btn ui-mini">Button</button>
<p>Icons</p>
<!--Icons-->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a>
<button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>
<p>Icon position</p>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a>
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left">Left</a>
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right">Right</a>
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-top">Top</a>
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-bottom">Bottom</a>
<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">Icon only</a>
<p>Icon shadow</p>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon">Anchor</a>
<p>Theme B:</p>
<button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon ui-btn-b">Button</button>
<p>Disabled</p>
<a href="#" class="ui-btn ui-state-disabled">Disabled anchor via class</a>
<button disabled="">Button with disabled attribute</button>
<p>Native button</p>
<button data-role="none">Button</button>
</div>
<div data-role="footer">
<h3> </h3>
</div>
</div>
</body>
</html>inputラベル定義のボタン要約コード:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery-mobile-study</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Css/CssMobile/jquery.mobile-1.4.2.css" rel="stylesheet">
<link href="Css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" />
<script src="Js/JsMobile/jquery-1.11.0.js">
</script>
<script src="Js/JsMobile/jquery.mobile-1.4.2.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>jQuery-mobile button </h1>
</div>
<div role="main" class="ui-content">
<p>Input buttons</p>
<form>
<input type="button" value="Button">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<p> </p>
<form>
<div class="ui-input-btn ui-btn ui-corner-all ui-btn-inline ui-shadow">
<input type="button" data-enhanced="true" value="Input value"> Input value
</div>
</form>
<p>Corners</p>
<form>
<input type="button" value="Has corners by default">
<input type="button" data-corners="false" value="Unset corners">
<div class="ui-input-btn ui-btn ui-corner-all">
Enhanced
<input type="button" data-enhanced="true" value="Enhanced">
</div>
</form>
<p>delete icon button</p>
<form>
<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only">
<div id="custom-border-radius">
<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">
Enhanced - Icon only
<input type="button" data-enhanced="true" value="Enhanced - Icon only">
</div>
</div>
</form>
</div>
<p> Shadow</p>
<form>
<input type="button" value="Has shadow by default">
<input type="button" data-shadow="false" value="Unset shadow">
<div class="ui-input-btn ui-btn ui-shadow">
Enhanced
<input type="button" data-enhanced="true" value="Enhanced">
</div>
</form>
<p>Inline</p>
<form>
<input type="button" data-inline="true" value="Input">
<div class="ui-input-btn ui-btn ui-btn-inline">
Enhanced
<input type="button" data-enhanced="true" value="Enhanced">
</div>
</form>
<p>Theme</p>
<form>
<input type="button" value="Input - Inherit">
<input type="button" data-theme="a" value="Input - Theme swatch A">
<input type="button" data-theme="b" value="Input - Theme swatch B">
<div class="ui-input-btn ui-btn">
Enhanced - Inherit
<input type="button" data-enhanced="true" value="Enhanced - Inherit">
</div>
<div class="ui-input-btn ui-btn ui-btn-a">
Enhanced - Theme swatch A
<input type="button" data-enhanced="true" value="Enhanced - Theme swatch A">
</div>
<div class="ui-input-btn ui-btn ui-btn-b">
Enhanced - Theme swatch B
<input type="button" data-enhanced="true" value="Enhanced - Theme swatch B">
</div>
</form>
<p>Mini</p>
<form>
<input type="button" data-mini="true" value="Input">
<div class="ui-input-btn ui-btn ui-mini">
Enhanced
<input type="button" data-enhanced="true" value="Enhanced">
</div>
</form>
<p>Icon shadow</p>
<input type="button" data-theme="b" data-icon="delete" data-iconshadow="true" value="Input">
<div class="ui-input-btn ui-btn ui-btn-b ui-icon-delete ui-btn-icon-left ui-shadow-icon">
Enhanced
<input type="button" data-enhanced="true" value="Enhanced">
</div>
<p>Disabled</p>
<form>
<input type="button" disabled="" value="Input button with disabled attribute">
<div class="ui-input-btn ui-btn ui-state-disabled">
Enhanced
<input type="button" disabled="" data-enhanced="true" value="Enhanced">
</div>
</form>
<p>Native inputs</p>
<form>
<input type="button" data-role="none" value="Button">
<input type="submit" data-role="none" value="Submit">
<input type="reset" data-role="none" value="Reset">
</form>
<div data-role="footer">
<h3> </h3>
</div>
</div>
</body>
</html>