jQM - Joyride lugin example

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://foundation.zurb.com/files/zurb-joyride-2/demo/demo-style.css">
<link rel="stylesheet" href="http://foundation.zurb.com/files/zurb-joyride-2/joyride-2.0.css">
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="http://foundation.zurb.com/files/zurb-joyride-2/modernizr.mq.js"></script>        
    <script src="http://foundation.zurb.com/files/zurb-joyride-2/jquery.joyride-2.0.js"></script>        
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
          <div class="container">
            <div class="row">
              <div class="twelve columns">
                <h1>ZURB's Joyride Feature Tour Plugin</h1>
                <a href="http://www.zurb.com/playground/jquery_joyride_feature_tour_plugin" id="start">View Docs + Playground for Joyride</a>
        
                <hr>
              </div>
            </div>
        
            <br><br>
        
            <div class="row">
              <div class="six columns">
                <h2 id="numero1" class="so-awesome">Point Out Those New Features!</h2>
                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Cras mattis...

JavaScript

$(document).on('pageshow', '#index', function(){       
    $('#joyRideTipContent').joyride();
});