Skip to content

Commit 77e040c

Browse files
author
Jason Scott
committed
Prototype of Slide Panel
View demo at docs/content/content-overflow.html
1 parent 6c6adbf commit 77e040c

File tree

6 files changed

+257
-3
lines changed

6 files changed

+257
-3
lines changed

‎css/structure/jquery.mobile.overflow.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.overflowMenu {
2+
height: 100%;
3+
width: 563px;
4+
border-image: url('images_bb/core_crosscutmenu_bg.png') 1 1 1 15 fill / 0 0 0 0 repeat;
5+
-webkit-box-shadow: -10px 0px 25px #121212;
6+
-webkit-transition-duration: 0.25s;
7+
-webkit-animation-timing-function: ease-out;
8+
position: fixed;
9+
top: 0px;
10+
bottom: 0px;
11+
overflow-x: hidden;
12+
overflow-y: scroll;
13+
display: -webkit-box;
14+
-webkit-box-orient: vertical;
15+
-webkit-box-pack: center;
16+
-webkit-transform: translate3d(0,0,0);
17+
}
18+
.right {
19+
right: -583px;
20+
}
21+
.over {
22+
z-index: 10001;
23+
}
24+
25+
.over.left {
26+
left: -630px;
27+
}
28+
29+
.push {
30+
-webkit-transition-duration: 0.25s;
31+
-webkit-animation-timing-function: ease-out;
32+
z-index: 0;
33+
}
34+
35+
.push.right {
36+
right: 0;
37+
width: 630px;
38+
}
39+
40+
.left {
41+
right: auto;
42+
width: 630px;
43+
}
44+
45+
.showTabHelper {
46+
-webkit-transition-duration: 0.25s;
47+
-webkit-animation-timing-function: ease-out;
48+
}
49+
50+
.showTabOverflow,
51+
.ui-mobile [data-role="page"].showTabOverflow, .ui-page.showTabOverflow{
52+
left: 613px !important;
53+
}
54+
.showTabOverflow.right,
55+
.ui-mobile [data-role="page"].showTabOverflow.right, .ui-page.showTabOverflow.right{
56+
left: -613px !important;
57+
}
58+
59+
.showMenu.right {
60+
-webkit-transform:translate(-583px,0);
61+
}
62+
.showMenu.left {
63+
-webkit-transform: translate(630px,0);
64+
}
65+
66+
.hideMenu {
67+
-webkit-transform:translate(0px,0);
68+
}
69+

‎css/structure/jquery.mobile.structure.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,6 @@
2222
@import url( "jquery.mobile.forms.select.css" );
2323
@import url( "jquery.mobile.forms.textinput.css" );
2424
@import url( "jquery.mobile.listview.css" );
25-
@import url( "jquery.mobile.forms.slider.css" );
25+
@import url( "jquery.mobile.forms.slider.css" );
26+
@import url( "jquery.mobile.overflow.css" );
27+

‎docs/content/content-overflow.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Docs - Collapsible Content</title>
7+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8+
9+
<script src="../../js/jquery.js"></script>
10+
<script src="../../docs/_assets/js/jqm-docs.js"></script>
11+
<script src="../../js/"></script>
12+
13+
</head>
14+
<body>
15+
16+
<div data-role="page" class="type-interior">
17+
18+
<div data-role="header" data-theme="f">
19+
<h1>Collapsible set</h1>
20+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
21+
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
22+
</div><!-- /header -->
23+
24+
<div data-role="content">
25+
<button onclick="openLP()">Push Open Left</button>
26+
<button onclick="closeLP()">Push Close Left</button>
27+
<button onclick="openLO()">Over Open Left</button>
28+
<button onclick="closeLO()">Over Close Left</button>
29+
<button onclick="openRP()">Push Open Right</button>
30+
<button onclick="closeRP()">Push Close Right</button>
31+
<button onclick="openRO()">Over Open Right</button>
32+
<button onclick="closeRO()">Over Close Right</button>
33+
34+
<div id="lp" data-role="overflow" data-position="left" data-behavior="push">
35+
36+
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
37+
38+
<h3>More in this section</h3>
39+
40+
<ul data-role="listview" data-theme="c" data-dividertheme="d">
41+
42+
<li data-role="list-divider">Content Formatting</li>
43+
<li><a href="content-html.html">Basic HTML styles</a></li>
44+
<li><a href="content-grids.html">Layout grids (columns)</a></li>
45+
<li><a href="content-collapsible.html">Collapsible content blocks</a></li>
46+
<li data-theme="a"><a href="content-collapsible-set.html">Collapsible sets (accordions)</a></li>
47+
<li><a href="content-themes.html">Theming content</a></li>
48+
49+
</ul>
50+
</div>
51+
</div>
52+
<div id="lo" data-role="overflow" data-position="left" data-behavior="over">
53+
<img src="http://lorempixel.com/400/200/">
54+
</div>
55+
<div id="rp" data-role="overflow" data-position="right" data-behavior="push">
56+
<img src="http://lorempixel.com/400/200/">
57+
</div>
58+
<div id="ro" data-role="overflow" data-position="right" data-behavior="over">
59+
<img src="http://lorempixel.com/400/200/">
60+
</div>
61+
62+
<script type="text/javascript">
63+
function openLP() {
64+
$("#lp").overflow("show");
65+
}
66+
function closeLP() {
67+
$("#lp").overflow("hide");
68+
}
69+
function openLO() {
70+
$("#lo").overflow("show");
71+
}
72+
function closeLO() {
73+
$("#lo").overflow("hide");
74+
}
75+
function openRP() {
76+
$("#rp").overflow("show");
77+
}
78+
function closeRP() {
79+
$("#rp").overflow("hide");
80+
}
81+
function openRO() {
82+
$("#ro").overflow("show");
83+
}
84+
function closeRO() {
85+
$("#ro").overflow("hide");
86+
}
87+
88+
89+
</script>
90+
</div><!-- /content -->
91+
92+
<div data-role="footer" class="footer-docs" data-theme="c">
93+
<p class="jqm-version"></p>
94+
<p>&copy; 2012 jQuery Foundation and other contributors</p>
95+
</div>
96+
97+
</div><!-- /page -->
98+
99+
</body>
100+
</html>

‎js/index.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
'jquery.mobile.links.js',
5454
'widgets/fixedToolbar.js',
5555
'widgets/popup.js',
56+
'widgets/overflow.js',
5657
'jquery.mobile.zoom.js',
5758
'jquery.mobile.zoom.iosorientationfix.js',
5859
'jquery.mobile.init.js'

‎js/jquery.mobile.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,9 @@ define([
3131
'./widgets/fixedToolbar',
3232
'./widgets/popup',
3333
'./jquery.mobile.zoom',
34-
'./jquery.mobile.zoom.iosorientationfix'
34+
'./jquery.mobile.zoom.iosorientationfix',
35+
'./widgets/overflow'
3536
], function( require ) {
3637
require( [ './jquery.mobile.init' ], function() {} );
3738
});
38-
//>>excludeEnd("jqmBuildExclude");
39+
//>>excludeEnd("jqmBuildExclude");

‎js/widgets/overflow.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2+
//>>description: Sliding Panel
3+
//>>label: Sliding Panel
4+
//>>group: Widgets
5+
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
6+
//>>css.structure: ../css/structure/jquery.mobile.overflow.css
7+
8+
define( [ "jquery", "../jquery.mobile.core", "../jquery.mobile.widget" ], function( $ ) {
9+
//>>excludeEnd("jqmBuildExclude");
10+
11+
12+
(function($) {
13+
14+
$.widget("mobile.overflow", $.mobile.widget, {
15+
16+
options: {
17+
initSelector: ":jqmData(role='overflow')",
18+
theme: "a",
19+
position: "left",
20+
behavior: "push"
21+
22+
},
23+
_init: function(){},
24+
_create: function() {
25+
this.options.theme = this.element.jqmData('theme') || this.options.theme;
26+
this.options.behavior = this.element.jqmData( "behavior" ) || this.options.behavior;
27+
this.options.position = this.element.jqmData('position') || this.options.position;
28+
this.overflowMenuContent = $( this.element );
29+
this.overflowMenu = $(document.createElement('div'))
30+
.addClass("ui-body-"+this.options.theme)
31+
.addClass("overflowMenu")
32+
.addClass(this.options.position);
33+
if (this.options.behavior === "push") {
34+
this.overflowMenu
35+
.addClass('push')
36+
.css('display', "none");
37+
this.element.closest( '.ui-page' ).first().before(this.overflowMenu);
38+
} else {
39+
this.overflowMenu.addClass('over');
40+
this.overflowMenu.insertBefore(this.overflowMenuContent);
41+
}
42+
this.overflowMenuContent.appendTo(this.overflowMenu);
43+
44+
},
45+
show: function() {
46+
if (this.options.behavior === "push") {
47+
this.overflowMenu.css('display', 'inline');
48+
$('.ui-page-active, .ui-footer-fixed, .ui-header-fixed')
49+
.addClass('showTabHelper')
50+
.addClass('showTabOverflow')
51+
.addClass(this.options.position);
52+
53+
} else {
54+
this.overflowMenu.addClass("showMenu");
55+
}
56+
},
57+
hide: function() {
58+
var self = this;
59+
if (this.options.behavior === "push") {
60+
$('.ui-page-active, .ui-footer-fixed, .ui-header-fixed')
61+
.removeClass('showTabOverflow')
62+
.removeClass(this.options.position)
63+
.one("webkitTransitionEnd",function() {
64+
$(this).removeClass('showTabHelper');
65+
self.overflowMenu.css('display', 'none');
66+
});
67+
} else {
68+
this.overflowMenu.removeClass("showMenu");
69+
}
70+
}
71+
72+
});
73+
$( document ).bind( "pagecreate create", function( e ){
74+
$.mobile.overflow.prototype.enhanceWithin( e.target );
75+
});
76+
})(jQuery);
77+
78+
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
79+
});
80+
//>>excludeEnd("jqmBuildExclude");
81+

0 commit comments

Comments
 (0)