jQuery-Notify-bar/index.html at master · ccordenier/jQuery-Notify-bar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 'Notify bar'</title>
<link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  />
<style type="text/css">
.custom {
  font-size:20px;
  font-family: "Times New Roman", Times, serif;
  text-transform:uppercase;
  background:#fff url(http://www.dmitri.me/misc/jq-test-pattern.gif) repeat-x top center;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
img {
behavior:url("/inc/iepngfix.htc");
}
</style>
<link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
</head>

<body>

<h1>'Notify Bar' plugin</h1>
    <p>
      Simple plugin (basically it's not a plugin, but widget) to show notify bar
      (like on Twitter's webpage).
      It's very simple to use:
    </p>
    <pre>
      <code>
$(function () {
  $.notifyBar({
    html: "Thank you, your settings was updated!",
    delay: 2000,
    animationSpeed: "normal"
  });
});
      </code>
    </pre>
    and to your html page stylesheet:
    <pre>
<code>&lt;link rel="stylesheet" href="jquery.notifyBar.css" type="text/css" media="screen"  /&gt;</code>
    </pre>
    <h3>$.notifyBar can pass next parameters:</h3>
    <table border="1">
      <tr>
        <th>Parameter</th>
        <th>Description</th>
        <th>Type</th>
        <th>Default</th>
      </tr>
      <tr>
        <td>html</td>
        <td>What text will be inside bar, can be HTML</td>
        <td>String [optional]</td>
        <td>"Your message here"</td>
      </tr>
      <tr>
        <td>delay</td>
        <td>How long bar will be delayed, doesn't count animation time.</td>
        <td>Integer [optional]</td>
        <td>2000</td>
      </tr>
      <tr>
        <td>animationSpeed</td>
        <td>How long this bar will be slided up and down</td>
        <td>String | Integer [optional]</td>
        <td>"normal"</td>
      </tr>
      <tr>
        <td>jqObject</td>
        <td>Own jquery object for notify bar</td>
        <td>jQuery object [optional]</td>
        <td>null</td>
      </tr>
      <tr>
        <td>cls</td>
        <td>You can set own CSS class for 'Notify bar'. There is too premade clasess "error" and "success"</td>
        <td>String</td>
        <td></td>
      </tr>
    </table>

    <h3>Check different styles</h3>
    <p>
      Usually this bar appears on the success message, but anyway can be used everywhere.
      <br />
      Try it! <strong>↓</strong>
    </p>
    <button id="common">Default style bar</button>
    <button id="error">Error style bar</button>
    <button id="success">Success style bar</button>
    <button id="custom">Custom styling</button>


    <p>
      <a href="http://www.dmitri.me/blog/notify-bar">Project home</a> |
      <a href="http://github.com/dknight/jQuery-Notify-bar">download source</a>
    </p>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="jquery.notifyBar.js"></script>
    <script type="text/javascript">
    $(function() {

      $.notifyBar({ html: "This is 'Notify bar'!" });

      $("#callGreen").click(function(){
        $.notifyBar({
          html: "Thank you, your settings was updated!",
          jqObject: $("#greenDiv")
        });
      });

      $("#callError").click(function(){
        $.notifyBar({
          jqObject: $("#errorDiv")
        });
      });

      $("#common").click(function(){
        $.notifyBar({});
      });
      $("#error").click(function(){
        $.notifyBar({ cls: "error", html: "Error occurred!" });
      });
      $("#success").click(function(){
        $.notifyBar({ cls: "success", html: "Your data has been changed!" });
      });
      $("#custom").click(function(){
        $.notifyBar({ cls: "custom", html: "Your data has been changed!" });
      });

    });

    </script>
</body>
</html>