Skip to content

Commit

Permalink
supports jQM 1.2.0 + added popup support
Browse files Browse the repository at this point in the history
  • Loading branch information
@taitems
taitems committed Nov 6, 2012
1 parent fd219d4 commit 8db0923
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 58 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
iOS-Inspired Theme for jQuery Mobile
======

- Supports jQuery Mobile 1.2.0

Distributed under the [MIT License](http://en.wikipedia.org/wiki/MIT_License).

[View Demo](http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/)
60 changes: 49 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<title>iOS Inspired jQuery Mobile Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="ios_inspired/styles.css" />
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
<link href="ios_inspired/styles.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
// all dialog buttons should close their parent dialog
Expand All @@ -17,11 +17,15 @@
$.mobile.defaultPageTransition = "slide";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#footerTabs {
background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
}
.ui-listview sup {
font-size: 0.6em;
color: #cc0000;
}
</style>

</head>
Expand All @@ -44,7 +48,7 @@ <h1>Page Header</h1>
<li><a href="#formElements">Form Elements</a></li>
<li><a href="#listViews">List Views</a></li>
<li><a href="#dialogs">Dialogs</a></li>
<!--<li><a href="api-pages.html">API documentation</a></li>-->
<li><a href="#popups">Popups <sup>New!</sup></a></li>
</ul>

<br />
Expand Down Expand Up @@ -105,13 +109,15 @@ <h1>Form Elements</h1>
</fieldset>
</div>

<a disabled="disabled" data-role="button">Inactive &lt;a&gt;</a>
<a disabled="disabled" data-role="button" class="ui-btn-plain">Inactive &lt;a&gt;</a>

<a data-role="button" class="ui-btn-plain">Active &lt;a&gt;</a>

<a data-role="button">Active &lt;a&gt;</a>
<button disabled="disabled" class="ui-btn-plain">Inactive &lt;button&gt;</button>

<button disabled="disabled">Inactive &lt;button&gt;</button>
<button class="ui-btn-plain">Active &lt;button&gt;</button>

<button>Active &lt;button&gt;</button>
<p><small>Does the above look funny? Consider it a bug in jQuery mobile where the classes from the underling &lt;button&gt; are not being attached to the new DOM</small></p>

</div>

Expand Down Expand Up @@ -289,11 +295,11 @@ <h1>Dialogs</h1>

<div data-role="content">

<a href="#allDialogExample" data-role="button" data-rel="dialog" data-transition="slideup">All the options</a>
<a href="#allDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">All the options</a>

<a href="#deleteDialogExample" data-role="button" data-rel="dialog" data-transition="slideup">Delete Example</a>
<a href="#deleteDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Delete Example</a>

<a href="#postDialogExample" data-role="button" data-rel="dialog" data-transition="slideup">Post Something</a>
<a href="#postDialogExample" class="ui-btn-plain" data-role="button" data-rel="dialog" data-transition="slideup">Post Something</a>

</div>

Expand Down Expand Up @@ -323,6 +329,38 @@ <h1>Footer Tabs</h1>
</div><!-- /footer -->

</div>

<div data-role="page" id="popups" data-theme="b">

<div data-role="header" data-position="fixed">
<h1>Popups</h1>
<a href="#" data-rel="back">Back</a>
</div><!-- /header -->

<div data-role="content">

<a href="#popupBasic" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup</a>

<a href="#popupOverlay" data-rel="popup" data-role="button" class="ui-btn-plain">Open Popup with Overlay</a>

<a href="#popupiOS" data-rel="popup" data-role="button" class="ui-btn-plain">iOS Style Popup</a>

<div data-role="popup" data-transition="fade" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>

<div data-role="popup" data-transition="fade" data-overlay-theme="a" id="popupOverlay">
<p>This is a completely basic popup, but with an overlay<p>
</div>

<div data-role="popup" data-transition="fade" data-theme="a" data-position-to="window" id="popupiOS">
<img src="ios_inspired/images/tick.png">
<p>Saved<p>
</div>

</div>

</div>


</body>
Expand Down
Binary file added ios_inspired/images/tick.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
145 changes: 98 additions & 47 deletions ios_inspired/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,56 @@
padding-top: 39px;/* fix for fixed toolbar mode */
}


/* === IN PAGE BUTTON === */
.ui-btn.ui-btn-plain {
padding: 0;
background: #FFF;
border: 1px solid #bbbbbb;
border-radius: 10px;
box-shadow: none;
background-clip: padding-box;
}
.ui-btn.ui-btn-plain .ui-btn-inner {
background: #FFF;
box-shadow: none;
border-radius: 10px;
}
.ui-btn.ui-btn-plain .ui-btn-inner .ui-collapsible-heading-toggle {
background: none;
padding: 15px 0;
}
.ui-btn.ui-btn-plain .ui-btn-text {
font-weight: bold;
font-size: 17px;
color: #000;
text-shadow: none;
}
.ui-btn.ui-btn-plain.ui-disabled {
opacity: 1;
}
.ui-btn.ui-btn-plain[disabled] {
cursor: default;
}
.ui-btn.ui-btn-plain[disabled] span, .ui-btn.ui-disabled span {
color: #aaaaaa;
}
/* button active */
.ui-btn.ui-btn-plain.ui-btn-down-c .ui-btn-inner {
background: #008bf5; /* Old browsers */
background: -moz-linear-gradient(top, #008bf5 0%, #0f5be6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008bf5), color-stop(100%,#0f5be6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #008bf5 0%,#0f5be6 100%); /* IE10+ */
background: linear-gradient(to bottom, #008bf5 0%,#0f5be6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bf5', endColorstr='#0f5be6',GradientType=0 ); /* IE6-9 */
}
.ui-btn.ui-btn-plain.ui-btn-down-c span {
color: #FFF;
text-shadow: none;
}

/* === HEADER BARS - DEFAULT AND BLACK === */
.ui-header {
border: 0 none;
Expand Down Expand Up @@ -65,10 +115,18 @@
background: #ffffff;
}

.ui-listview li.ui-btn-active {
color: #FFF;
.ui-listview .ui-btn-down-c {
background: #106ce5;
}
.ui-listview .ui-btn-down-c a {
color: #FFF;
text-shadow: none;
}
.ui-listview .ui-icon-arrow-r {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.ui-listview .ui-li-divider {
padding-top: 0.4em;
Expand Down Expand Up @@ -118,13 +176,13 @@ a.ui-slider-handle {
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset;
box-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.75) inset;
background: #fafafa; /* Old browsers */
background: -moz-linear-gradient(top, #fafafa 0%, #d4d4d4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#d4d4d4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fafafa 0%,#d4d4d4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fafafa 0%,#d4d4d4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fafafa 0%,#d4d4d4 100%); /* IE10+ */
background: linear-gradient(top, #fafafa 0%,#d4d4d4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#d4d4d4',GradientType=0 ); /* IE6-9 */
background: -moz-linear-gradient(top, #fafafa 100%, #d4d4d4 0%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(100%,#fafafa), color-stop(0%,#d4d4d4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* IE10+ */
background: linear-gradient(top, #fafafa 100%,#d4d4d4 0%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
}
input.ui-slider-input {
display: none !important;
Expand Down Expand Up @@ -185,57 +243,21 @@ div.ui-btn .ui-btn-inner {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0bccd', endColorstr='#6d84a2',GradientType=0 ); /* IE6-9 */
}


/* === PAGE BUTTON === */
.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
padding: 0;
background: #FFF !important;
border: 1px solid #bbbbbb;
border-radius: 10px;
box-shadow: none;
background-clip: padding-box;
}
.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-inner {
background: #FFF !important;
box-shadow: none;
}

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-inner .ui-collapsible-heading-toggle{
background: none;
padding: 15px 0 !important;
}

.ui-page:not(.ui-dialog) .ui-content .ui-btn:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) .ui-btn-text {
font-weight: bold;
font-size: 17px;
color: #000;
text-shadow: none;
}
.ui-page:not(.ui-dialog) .ui-content .ui-btn.ui-disabled:not(.ui-slider-handle):not(label):not(li):not(.ui-btn-left):not(.ui-btn-right):not(.ui-input-clear) {
opacity: 1;
}
.ui-btn[disabled] {
cursor: default;
}
.ui-btn[disabled] .ui-btn-text, .ui-btn.ui-disabled .ui-btn-text {
color: #aaaaaa !important;
}


.ui-dialog {
background: rgba(0, 0, 0, 0.6) none !important;
margin: 0;
}
.ui-dialog .ui-dialog-contain {
max-width: 100%;
width: 100%;
position: static;
}
.ui-dialog .ui-content {
position: absolute;
bottom: 0;
width: 100%;
max-width: 100%; /* fixes issue #24 */
padding: 0.75em 0;
padding: 0.75em;
margin: 0;
border-top: 1px solid #45484d;
background: #a8b1bd; /* Old browsers */
Expand All @@ -252,6 +274,9 @@ div.ui-btn .ui-btn-inner {
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.ui-dialog .ui-btn {
Expand Down Expand Up @@ -638,6 +663,32 @@ input.ui-input-text, .ui-input-search {
#tabC.ui-btn-active .ui-icon {
background: url(images/tabSprite.png) -32px -64px no-repeat;
}

/* === UI POPUPS === */
.ui-popup {
background: rgba(0,0,0,0.75);
color: #FFF;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.ui-popup p {
color: #FFF;
text-shadow: none;
}
.ui-popup.ui-body-a {
width: 150px;
height: 150px;
}
.ui-popup.ui-body-a img {
margin: 30px auto 20px auto;
display: block;
}
.ui-popup.ui-body-a p {
text-align: center;
font-size: 1.1em;
font-weight: bold;
}


/* === NAVIGATION BAR === */
Expand Down

0 comments on commit 8db0923

Please sign in to comment.