Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-07 08:00:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made all css and JS rely upon media query support. ("only all"). We can go back to the previous system, but so far, this seems to create a better divide than our previous support tests provided. 1-person discussion here: https://github.com/jquery/jquery-mobile/issues/#issue/29

Browse source
This commit is contained in:
scottjehl 2010-10-07 15:15:59 -04:00
parent 8cdd34be2b
commit de53cfb930
30 changed files with 60 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_containers-states.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Static Containers, States</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_dialog.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Dialog Example</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_events.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Event tests</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>

2
_filter.html
View file

@ -3,7 +3,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Filtered List View</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_fixed-variation1.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Fixed toolbars variation</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_fixed-variation2.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Fixed Overlay Style Toolbars</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_fixed.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Toolbars demo</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_footer-persist-result.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Persistent footer demo</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_footer-persist.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Persistent footer demo</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_form-controls.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Form Controls</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>

2
_listview.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Listview Examples</title>
<link rel="stylesheet" type="text/css" href="css/all"/>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>

2
_navlist.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - navlist Example</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_progressbar-static.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Static Progressbar Example</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_search-results.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Search Results</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_search.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Search Example</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_transitions-destination.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Transition Completed!</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
_transitions.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Static Containers, States</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

2
experiments/api-viewer/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - Listview Examples</title>
<link rel="stylesheet" type="text/css" href="../../css/all"/>
<link rel="stylesheet" media="screen and (min-width: 0)" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>

2
experiments/converter/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Mobile Framework - Converter Demo Application</title>
<link rel="stylesheet" type="text/css" href="../../css/all"/>
<link rel="stylesheet" media="screen and (min-width: 0)" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>

2
experiments/navlist-glyphish/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery Mobile Framework - navlist Example</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="screen and (min-width: 0)" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>

4
experiments/photos/_photo1.html
View file

@ -2,13 +2,13 @@
<html>
<head>
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="only all" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body class="ui-body-a">
<div data-role="page" data-fullscreen="true">
<link type="text/css" href="photos.css" rel="stylesheet" />
<link rel="stylesheet" media="only all" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="header">

4
experiments/photos/_photo2.html
View file

@ -2,13 +2,13 @@
<html>
<head>
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="only all" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link type="text/css" href="photos.css" rel="stylesheet" />
<link rel="stylesheet" media="only all" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="header" id="">

4
experiments/photos/_photo3.html
View file

@ -2,13 +2,13 @@
<html>
<head>
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="only all" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link type="text/css" href="photos.css" rel="stylesheet" />
<link rel="stylesheet" media="only all" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="header" id="photoview">

4
experiments/photos/_photo4.html
View file

@ -2,13 +2,13 @@
<html>
<head>
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="only all" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link type="text/css" href="photos.css" rel="stylesheet" />
<link rel="stylesheet" media="only all" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="header">

4
experiments/photos/_photo5.html
View file

@ -2,13 +2,13 @@
<html>
<head>
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="only all" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link type="text/css" href="photos.css" rel="stylesheet" />
<link rel="stylesheet" media="only all" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="header">
<h1>Nathan running</h1>

4
experiments/photos/_photo6.html
View file

@ -2,13 +2,13 @@
<html>
<head>
<title>jQuery Mobile Framework - Photo 1</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="only all" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<link type="text/css" href="photos.css" rel="stylesheet" />
<link rel="stylesheet" media="only all" href="photos.css" />
<script type="text/javascript" src="photos.js"></script>
<div data-role="header">
<h1>Sandy beach</h1>

4
experiments/ui-datepicker/index.html
View file

@ -2,14 +2,14 @@
<html>
<head>
<title>jQuery Mobile Framework - Datepicker</title>
<link rel="stylesheet" type="text/css" href="../../css/all" />
<link rel="stylesheet" media="screen and (min-width: 0)" href="../../css/all" />
<script type="text/javascript" src="../../js/all"></script>
</head>
<body>
<div data-role="page">
<link rel="stylesheet" type="text/css" href="jquery.ui.datepicker.css" />
<link rel="stylesheet" media="screen and (min-width: 0)" href="jquery.ui.datepicker.css" />
<script type="text/javascript" src="jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){

2
index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<title>jQuery UI Mobile Framework</title>
<link rel="stylesheet" type="text/css" href="css/all" />
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>

4
js/jquery.mobile.js
View file

@ -8,7 +8,7 @@
*/
(function( jQuery, window, undefined ) {
// if we're missing support for any of these, then we're a C-grade browser
if ( !jQuery.support.display || !jQuery.support.position || !jQuery.support.overflow || !jQuery.support.floatclear ) {
if ( !jQuery.support.mediaquery ) {
return;
}
@ -255,7 +255,7 @@
$html.addClass('ui-mobile');
//insert mobile meta - these will need to be configurable somehow.
$head.append('<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />'+
$head.append('<meta name="viewport" content="width=device-width, initial-scale=1.0" />'+
'<link rel="apple-touch-icon" href="images/homeicon.png" />'+
'<link rel="apple-touch-startup-image" href="images/startscreen.png" />'+
'<meta name="apple-mobile-web-app-capable" content="yes" />' +

45
js/jquery.mobile.support.js
View file

@ -4,11 +4,33 @@ Possible additions:
CSS Matrix
*/
// test whether a CSS media type or query applies
$.media = (function() {
// TODO: use window.matchMedia once at least one UA implements it
var cache = {},
$html = $( "html" ),
testDiv = $( "<div id='jquery-mediatest'>" ),
fakeBody = $( "<body>" ).append( testDiv );
return function( query ) {
if ( !( query in cache ) ) {
var styleBlock = $( "<style type='text/css'>" +
"@media " + query + "{#jquery-mediatest{position:absolute;}}" +
"</style>" );
$html.prepend( fakeBody ).prepend( styleBlock );
cache[ query ] = testDiv.css( "position" ) === "absolute";
fakeBody.add( styleBlock ).remove();
}
return cache[ query ];
};
})();
$.extend( $.support, {
orientation: "orientation" in window,
touch: "ontouchend" in document,
WebKitAnimationEvent: typeof WebKitTransitionEvent === "object",
pushState: !!history.pushState
pushState: !!history.pushState,
mediaquery: $.media('only all')
});
(function() {
@ -43,24 +65,3 @@ $.extend( $.support, {
fakeBody.remove();
})();
// test whether a CSS media type or query applies
$.media = (function() {
// TODO: use window.matchMedia once at least one UA implements it
var cache = {},
$html = $( "html" ),
testDiv = $( "<div id='jquery-mediatest'>" ),
fakeBody = $( "<body>" ).append( testDiv );
return function( query ) {
if ( !( query in cache ) ) {
var styleBlock = $( "<style type='text/css'>" +
"@media " + query + "{#jquery-mediatest{position:absolute;}}" +
"</style>" );
$html.prepend( fakeBody ).prepend( styleBlock );
cache[ query ] = testDiv.css( "position" ) === "absolute";
fakeBody.add( styleBlock ).remove();
}
return cache[ query ];
};
})();