← Back to branch summary

~launchpad-pqm/lazr-js/toolchain

« back to all changes in this revision

Viewing changes to examples/error/index.html

  • Committer: Sidnei da Silva
  • Date: 2009-11-16 00:51:29 UTC
  • mto: This revision was merged to the branch mainline in revision 154.
  • Revision ID: sidnei.da.silva@canonical.com-20091116005129-8ibwjlboa38glaw5
- Improved generation of skin modules and revamped combo service to make it more twisty.

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/error/index.html
1
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2
 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
 
<html>
4
 
<head>
5
 
  <title>Lazr-js examples: error</title>
6
 
 
7
 
  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
8
 
  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
9
 
  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
10
 
 
11
 
  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
12
 
  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
13
 
  <script type="text/javascript">
14
 
    var LAZR_YUI_CONFIG = {
15
 
        filter: "min",
16
 
        base: "../../build/",
17
 
        modules: LAZR_MODULES,
18
 
    };
19
 
  </script>
20
 
 
21
 
  <script type="text/javascript">
22
 
 
23
 
// We create a global variable here to reference our display_error
24
 
// method only so that the call to setTimeout() below used for
25
 
// demonstration has access to the function.
26
 
var display_error;
27
 
YUI(LAZR_YUI_CONFIG).use(
28
 
        'lazr.error', 'lazr.anim', 'node', 'event',
29
 
        'dump', function(Y) {
30
 
 
31
 
    var input = Y.one('#input_box');
32
 
    var button = Y.one('#raise_error');
33
 
 
34
 
    var add_delayed_errors = function() {
35
 
        display_error = Y.lazr.error.display_error;
36
 
        setTimeout(
37
 
            'display_error("A subsequent error 1", "#input_box")',
38
 
            3000);
39
 
        setTimeout(
40
 
            'display_error("A subsequent error 2", "#input_box")',
41
 
            6000);
42
 
        setTimeout(
43
 
            'display_error("A subsequent error 3", "#input_box")',
44
 
            9000);
45
 
    };
46
 
 
47
 
    // Ensure the error displays when the button is clicked.
48
 
    button.on('click', function(){
49
 
        Y.lazr.error.display_error(input.get('value'), '#input_box');
50
 
        add_delayed_errors(input.get('value'));
51
 
    });
52
 
 
53
 
    // And display the error by default when the page loads.
54
 
    Y.lazr.error.display_error(input.get('value'), '#input_box');
55
 
    add_delayed_errors(input.get('value'));
56
 
 
57
 
});
58
 
  </script>
59
 
 
60
 
</head>
61
 
 
62
 
<body class="yui3-skin-sam">
63
 
 
64
 
<h1>Using Lazr error</h1>
65
 
<p>The Lazr error helper allows generic error handling for site-wide issues
66
 
   such as  ajax-related errors, via the
67
 
   <code>lazr.error.display_error()</code> method.</p>
68
 
 
69
 
<h2>Demo</h2>
70
 
 
71
 
<p>Enter your error here: <input type="text" id="input_box" value="Your error"/>
72
 
    <button id="raise_error">Raise error</button></p>
73
 
 
74
 
<p>A second error should appear in the error widget after 3 seconds.</p>
75
 
 
76
 
<h2>Page setup</h2>
77
 
<p>The following Javascript and CSS files have been included for the
78
 
   example on this page (Note: error overlay currently extends
79
 
   overlay - we should invert this):</p>
80
 
 
81
 
<h3>Javascript</h3>
82
 
<pre>
83
 
    &lt;script type="text/javascript" src="../../build/yui/yui-min.js"&gt;&lt;/script&gt;
84
 
    &lt;script type="text/javascript" src="../../build/lazr/lazr-meta.js"&gt;&lt;/script&gt;
85
 
</pre>
86
 
 
87
 
<h2>Widget Setup</h2>
88
 
<p>There is no setup necessary for the error overlay. When
89
 
   calling display_error() you simply pass the error message
90
 
   that should be displayed.</p>
91
 
<pre><code>
92
 
    Y.lazr.error.display_error("Your error message.");
93
 
</code></pre>
94
 
 
95
 
<h3>Passing an optional node to flash</h3>
96
 
<p>You can optionally pass a node (or a selector) that should be
97
 
   brought to the viewers attention. This node will be flashed red
98
 
   before the error is displayed.
99
 
</p>
100
 
<pre><code>
101
 
    Y.lazr.error.display_error("Your error message.", '#input_box');
102
 
</code></pre>
103
 
 
104
 
</body>
105
 
</html>