-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
97 lines (78 loc) · 4.72 KB
/
demo.html
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
<!DOCTYPE html>
<!--[if lt IE 8]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kalypto: Replace or Style Checkbox or Radio Button Inputs</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/kalypto.css">
</head>
<body>
<h1>Kalypto</h1>
<h2>Created & copyright (c) by Mike Behnke</h2>
<p>http://www.local-pc-guy.com<br />
Twitter: @LocalPCGuy</p>
<p><strong>Description:</strong> Kalypto is a basic plugin to allow you to use a simple sprite graphic in place of a checkbox or radio button. Styles for the checked/non-checked state should be defined in a stylesheet and a sprite added, and the plugin handles building a new element, changes the class and keeps the checkbox or radio button updated with the correct state. You can style the selected and unselected states with any CSS you want (even avoid a sprite, if you want to generate an image in some other method available to CSS).</p>
<p><strong>Requirements:</strong> jQuery is a requirement, Kalypto was original built against jQuery version 1.7.6, and should work through later versions. Basic use requires CSS styles for normal and selected state as well as a sprite that contains each state.</p>
<p>Kalypto = καλυπτω (Greek) which translates to "to cover, to conceal"</p>
<div class="radioButtonDemo">
<label for="radioDemo1">Radio 1</label>
<input type="radio" id="radioDemo1" name="rDemo" /><br />
<label for="radioDemo2">Radio 2</label>
<input type="radio" id="radioDemo2" name="rDemo" /><br />
<label for="radioDemo3">Radio 3</label>
<input type="radio" id="radioDemo3" name="rDemo" /><br />
</div>
<br />
<div class="checkboxDemo">
<label for="checkboxDemo">Checkbox</label>
<input type="checkbox" id="checkboxDemo" />
</div>
<p><strong>usage:</strong><br />
<pre>
$("input[name=rDemo]").kalypto({hideInputs: false});<br />
$("#checkboxDemo").kalypto({hideInputs: false});
</pre></p>
<p><strong>Events:</strong> (bound on the input)<br />
<pre>
k_elbuilt: when an element is first built <br />
k_checked: when an element is checked <br />
k_unchecked: when an element is checked
</pre></p>
<p><strong>options/defaults:</strong> <br />
<pre>
{
toggleClass: "toggle", // This is the base class for the created element
checkedClass: "checked", // This is the active (or selected/checked) class
hideInputs: true, // If for some reason you don't want to hide the inputs, mainly in for the demo page
copyInputClasses: true, // If there are classes on the input, by default they will be copied to the new element
dataLabel: "", // If you want text in your custom element, you can add it with a data-label attribute on the input (data-label="Custom Text")
checkedEvent: "k_checked", // This event will be triggered on the input when it is checked
uncheckedEvent: "k_unchecked", // This event will be triggered on the input when it is unchecked
elBuiltEvent: "k_elbuilt", // This event will be triggered on the input when the custom element is built
customClasses: "" // If you want to add custom classes when it is built, add them here
}
</pre></p>
<p><a href="https://github.com/localpcguy/kalypto">View Kalypto on GitHub</a></p>
<p>Released under MIT License<br />
http://lpg.mit-license.org/</p>
<!-- JavaScript at the bottom for fast page loading: -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.js"><\/script>')</script>
<script src="js/kalypto.js"></script>
<script>
$("input[name=rDemo]").kalypto({hideInputs: false, toggleClass: "toggleR",});
$("#checkboxDemo").kalypto({hideInputs: false});
</script>
<!-- end scripts -->
<!-- Asynchronous Google Analytics snippet.-->
<!-- <script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script> -->
</body>
</html>