-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
91 lines (66 loc) · 3.4 KB
/
index.htm
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Superpng jQuery plug-in</title>
<link href="styles/base.css" type="text/css" rel="Stylesheet" />
<style type="text/css">
body {margin: 20px; font-family:Verdana, Arial}
h1, h2, h3 {margin: 40px 0 20px 0;}
pre {border: solid 1px #c0c0c0; margin: 20px 0 20px 0; padding:20px 8px 20px 8px; width:860px;background-color:#fafafa}
label {display:inline-block; width:100px}
iframe {width:300px; height:200px}
textarea {width:400px}
ul ul {margin:0 0 0 20px}
li {list-style:disc; margin: 10px 10px 0 20px}
ul ul li {list-style: square}
p {margin: 8px 0 8px 0}
</style>
</head>
<body>
<h1>Superpng jQuery plugin</h1>
<p>The superpng plug-in has been written to provide a flexible png alpha api to developers using jQuery and who need to support IE6.</p>
<p>The script uses either the <a href="http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx">AlphaImageLoader filter</a> or vml based on an approach by <a href="http://www.dillerdesign.com/experiment/DD_belatedPNG/">Drew Diller</a>, depending on the type of tag and whether background-position is required</p><p>For more information on alpha pngs and IE6, please see <a href="http://queryj.com">http://queryj.com.</a></p>
<h3>Usage</h3>
<pre>$(selector).superpng(options);</pre>
<ul>The value of the options parameter can be as follows:
<li>path: define the location of the transparent .gif file used to replace the original png image. Required for all modes of replacement.</li>
<li>mode: filter / vml / auto (default) - describes the method used to enable png alpha.</li>
<ul>
<li>filter: The alpha loader fix is used, replacing the existing image with the blank image found in path.</li>
<li>vml: vml markup is placed inside the container. Requires a div tag or other block element.</li>
<li>auto: A mode is chosen based on the tag type and background-position value. (default)</li>
</ul>
<li>cache: Determines if background images are cached. Default true.</li>
</ul>
<div id="example1">
<h3>Example 1</h3>
<p>Set .png transparency on an <img> tag. Provides the location of the tranparent .gif to use.</p>
<pre>$('img').superpng({path: '/images/blank.gif'});</pre>
<iframe src="example1.htm"></iframe>
</div>
<div id="example2">
<h3>Example 2</h3>
<p>Sprite usage. Set png image on a <div> tag with background-position.</p>
<pre>$('.png').superpng({path: '/images/blank.gif'});</pre>
<iframe src="example2.htm"></iframe>
</div>
<div id="example3">
<h3>Example 3</h3>
<p>Use the vml method and change background position when the image is clicked.</p>
<pre>$('.png').superpng({mode: 'vml', path: '/images/blank.gif'});
$('.png').click(function(e) {
$(this).css('background-position', '20px 0');
$('.png').superpng();
e.preventDefault();
});
</pre>
<iframe src="example3.htm"></iframe>
</div>
<div id="example4">
<h3>Example 4</h3>
<p>Set png image with repeat.</p>
<pre>$('.png').superpng({mode: vml, path: '/images/blank.gif'});</pre>
<iframe src="example4.htm" style="width:304px; height: 304px"></iframe>
</div>
</body>
</html>