greatbox/index.html at master · rafaheringer/greatbox · 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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>GreatBox - A great jQuery lighbox plugin</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.greatbox.js"></script>

	<script type="text/javascript">
		//Seta padrões para todos os modais
		$.greatbox.setDefaults({
			effect: 'puffInIn'
		});


		$(document).ready(function(){
			/* Demonstrações  */

			//Modal simples
			$('#teste1').greatbox({
				title: "Página de modal com HTML imbutido",
				content: "<p>Parágrafo de exemplo.</p>"
			});

			//Modal com ajax simples
			$('#teste2').greatbox();

			//Modal com opções via js
			$('#teste3').greatbox({'removepagescroll': true});

			//Modal com opções via data
			$('#teste4').greatbox();
		});
	</script>
</head>

<body>
	<div class="entry-content">
		<h1 class="entry-title">greatbox</h1>

		<h2>Exemplos por tipo de chamada:</h2>
		<ul>
			<!-- Modal simples -->
			<li>
				<a href="javascript:;" id="teste1">Modal simples</a>
				<code>
					<strong>html:</strong> <br />
					&lt;a href="javascript;" id="teste1"&gt;Modal simples&lt;/a&gt;
				</code>
				<code>
					<strong>javascript:</strong> <br />
					$('#teste1').greatbox({<br />
					&nbsp;&nbsp;&nbsp;&nbsp;content: "&lt;p&gt;Parágrafo de exemplo.&lt;/p&gt;"<br />
					});
				</code>
			</li>

			<!-- Modal com ajax simples -->
			<li>
				<a href="ajax-call.html" id="teste2">Modal com ajax (pegando via href)</a>
				<code>
					<strong>html:</strong> <br />
					&lt;a href="ajax-call.html" id="teste2"&gt;Modal com ajax (pegando via href)&lt;/a&gt;
				</code>
				<code>
					<strong>javascript:</strong> <br />
					$('#teste2').greatbox();
				</code>
			</li>

			<!-- Modal com opções via JS -->
			<li>
				<a href="ajax-call.html" id="teste3">Modal com opções via js</a>
				<code>
					<strong>html:</strong> <br />
					&lt;a href="ajax-call.html" id="teste3"&gt;Modal com opções via javascript&lt;/a&gt;
				</code>
				<code>
					<strong>javascript:</strong> <br />
					$('#teste3').greatbox({<br/>
					&nbsp;&nbsp;&nbsp;&nbsp;'removepagescroll':true <br />
					});
				</code>
			</li>

			<!-- Modal com opções via data -->
			<li>
				<a href="javascript;" id="teste4" data-ajax="ajax-call.html" data-duration="0" data-removepagescroll="true">Modal com opções via atributo data</a>
				<code>
					<strong>html:</strong> <br />
					&lt;a href="javascript;" id="teste4" data-ajax="ajax-call.html" data-duration="0" data-removepagescroll="true"&gt;Modal com opções via atributo data&lt;/a&gt;
				</code>
				<code>
					<strong>javascript:</strong> <br />
					$('#teste4').greatbox();
				</code>
			</li>

			<!-- Modal ativado sem javascript -->
			<li>
				<a href="javascript;" id="teste5" data-ajax="ajax-call.html" class="greatbox-enabled">Modal ativado sem javascript, via classe</a>
				<code>
					<strong>html:</strong> <br />
					&lt;a href="javascript;" id="teste5" data-ajax="ajax-call.html" class="greatbox-enabled"&gt;Modal ativado sem javascript, via classe&lt;/a&gt;
				</code>
				<code>
					<strong>javascript:</strong> <br />
					-
				</code>
			</li>
		</ul>
	</div>
</body>
</html>