PHPXRef 0.7.1 : vtigercrm-6.1.0 : /libraries/guidersjs/README.html source

[Summary view] [Print] [Text view]
   1  <html>
   2    <head>
   3      <style type="text/css">
   4        body {
   5          margin: 0;
   6          padding: 0;
   7        }
   8  
   9        .guider_description a, .guider_description a:visited {
  10          color: #1054AA;
  11        }
  12  
  13        #clock {
  14          border: 2px solid #333;
  15          height: 200px;
  16          margin-left: 100px;
  17          position: relative;
  18          text-align: center;
  19          width: 300px;
  20        }
  21        
  22        .stopper {
  23          color: #777;
  24          font-size: 77%;
  25        }
  26      </style>
  27      
  28      <!-- guiders.js requires jQuery as a prerequisite. Be sure to load guiders.js AFTER jQuery. -->
  29      <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  30      <script type="text/javascript" src="guiders-1.2.6.js"></script>
  31      <link rel="stylesheet" href="guiders-1.2.6.css" type="text/css" />
  32    </head>
  33    <body>
  34      <br />
  35      <br />
  36      <br />
  37      <br />
  38      <br />
  39      <br />
  40      <br />
  41      <br />
  42      <br />
  43      <br />
  44      <br />
  45      <br />
  46      <br />
  47      <br />
  48      <div id="clock" onclick="guiders.next();">
  49        <br />
  50        <img src="clock.gif" width=150 height=150 />
  51      </div>
  52      <br />
  53      <br />
  54      <br />
  55      <br />
  56      <br />
  57      <br />
  58      <br />
  59  
  60      <script type="text/javascript">
  61      /**
  62       * Guiders are created with guiders.createGuider({settings}).
  63       *
  64       * You can show a guider with the .show() method immediately
  65       * after creating it, or with guiders.show(id) and the guider's id.
  66       *
  67       * guiders.next() will advance to the next guider, and
  68       * guiders.hideAll() will hide all guiders.
  69       *
  70       * By default, a button named "Next" will have guiders.next as
  71       * its onclick handler.  A button named "Close" will have
  72       * its onclick handler set to guiders.hideAll.  onclick handlers
  73       * can be customized too.
  74       */
  75       
  76      guiders.createGuider({
  77        buttons: [{name: "Next"}],
  78        description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
  79        id: "first",
  80        next: "second",
  81        overlay: true,
  82        title: "Welcome to Guiders.js!"
  83      }).show();
  84      /**
  85       * .show() means that this guider will get shown immediately after creation.
  86       *
  87       * Using .show() is one way of starting your guiders.
  88       * 
  89       * Another way is by directing the user to a special URL with the guider id in
  90       * its hash tag, such as:
  91       *
  92       * http://www.local.com/README.html#guider=first
  93       *
  94       * This makes it easy to only show guiders for new users.  It can also be used
  95       * to route people among multiple web pages and still keep showing the guiders.
  96       */
  97      
  98      guiders.createGuider({
  99        attachTo: "#clock",
 100        buttons: [{name: "Close"},
 101                  {name: "Next"}],
 102        description: "For example, this guider is attached to the 12 o'clock direction relative to the attached element. The Guiders.js API uses a clock model to determine where the guider should be placed.<br/><br/>Attaching a guider to an element focuses user on the area of interest.",
 103        id: "second",
 104        next: "third",
 105        position: 12,
 106        title: "Guiders are typically attached to an element on the page."
 107      });
 108                 
 109      guiders.createGuider({
 110        attachTo: "#clock",
 111        buttons: [{name: "Close, then click on the clock.", onclick: guiders.hideAll}],
 112        description: "Custom event handlers can be used to hide and show guiders. This allows you to interactively show the user how to use your software by having them complete steps. To try it, click on the clock.",
 113        id: "third",
 114        next: "fourth",
 115        position: 2,
 116        title: "You can advance guiders from custom event handlers.",
 117        width: 500
 118      });
 119  
 120      guiders.createGuider({
 121        attachTo: "#clock",
 122        buttons: [{name: "Exit Guide", onclick: guiders.hideAll},
 123                  {name: "Continue", onclick: guiders.next}],
 124        buttonCustomHTML: "<input type=\"checkbox\" id=\"stop_showing\" /><label for=\"stop_showing\" class=\"stopper\">Optional checkbox. (You can add one.)</label>",
 125        description: "Other aspects of the guider can be customized as well, such as the button names, button onclick handlers, and dialog widths. You'd also want to modify the CSS to your own project's style.",
 126        id: "fourth",
 127        next: "fifth",
 128        position: 7,
 129        title: "Guiders can be customized.",
 130        width: 600
 131      });
 132      
 133      guiders.createGuider({
 134        buttons: [{name: "Next"}],
 135        description: "Guiders can also be used to introduce of brand new features to existing users. Here is an example of a guider in Gmail. Google's CSS calls this a promo, likely short for promotional box. <br/><br/> <img src=\"promo_gmail.png\" style=\"border: 1px solid #333;\" />",
 136        id: "fifth",
 137        next: "finally",
 138        overlay: true,
 139        title: "How else can I use guiders?",
 140        width: 550
 141      });
 142  
 143      guiders.createGuider({
 144        buttons: [{name: "Close", classString: "primary-button"}],
 145        description: "To get started, have a look at this HTML file, then emulate it for use in your own project. You can also see Guiders in action on our site, <a href=\"http://www.optimizely.com/guiders\">www.optimizely.com</a>",
 146        id: "finally",
 147        overlay: true,
 148        title: "Great, so how do I get started?",
 149        width: 500
 150      });
 151      </script>
 152    </body>
 153  </html>
PHP Cross Reference of vtigercrm-6.1.0

/libraries/guidersjs/ -> README.html (source)
