Startseite > HTML5, JavaScript, VB.NET > ASP.NET – Swipe events mit jQuery Mobile

ASP.NET – Swipe events mit jQuery Mobile

August 12, 2011 Hinterlasse einen Kommentar Go to comments

Mit Hilfe der Javascript-Library jQuery und jQuery Mobile kann man auf ASP.NET-Seiten Wischbewegungen auswerten. Um die Webseiten ohne iPad zu testen, kann man die Desktop-Version von Safari verwenden.

Zunächst fügt man eine neue WebForm in die ASP.NET-Anwendung ein. Diese sieht dann wie folgt aus:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="bla.aspx.vb" Inherits="WebApplication1.bla" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    </form>
</body>
</html>

im Head-Bereich werden die jQuery-Dateien eingebunden (ich habe die Dateien in das root-Verzeichnis der Webanwendung kopiert):

<link rel="stylesheet" href="./jquery.mobile.css" />
<script src="./jquery.js"></script>
<script src="./jquery.mobile.js"></script>

dann kommt der Seiten-Inhalt – dieser wird im body-Bereich der Datei angelegt:

    <div id="page1" data-role="page" >
        <asp:Button ID="Button1" runat="server" style="z-index: 1" Text="Page 1" />
    </div>

    <div id="page2" data-role="page" >
        <asp:Button ID="Button2" runat="server" style="z-index: 1" Text="Page 2" />
    </div>

die beiden div-Elemente bekommen den Zusatz data-role=page. Damit erzeugt HTML5 mehrere Web-Seiten innerhalb einer einzigen aspx-Datei. Der Browser zeigt zunächst nur den Inhalt des ersten DIV-Element (mit Attribute page) an. Jetzt wird noch der Javascript-Code benötigt um auf den Event swipe zu reagieren:

    $(function() {
        $('body').bind('swiperight', function(e) {
            alert('You swiped right!');
            e.stopImmediatePropagation();
            return false;
        });

        $('body').bind('swipeleft', function(e) {
            alert('You swiped left!');
            e.stopImmediatePropagation();
            return false;
        });
    });

Jetzt muss man nur noch die Seite bei einer Wischbewegung wechseln. Dazu muss man prüfen auf welcher Seite man gerade steht und auf die jeweils andere Seite wechseln:

    var curPage = 1;

    $(function() {
        $('body').bind('swiperight', function(e) {
            //alert('You swiped right!' + curPage);
            if (curPage == 2) {
                curPage = 1;
                $.mobile.changePage("#page1", "slide", true, true);
            }
            e.stopImmediatePropagation();
            return false;
        });

        $('body').bind('swipeleft', function(e) {
            //alert('You swiped left!' + curPage);
            if (curPage == 1) {
                curPage = 2;
                $.mobile.changePage("#page2", "slide", false, true);
            }
            e.stopImmediatePropagation();
            return false;
        });
    });

hier noch einmal die gesamte Seite:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Swipe.aspx.vb" Inherits="WebApplication1.Swipe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
   
    <link rel="stylesheet" href="./jquery.mobile.css" />
    <script src="./jquery.js"></script>
    <script src="./jquery.mobile.js"></script>
   
<script type="text/javascript">

    var curPage = 1;

    $(function() {
        $('body').bind('swiperight', function(e) {
            alert('You swiped right!' + curPage);
            if (curPage == 2) {
                curPage = 1;
                $.mobile.changePage("#page1", "slide", true, true);
            }
            e.stopImmediatePropagation();
            return false;
        });

        $('body').bind('swipeleft', function(e) {
            alert('You swiped left!' + curPage);
            if (curPage == 1) {
                curPage = 2;
                $.mobile.changePage("#page2", "slide", false, true);
            }
            e.stopImmediatePropagation();
            return false;
        });
    });   

</script>    
   
</head>
<body>
    <form id="form1" runat="server">
   
    <div id="page1" data-role="page" >
        <asp:Button ID="Button1" runat="server" style="z-index: 1" Text="Page 1" />
    </div>

    <div id="page2" data-role="page" >
        <asp:Button ID="Button2" runat="server" style="z-index: 1" Text="Page 2" />
    </div>
   
   
    </form>
</body>
</html>
Kategorien:HTML5, JavaScript, VB.NET
  1. Du hast noch keine Kommentare.
  1. September 5, 2011 um 1:09 pm
    JSF – Swipe events mit jQuery Mobile « Srccode's Blog

Hinterlasse einen Kommentar

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden..