15 docs/demos/_assets/css/jqm-demos.css
View file
@@ -108,6 +108,20 @@ div.jqm-demo-link {
.jqm-demo-link .ui-btn.ui-mini {
margin: 0;
}
.ui-header div.jqm-demo-link,
.ui-footer div.jqm-demo-link {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 6px;
}
.ui-header div[data-demo-html],
.ui-footer div[data-demo-html] {
border: none;
padding: 0;
}

/* Swatch F - bar & buttons */
.ui-bar-f {
@@ -308,7 +322,6 @@ div.jqm-demo-link {
.jqm-demo .ui-collapsible-content::-webkit-scrollbar-track {
background: transparent;
}

.jqm-demo .ui-collapsible-content::-webkit-scrollbar-thumb {
background: #435A5F;
border: solid #222;
3 docs/demos/_assets/js/jqm-demos.js
View file
@@ -65,8 +65,9 @@ if ( location.protocol.substr(0,4) === 'file' ||
}

// View demo source code
var demoId = 0;

$.fn.viewSourceCode = function() {
var demoId = 0;

return $( this ).each( function() {
demoId++
24 docs/demos/swipe/ba.html
View file
@@ -11,7 +11,7 @@
<script>
// Bind to "mobileinit" before you load jquery.mobile.js
// Set the default transition to slide
$(document).on("mobileinit", function(){
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
@@ -24,6 +24,8 @@

// Check the data-next attribute that we added to the page markup.
if ( next ) {
// Prefetch the next page (the filenames are equal to the page ID's)
$.mobile.loadPage( next + ".html" );
// Navigate to next page on swipe left
$( document ).on( "swipeleft", page, function() {
$.mobile.changePage( next + ".html" );
@@ -37,7 +39,7 @@
else {
$( ".control .next", page ).addClass( "ui-disabled" );
}
// Same for the previous page
// Same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
if ( prev ) {
$( document ).on( "swiperight", page, function() {
$.mobile.changePage( prev + ".html", { reverse: true } );
@@ -51,7 +53,7 @@
}
});
</script>
<style id="demo-style">
<style>
/* Set the background image sources */
#ny { background-image: url(../_assets/img/newyork.jpg); }
#ba { background-image: url(../_assets/img/buenosaires.jpg); }
@@ -93,20 +95,6 @@
user-select: none;
}
</style>
<style>
.demo-page div.jqm-demo-link {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 6px;
}
.demo-page div[data-demo-html] {
border: none;
padding: 0;
}
</style>
</head>
<body>

@@ -115,7 +103,7 @@
<div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Buenos Aires</h1>
<a href="swipe-page.html" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<div class="ui-btn-right" data-demo-html="#ba" data-demo-js="true" data-demo-css="#demo-style"></div>
<div class="ui-btn-right" data-demo-html="#ba" data-demo-js="true" data-demo-css="true"></div>
</div><!-- /header -->

<div data-role="content">
24 docs/demos/swipe/ct.html
View file
@@ -11,7 +11,7 @@
<script>
// Bind to "mobileinit" before you load jquery.mobile.js
// Set the default transition to slide
$(document).on("mobileinit", function(){
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
@@ -24,6 +24,8 @@

// Check the data-next attribute that we added to the page markup.
if ( next ) {
// Prefetch the next page (the filenames are equal to the page ID's)
$.mobile.loadPage( next + ".html" );
// Navigate to next page on swipe left
$( document ).on( "swipeleft", page, function() {
$.mobile.changePage( next + ".html" );
@@ -37,7 +39,7 @@
else {
$( ".control .next", page ).addClass( "ui-disabled" );
}
// Same for the previous page
// Same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
if ( prev ) {
$( document ).on( "swiperight", page, function() {
$.mobile.changePage( prev + ".html", { reverse: true } );
@@ -51,7 +53,7 @@
}
});
</script>
<style id="demo-style">
<style>
/* Set the background image sources */
#ny { background-image: url(../_assets/img/newyork.jpg); }
#ba { background-image: url(../_assets/img/buenosaires.jpg); }
@@ -93,20 +95,6 @@
user-select: none;
}
</style>
<style>
.demo-page div.jqm-demo-link {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 6px;
}
.demo-page div[data-demo-html] {
border: none;
padding: 0;
}
</style>
</head>
<body>

@@ -115,7 +103,7 @@
<div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Cape Town</h1>
<a href="swipe-page.html" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<div class="ui-btn-right" data-demo-html="#ct" data-demo-js="true" data-demo-css="#demo-style"></div>
<div class="ui-btn-right" data-demo-html="#ct" data-demo-js="true" data-demo-css="true"></div>
</div><!-- /header -->

<div data-role="content">
24 docs/demos/swipe/ny.html
View file
@@ -11,7 +11,7 @@
<script>
// Bind to "mobileinit" before you load jquery.mobile.js
// Set the default transition to slide
$(document).on("mobileinit", function(){
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
@@ -24,6 +24,8 @@

// Check the data-next attribute that we added to the page markup.
if ( next ) {
// Prefetch the next page (the filenames are equal to the page ID's)
$.mobile.loadPage( next + ".html" );
// Navigate to next page on swipe left
$( document ).on( "swipeleft", page, function() {
$.mobile.changePage( next + ".html" );
@@ -37,7 +39,7 @@
else {
$( ".control .next", page ).addClass( "ui-disabled" );
}
// Same for the previous page
// Same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
if ( prev ) {
$( document ).on( "swiperight", page, function() {
$.mobile.changePage( prev + ".html", { reverse: true } );
@@ -51,7 +53,7 @@
}
});
</script>
<style id="demo-style">
<style>
/* Set the background image sources */
#ny { background-image: url(../_assets/img/newyork.jpg); }
#ba { background-image: url(../_assets/img/buenosaires.jpg); }
@@ -93,20 +95,6 @@
user-select: none;
}
</style>
<style>
.demo-page div.jqm-demo-link {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 6px;
}
.demo-page div[data-demo-html] {
border: none;
padding: 0;
}
</style>
</head>
<body>

@@ -115,7 +103,7 @@
<div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>New York</h1>
<a href="swipe-page.html" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<div class="ui-btn-right" data-demo-html="#ny" data-demo-js="true" data-demo-css="#demo-style"></div>
<div class="ui-btn-right" data-demo-html="#ny" data-demo-js="true" data-demo-css="true"></div>
</div><!-- /header -->

<div data-role="content">
24 docs/demos/swipe/pa.html
View file
@@ -11,7 +11,7 @@
<script>
// Bind to "mobileinit" before you load jquery.mobile.js
// Set the default transition to slide
$(document).on("mobileinit", function(){
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
@@ -24,6 +24,8 @@

// Check the data-next attribute that we added to the page markup.
if ( next ) {
// Prefetch the next page (the filenames are equal to the page ID's)
$.mobile.loadPage( next + ".html" );
// Navigate to next page on swipe left
$( document ).on( "swipeleft", page, function() {
$.mobile.changePage( next + ".html" );
@@ -37,7 +39,7 @@
else {
$( ".control .next", page ).addClass( "ui-disabled" );
}
// Same for the previous page
// Same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
if ( prev ) {
$( document ).on( "swiperight", page, function() {
$.mobile.changePage( prev + ".html", { reverse: true } );
@@ -51,7 +53,7 @@
}
});
</script>
<style id="demo-style">
<style>
/* Set the background image sources */
#ny { background-image: url(../_assets/img/newyork.jpg); }
#ba { background-image: url(../_assets/img/buenosaires.jpg); }
@@ -93,20 +95,6 @@
user-select: none;
}
</style>
<style>
.demo-page div.jqm-demo-link {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 6px;
}
.demo-page div[data-demo-html] {
border: none;
padding: 0;
}
</style>
</head>
<body>

@@ -115,7 +103,7 @@
<div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Paris</h1>
<a href="swipe-page.html" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<div class="ui-btn-right" data-demo-html="#pa" data-demo-js="true" data-demo-css="#demo-style"></div>
<div class="ui-btn-right" data-demo-html="#pa" data-demo-js="true" data-demo-css="true"></div>
</div><!-- /header -->

<div data-role="content">
24 docs/demos/swipe/sl.html
View file
@@ -11,7 +11,7 @@
<script>
// Bind to "mobileinit" before you load jquery.mobile.js
// Set the default transition to slide
$(document).on("mobileinit", function(){
$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});
</script>
@@ -24,6 +24,8 @@

// Check the data-next attribute that we added to the page markup.
if ( next ) {
// Prefetch the next page (the filenames are equal to the page ID's)
$.mobile.loadPage( next + ".html" );
// Navigate to next page on swipe left
$( document ).on( "swipeleft", page, function() {
$.mobile.changePage( next + ".html" );
@@ -37,7 +39,7 @@
else {
$( ".control .next", page ).addClass( "ui-disabled" );
}
// Same for the previous page
// Same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
if ( prev ) {
$( document ).on( "swiperight", page, function() {
$.mobile.changePage( prev + ".html", { reverse: true } );
@@ -51,7 +53,7 @@
}
});
</script>
<style id="demo-style">
<style>
/* Set the background image sources */
#ny { background-image: url(../_assets/img/newyork.jpg); }
#ba { background-image: url(../_assets/img/buenosaires.jpg); }
@@ -93,20 +95,6 @@
user-select: none;
}
</style>
<style>
.demo-page div.jqm-demo-link {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 5px;
top: 6px;
}
.demo-page div[data-demo-html] {
border: none;
padding: 0;
}
</style>
</head>
<body>

@@ -115,7 +103,7 @@
<div data-role="header" data-position="fixed" data-fullscreen="true" data-tap-toggle="false">
<h1>Seoul</h1>
<a href="swipe-page.html" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a>
<div class="ui-btn-right" data-demo-html="#sl" data-demo-js="true" data-demo-css="#demo-style"></div>
<div class="ui-btn-right" data-demo-html="#sl" data-demo-js="true" data-demo-css="true"></div>
</div><!-- /header -->

<div data-role="content">