sight011
Erfahrenes Mitglied
Hallo liebe Leute,
nun wage ich mich endlich an jquery ran - wird auch mal Zeit - natürlich funktioniert nix. Und ich hatte immer gehört das wäre so einfach. :-(
Folgendes möchte ich bauen:
http://view.jquerymobile.com/master/demos/examples/panels/panel-swipe-open.php#demo-page
und hier steht ja auch was man dafür für Code benötigt:
http://view.jquerymobile.com/master...anel-swipe-open.php#demo-page&ui-state=dialog
Nur will das ganze nicht so recht klappen.
Ich habe mir jquerymobile runter geladen und eine html datei erstellt.
http://www.coffeefee.eu/TEST10/test/index.html <---- Und hier das ganze mal hochgeladen.
So schaut meine html file aus
Bekomme über die Konsole eine Error MEssage:
TypeError: $ is undefined
[Bei diesem Fehler anhalten]
$.mobile = {};
jquery....3.1.js (Zeile 26)
Google findet nix :-(
nun wage ich mich endlich an jquery ran - wird auch mal Zeit - natürlich funktioniert nix. Und ich hatte immer gehört das wäre so einfach. :-(
Folgendes möchte ich bauen:
http://view.jquerymobile.com/master/demos/examples/panels/panel-swipe-open.php#demo-page
und hier steht ja auch was man dafür für Code benötigt:
http://view.jquerymobile.com/master...anel-swipe-open.php#demo-page&ui-state=dialog
Nur will das ganze nicht so recht klappen.
Ich habe mir jquerymobile runter geladen und eine html datei erstellt.
http://www.coffeefee.eu/TEST10/test/index.html <---- Und hier das ganze mal hochgeladen.
So schaut meine html file aus
Code:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
</script>
<style>
/* Swipe works with mouse as well but often causes text selection. */
#demo-page * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-color: #aae;
font-family: sans-serif;
}
/* Arrow only buttons in the header. */
#demo-page .ui-header .ui-btn {
background: none;
border: none;
top: 9px;
}
#demo-page .ui-header .ui-btn-inner {
border: none;
}
/* Content styling. */
dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
dt { font-size: 2em; font-weight: bold; }
dt span { font-size: .5em; color: #777; margin-left: .5em; }
dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
.back-btn { float: right; margin: 0 2em 1em 0; }
</style>
</head>
<body>
<div data-url="demo-page" data-role="page" id="demo-page" data-theme="d">
<div data-role="header" data-theme="b">
<h1>Swipe left or right</h1>
<a href="#left-panel" data-theme="d" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
<a href="#right-panel" data-theme="d" data-icon="arrow-l" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
</div><!-- /header -->
<div data-role="content">
<dl>
<dt>Swipe <span>verb</span></dt>
<dd><b>1.</b> to strike or move with a sweeping motion</dd>
</dl>
<a href="#demo-intro" data-rel="back" class="back-btn" data-role="button" data-mini="true" data-inline="true" data-icon="back" data-iconpos="right">Back to demo intro</a>
</div><!-- /content -->
<div data-role="panel" id="left-panel" data-theme="b">
<p>Left reveal panel.</p>
<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>
</div><!-- /panel -->
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c">
<p>Right push panel.</p>
<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>
</div><!-- /panel -->
</div>
</body>
</html>
Bekomme über die Konsole eine Error MEssage:
TypeError: $ is undefined
[Bei diesem Fehler anhalten]
$.mobile = {};
jquery....3.1.js (Zeile 26)
Google findet nix :-(
Zuletzt bearbeitet: