Topbox/index.html at master · smartpill/Topbox · 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Topbox demo</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/topbox.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.easing.js"></script>
		<script type="text/javascript" src="js/topbox.js"></script>
		<script type="text/javascript">
			jQuery(function($) {

                $("#btnDemo").bind("click", function(){

                    $.topbox.show('test',{
                      title: 'Test caption',

                      buttons: {
                        Close: function(){
                            this.close();
                        }
                      }
                    });
                });

                $("#btnDemo2").bind("click", function(){

                    $.topbox.show('test',{
                      title: 'Test caption',
                      theme: "dark",

                      buttons: {
                        Close: function(){
                            this.close();
                        }
                      }
                    });
                });

				$("#btnAlert").bind("click", function(){
                    $.topbox.alert('This is an alert!');
                });

				$("#btnConfirm").bind("click", function(){
                    $.topbox.confirm('Message to confirm', function(){
						alert("Yep, confirmed!");
						this.close();
					});
                });
			});
		</script>
	</head>
	<body>
		<div class="wrapper">
            <h1>Topbox</h1>

            <p>
                ... a dialog alternative.
            </p>

            <p>
                <button id="btnDemo">Click me</button>
                <button id="btnDemo2">Dark theme</button>
            </p>

			<h2>Usage</h2>
			<p>

<pre>
$.topbox.show(content, <span style="color:#999;">{
	//settings
	'title'     : false,
	'closeOnEsc': true,
	'theme'     : 'default',
	'height'    : 'auto',
	'width'     : 'auto',
	'speed'     : 500,
	'easing'    : 'swing',
	'buttons'   : false,

	//events
	'beforeShow'  : function(){},
	'beforeClose' : function(){},
	'onClose'     : function(){}
}</span>);
</pre>

				where content could be a string, dom element or jQuery element.
			</p>

			<h2>Shortcuts</h2>
			<p>
                <button id="btnAlert">Alert</button>
<pre>
$.topbox.alert("...")
</pre>

                <button id="btnConfirm">Confirm</button>
<pre>
$.topbox.confirm("...", function(){
	//your callback code
});
</pre>
			</p>


        <h2>Code</h2>
        <p><a href="https://github.com/aheinze/Topbox">Fork me on github</a></p>

        </div>

	</body>
</html>