jQuery - Producttour.js-alljchome-开发者的教程家园

jQuery Tutorial

jQuery DOM Manipulation

jQuery CSS Manipulation

jQuery Effects

jQuery Traversing

jQuery UI

jQuery References

jQuery - Utilities

jQuery Plugins

jQuery Useful Resources

Selected Reading

jQuery - Producttour.js

Producttour.js is a jQuery plugin for quickly and easily implementing of help guide into your website.

A Simple of producttour.js example as shown below −

<!doctype html>
<html lang = "en" class = "no-js">
   <head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk rel = "stylesheet" href = "css/reset.css"> 
      <pnk rel = "stylesheet" href = "css/style.css"> 
      <script src = "js/modernizr.js"></script> 
   </head>
	
   <body background = "tp.png">
      <span class = "cd-nugget-info">
         <button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>
      </span>

      <ul class = "cd-tour-wrapper">
         <p class = "cd-single-step">
            <span>Step 1</span>
            
            <span class = "cd-more-info bottom">
               <h2>Step Number 1</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
                  ept. Modi apas animi molestias in, aperiam.</p>
               <img src = "img/step-1.png" alt = "step 1">
            </span>
         </p> 

         <p class = "cd-single-step">
            <span>Step 2</span>

            <span class = "cd-more-info top">
               <h2>Step Number 2</h2>
               <p>Lorem ipsum dolor sit amet, consectetur 
                  adipisicing ept. Officia quasi in quisquam.</p>
               <img src = "img/step-2.png" alt = "step 2">
            </span>
         </p> 

         <p class = "cd-single-step">
            <span>Step 3</span>

            <span class = "cd-more-info right">
               <h2>Step Number 3</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing
                  ept. Optio illo non enim ut necessitatibus perspiciatis,
                  dignissimos.</p>
               <img src = "img/step-3.png" alt = "step 3">
            </span>
         </p> 
      </ul> 
      
      <script src = "js/jquery-2.1.4.js"></script>
      <script src = "js/jquery.mobile.min.js"></script> 
      <script src = "js/main.js"></script> 
      
   </body>
</html>

This should produce following result −

jQuery - Producttour.js

友情链接