Swipe Navigation erstellen mit jquerymobile

sight011

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

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:
Hi Jan,

ja genau das war das Problem, bzw. die Reihenfolge ist auch wichtig.

Erst die normale Libary (jquery)dann die mobile-libary(jquery-mobile).

Mittlerweile bin ich schon weiter. Das Problem ist aus dem weggeräumt.


Jetzt habe ich das Problem das es im Firefox läuft, aber auf sämtlichen mir bekannten Webkit Browsern (Chrome, Safari) nicht. :- (

Jemand ne Idee nach was ich googlen könnte?


P.S.: Habe dich neulich bei fb geaddet ;) (Erster NAme fängt mit A an)
 
Zuletzt bearbeitet:
Hi,
als erstes sorg mal dafür das dein JS erst ausgeführt wird wenn die DOM gelden ist.
Hierzu siehe http://api.jquery.com/ready/.

Also bei mir im JSBin funktioniert das auch im Webkit: http://jsbin.com/unigot/1
Deine Seite funktioniert bei mir im Chrome nur teilweise. Ich kann die rechte Sidebar raussliden lassen aber das wars dann.

Ich weiß jetzt leider nicht so ganz woran das liegen kann. Am besten du schmeißt mal deine ganzen CSS-Dateien raus und reduzierst den Code auf das allernötigste.
Dann kannst du auch mittels console.log(), zumindest im Chrome, die Ausgabe von javascript überprüfen.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück