Commit 93dd89e3 authored by Thomas Lechauve's avatar Thomas Lechauve

Plugin jquery mobile splitview installed

parent d5acf5e7
...@@ -2,19 +2,54 @@ ...@@ -2,19 +2,54 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Vifib</title> <title>Vifib</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile.structure-1.1.0.css" />--> <!--<link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile.structure-1.1.0.css" />-->
<link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile-1.1.0.css" /> <!--<link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile-1.1.0.css" />-->
<script type="text/javascript" charset="utf-8" src="libs/jquery/jquery.js"></script> <link rel="stylesheet" href="libs/splitview/jquery.mobile.css" />
<script type="text/javascript" charset="utf-8" src="libs/jquery-mobile/jquery.mobile-1.1.0.js"></script> <link rel="stylesheet" href="libs/splitview/jquery.mobile.splitview.css" />
<link rel="stylesheet" href="libs/splitview/jquery.mobile.grids.collapsible.css" />
<!--<script type="text/javascript" src="libs/jquery/jquery.js"></script>-->
<script type="text/javascript" src="libs/splitview/jquery-1.7.1.js"></script>
<script type="text/javascript" src="libs/splitview/jquery.mobile.splitview.js"></script>
<!--<script type="text/javascript" src="libs/jquery-mobile/jquery.mobile-1.1.0.js"></script>-->
<script type="text/javascript" src="libs/splitview/jquery.mobile.js"></script>
<script type="text/javascript" src="libs/splitview/iscroll-wrapper.js"></script>
<script type="text/javascript" src="libs/splitview/iscroll.js"></script>
</head> </head>
<body> <body>
<div data-role="page" id="homepage"> <div data-role="panel" data-id="menu">
<header data-role="header"> <!-- Start of first page -->
<a href="#plop" data-icon="home" title="notext"></a> <div data-role="page" id="foo">
</header> <div data-role="header">
<section data-role="content"> <h1>Foo</h1>
</section> </div><!-- /header -->
<footer data-role="footer"> <div data-role="content">
</footer> <p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other side panel pages here -->
</div>
<div data-role="panel" data-id="main">
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other main panel pages here -->
</div> </div>
</body> </body>
/*
* iscroll-wrapper for jQquery.
* http://sanraul.com/projects/jqloader/
*
* Copyright (c) 2011 Raul Sanchez (http://www.sanraul.com)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
(function($){
$.fn.iscroll = function(options){
if(this.data('iScrollReady') == null){
var that = this;
var options = $.extend({}, options);
options.onScrollEnd = function(){
that.triggerHandler('onScrollEnd', [this]);
};
arguments.callee.object = new iScroll(this.get(0), options);
// NOTE: for some reason in a complex page the plugin does not register
// the size of the element. This will fix that in the meantime.
setTimeout(function(scroller){
scroller.refresh();
}, 1000, arguments.callee.object);
this.data('iScrollReady', true);
}else{
arguments.callee.object.refresh();
}
return arguments.callee.object;
};
})(jQuery);
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/* my addition to supply convertible grids based on www.cssgrid.net by Andy Taylor */
/* ==================================================================================================================== */
/* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com */
/* ==================================================================================================================== */
.row, .fixedrow {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11 {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
.row .span1, .fixedrow .span1 {
width: 4.85%;
}
.row .span2, .fixedrow .span2 {
width: 13.45%;
}
.row .span3, .fixedrow .span3 {
width: 22.05%;
}
.row .span4, .fixedrow .span4 {
width: 30.75%;
}
.row .span5, .fixedrow .span5 {
width: 39.45%;
}
.row .span6, .fixedrow .span6 {
width: 48%;
}
.row .span7, .fixedrow .span7 {
width: 56.75%;
}
.row .span8, .fixedrow .span8 {
width: 65.4%;
}
.row .span9, .fixedrow .span9 {
width: 74.05%;
}
.row .span10, .fixedrow .span10 {
width: 82.7%;
}
.row .span11, .fixedrow .span11 {
width: 91.35%;
}
.row .span12, .fixedrow .span12 {
width: 100%;
float: left;
}
.row .prepend1, .fixedrow .prepend1 {
}
.last {
margin-right: 0px;
}
img, object, embed {
max-width: 100%;
}
img {
height: auto;
}
/* touchscreens */
@media (min-width:768px) {
.touch body {
font-size: 1em;
line-height: normal;
}
/* Smaller screens */
body {
font-size: 0.9em;
line-height: normal;
}
}
/* Mobile */
@media (max-width:480px) {
body {
font-size: 1em;
-webkit-text-size-adjust: none;
}
.row, body {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.row .span1, .row .span2, .row .span3, .row .span4, .row .span5, .row .span6, .row .span7, .row .span8, .row .span9, .row .span10, .row .span11, .row .span12 {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}
\ No newline at end of file
This diff is collapsed.
body {
visibility: hidden;
}
.ui-panel {
-moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
box-shadow: 0 0 12px rgba(0,0,0,.6);
}
div[data-id="main"] {
z-index: 9999;
}
.ui-mobile body {
visibility: visible;
}
.ui-panel-left {
position:absolute;
left:0;
top:0;
bottom:0;
}
.ui-panel-right {
position:absolute;
right:0;
top:0;
bottom:0;
}
.ui-crumbs {
max-width: 25%;
}
.splitview .ui-splitview-hidden {
display:none;
}
@media (min-width:480px) {
.splitview body {
margin: 0;
}
.splitview .ui-page{
bottom: 0;
}
.splitview .ui-header {
position:absolute;
top:0;
bottom:auto;
left:0;
right:0;
z-index: 1000;
}
.splitview .ui-footer {
position:absolute;
top:auto;
bottom:0;
left:0;
right:0;
z-index:1000;
}
.splitview .ui-content {
position:absolute;
top:40px;
bottom:0;
left:0;
right:0;
overflow:auto;
-webkit-overflow-scrolling:touch;
z-index:1;
}
}
/************************************************************************************************************
popover css for portrait orientation, modified from
http://www.cagintranet.com/archive/create-an-ipad-like-dropdown-popover/
************************************************************************************************************/
.panel-popover .popover_triangle {left:7px;}
.panel-popover {
color: black;
display:none;
font-weight: normal;
line-height: 1;
cursor: auto;
position: absolute;
top:55px;
left:10px;
background-color: white;
z-index:5000000;
border: 3px solid black;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
overflow-x:visible;
height:80%;
}
.panel-popover > .popover_triangle {
position: absolute;
top: -34px;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 16px solid rgba(0,0,0,0);
border-left: 16px solid rgba(0,0,0,0);
border-right: 16px solid rgba(0,0,0,0);
border-bottom: 16px solid black;
}
.panel-popover div[data-role="page"] {
height: inherit;
overflow-y:auto;
}
/**********************************************************************************************************
CSS animations for panel resize using new data-width attribute.
**********************************************************************************************************/
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment