35 resources/button/example27.html
View file
@@ -11,10 +11,10 @@
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
height: 545px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
min-height: 545px;
}
.ui-content{
padding:10px 15px 0px 15px;
@@ -23,13 +23,42 @@
</head>

<body>
<div data-role="page" style="max-height:90px; min-height:90px;">
<div data-role="page" style="max-height:550px; min-height:550px;">
<div data-role="content" >
<p>Horizontal grouped buttons:</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
<p>Horizontal grouped buttons with icons:</p>
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
</div>
<p>Mini horizontal grouped buttons by adding <code>data-mini="true"</code> to the controlgroup:</p>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
<p>Mini horizontal grouped buttons with icons:</p>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
</div>
<p>Horizontal grouped buttons, icon only:</p>
<div data-role="controlgroup" data-type="horizontal" >
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>
<p>Mini horizontal grouped buttons, icon only:</p>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>
</div>
</div>
</body>
39 resources/button/example35.html
View file
@@ -11,10 +11,10 @@
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
height: 625px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
min-height: 625px;
}
.ui-content{
padding:10px 15px 0px 15px;
@@ -23,15 +23,48 @@
</head>

<body>
<div data-role="page" style="max-height:90px; min-height:90px;">
<div data-role="page" style="max-height:630px; min-height:630px;">
<div data-role="content" >
<p><strong>Swatch "a"</strong> on container with themed buttons inside
<div class="ui-body ui-body-a">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>
<p><strong>Swatch "b"</strong> on container with themed buttons inside
<div class="ui-body ui-body-b">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>
<p><strong>Swatch "c"</strong> on container with themed buttons inside
<div class="ui-body ui-body-c">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>
<p><strong>Swatch "d"</strong> on container with themed buttons inside
<div class="ui-body ui-body-d">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>
<p><strong>Swatch "e"</strong> on container with themed buttons inside
<div class="ui-body ui-body-e">
<a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l" data-inline="true">Swatch a</a>
<a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l" data-inline="true">Swatch b</a>
<a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l" data-inline="true">Swatch c</a>
<a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l" data-inline="true">Swatch d</a>
<a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l" data-inline="true">Swatch e</a>
</div>
</div>
</div>
</body>
9 resources/button/example8.html
View file
@@ -11,10 +11,10 @@
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 85px;
height: 215px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 85px;
min-height: 215px;
}
.ui-content{
padding:10px 15px 0px 15px;
@@ -23,9 +23,12 @@
</head>

<body>
<div data-role="page" style="max-height:90px; min-height:90px;">
<div data-role="page" style="max-height:220px; min-height:220px;">
<div data-role="content" >
<p>Creates this button with an icon:</p>
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
<p>A more compact button with the <code> data-mini="true"</code> attribute added to the button:</p>
<a href="index.html" data-role="button" data-icon="delete" data-mini="true">Delete</a>
</div>
</div>
</body>