ZURB-foundation 2.1.3b
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +65 -0
- data/lib/ZURB-foundation.rb +9 -0
- data/stylesheets/ZURB/_forms.sass +192 -0
- data/stylesheets/ZURB/_foundation.sass +9 -0
- data/stylesheets/ZURB/_globals.sass +132 -0
- data/stylesheets/ZURB/_grid.sass +186 -0
- data/stylesheets/ZURB/_includes.sass +3 -0
- data/stylesheets/ZURB/_mobile.sass +292 -0
- data/stylesheets/ZURB/_orbit.sass +156 -0
- data/stylesheets/ZURB/_reveal.sass +88 -0
- data/stylesheets/ZURB/_typography.sass +129 -0
- data/stylesheets/ZURB/_ui.sass +447 -0
- data/stylesheets/ZURB/includes/_colors.sass +8 -0
- data/stylesheets/ZURB/includes/_mixins.sass +32 -0
- data/stylesheets/ZURB/includes/_settings.sass +5 -0
- data/templates/project/MIT-LICENSE.txt +20 -0
- data/templates/project/humans.txt +8 -0
- data/templates/project/images/misc/button-gloss.png +0 -0
- data/templates/project/images/misc/button-overlay.png +0 -0
- data/templates/project/images/misc/custom-form-sprites.png +0 -0
- data/templates/project/images/misc/input-bg.png +0 -0
- data/templates/project/images/misc/modal-gloss.png +0 -0
- data/templates/project/images/misc/table-sorter.png +0 -0
- data/templates/project/images/orbit/bullets.jpg +0 -0
- data/templates/project/images/orbit/left-arrow.png +0 -0
- data/templates/project/images/orbit/loading.gif +0 -0
- data/templates/project/images/orbit/mask-black.png +0 -0
- data/templates/project/images/orbit/pause-black.png +0 -0
- data/templates/project/images/orbit/right-arrow.png +0 -0
- data/templates/project/images/orbit/rotator-black.png +0 -0
- data/templates/project/images/orbit/timer-black.png +0 -0
- data/templates/project/index.html +151 -0
- data/templates/project/javascripts/app.js +94 -0
- data/templates/project/javascripts/forms.jquery.js +58 -0
- data/templates/project/javascripts/jquery.customforms.js +168 -0
- data/templates/project/javascripts/jquery.min.js +4 -0
- data/templates/project/javascripts/jquery.orbit-1.3.0.js +597 -0
- data/templates/project/javascripts/jquery.placeholder.min.js +2 -0
- data/templates/project/javascripts/jquery.reveal.js +126 -0
- data/templates/project/manifest.rb +49 -0
- data/templates/project/robots.txt +4 -0
- data/templates/project/sass/app.sass +26 -0
- data/templates/project/sass/ie.sass +14 -0
- metadata +98 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// Compass, importing CSS3 mixins and it's utilities
|
|
2
|
+
//----------------------------------------------------------------------------------------------------
|
|
3
|
+
|
|
4
|
+
@import compass/css3
|
|
5
|
+
@import compass/utilities
|
|
6
|
+
|
|
7
|
+
// Font stacks
|
|
8
|
+
//----------------------------------------------------------------------------------------------------
|
|
9
|
+
|
|
10
|
+
@mixin HelveticaFontStack
|
|
11
|
+
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
|
|
12
|
+
|
|
13
|
+
// Font size mixin to include px and rem
|
|
14
|
+
|
|
15
|
+
@mixin font-size($size, $is-important: false)
|
|
16
|
+
@if $is-important
|
|
17
|
+
font-size: $size + px !important
|
|
18
|
+
font-size: ($size / 10) + rem !important
|
|
19
|
+
@else
|
|
20
|
+
font-size: $size + px
|
|
21
|
+
font-size: ($size / 10) + rem
|
|
22
|
+
|
|
23
|
+
// WebKit: font-smoothing
|
|
24
|
+
// Values: none, antialiased (default), subpixel-antialiased
|
|
25
|
+
//
|
|
26
|
+
// References:
|
|
27
|
+
//
|
|
28
|
+
// 1. http://maxvoltar.com/sandbox/fontsmoothing/
|
|
29
|
+
// 2. http://maxvoltar.com/archive/-webkit-font-smoothing
|
|
30
|
+
|
|
31
|
+
@mixin font-smoothing($value: antialiased)
|
|
32
|
+
-webkit-font-smoothing: $value
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
Copyright (c) 2011 ZURB, http://www.zurb.com/
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
4
|
+
a copy of this software and associated documentation files (the
|
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
9
|
+
the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be
|
|
12
|
+
included in all copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
4
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
6
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
7
|
+
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
|
|
8
|
+
<head>
|
|
9
|
+
<meta charset="utf-8" />
|
|
10
|
+
|
|
11
|
+
<!-- Set the viewport width to device width for mobile -->
|
|
12
|
+
<meta name="viewport" content="width=device-width" />
|
|
13
|
+
|
|
14
|
+
<title>Welcome to Foundation</title>
|
|
15
|
+
|
|
16
|
+
<!-- Included CSS Files -->
|
|
17
|
+
<!-- Combine and Compress These CSS Files -->
|
|
18
|
+
<link rel="stylesheet" href="stylesheets/globals.css">
|
|
19
|
+
<link rel="stylesheet" href="stylesheets/typography.css">
|
|
20
|
+
<link rel="stylesheet" href="stylesheets/grid.css">
|
|
21
|
+
<link rel="stylesheet" href="stylesheets/ui.css">
|
|
22
|
+
<link rel="stylesheet" href="stylesheets/forms.css">
|
|
23
|
+
<link rel="stylesheet" href="stylesheets/orbit.css">
|
|
24
|
+
<link rel="stylesheet" href="stylesheets/reveal.css">
|
|
25
|
+
<link rel="stylesheet" href="stylesheets/mobile.css">
|
|
26
|
+
<!-- End Combine and Compress These CSS Files -->
|
|
27
|
+
<link rel="stylesheet" href="stylesheets/app.css">
|
|
28
|
+
|
|
29
|
+
<!--[if lt IE 9]>
|
|
30
|
+
<link rel="stylesheet" href="stylesheets/ie.css">
|
|
31
|
+
<![endif]-->
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
<!-- IE Fix for HTML5 Tags -->
|
|
35
|
+
<!--[if lt IE 9]>
|
|
36
|
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
37
|
+
<![endif]-->
|
|
38
|
+
|
|
39
|
+
</head>
|
|
40
|
+
<body>
|
|
41
|
+
|
|
42
|
+
<!-- container -->
|
|
43
|
+
<div class="container">
|
|
44
|
+
|
|
45
|
+
<div class="row">
|
|
46
|
+
<div class="twelve columns">
|
|
47
|
+
<h2>Welcome to Foundation</h2>
|
|
48
|
+
<p>This is version 2.0.3 released on October 31, 2011</p>
|
|
49
|
+
|
|
50
|
+
<hr />
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="row">
|
|
55
|
+
<div class="eight columns">
|
|
56
|
+
<h3>The Grid</h3>
|
|
57
|
+
|
|
58
|
+
<!-- Grid Example -->
|
|
59
|
+
<div class="row">
|
|
60
|
+
<div class="twelve columns">
|
|
61
|
+
<div class="panel">
|
|
62
|
+
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="row">
|
|
67
|
+
<div class="six columns">
|
|
68
|
+
<div class="panel">
|
|
69
|
+
<p>Six columns</p>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="six columns">
|
|
73
|
+
<div class="panel">
|
|
74
|
+
<p>Six columns</p>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="row">
|
|
79
|
+
<div class="four columns">
|
|
80
|
+
<div class="panel">
|
|
81
|
+
<p>Four columns</p>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="four columns">
|
|
85
|
+
<div class="panel">
|
|
86
|
+
<p>Four columns</p>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="four columns">
|
|
90
|
+
<div class="panel">
|
|
91
|
+
<p>Four columns</p>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<h3>Tabs</h3>
|
|
97
|
+
<dl class="tabs">
|
|
98
|
+
<dd><a href="#simple1" class="active">Simple Tab 1</a></dd>
|
|
99
|
+
<dd><a href="#simple2">Simple Tab 2</a></dd>
|
|
100
|
+
<dd><a href="#simple3">Simple Tab 3</a></dd>
|
|
101
|
+
</dl>
|
|
102
|
+
|
|
103
|
+
<ul class="tabs-content">
|
|
104
|
+
<li class="active" id="simple1Tab">This is simple tab 1's content. Pretty neat, huh?</li>
|
|
105
|
+
<li id="simple2Tab">This is simple tab 2's content. Now you see it!</li>
|
|
106
|
+
<li id="simple3Tab">This is simple tab 3's content. It's, you know...okay.</li>
|
|
107
|
+
</ul>
|
|
108
|
+
|
|
109
|
+
<h3>Buttons</h3>
|
|
110
|
+
|
|
111
|
+
<p><a href="#" class="small blue button">Small Blue Button</a></p>
|
|
112
|
+
<p><a href="#" class="blue button">Medium Blue Button</a></p>
|
|
113
|
+
<p><a href="#" class="large blue button">Large Blue Button</a></p>
|
|
114
|
+
|
|
115
|
+
<p><a href="#" class="nice radius small blue button">Nice Blue Button</a></p>
|
|
116
|
+
<p><a href="#" class="nice radius blue button">Nice Blue Button</a></p>
|
|
117
|
+
<p><a href="#" class="nice radius large blue button">Nice Blue Button</a></p>
|
|
118
|
+
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="four columns">
|
|
122
|
+
<h4>Getting Started</h4>
|
|
123
|
+
<p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
|
|
124
|
+
|
|
125
|
+
<h4>Other Resources</h4>
|
|
126
|
+
<p>Once you've exhausted the fun in this document, you should check out:</p>
|
|
127
|
+
<ul class="disc">
|
|
128
|
+
<li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
|
|
129
|
+
<li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
|
|
130
|
+
<li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
|
|
131
|
+
</ul>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
</div>
|
|
136
|
+
<!-- container -->
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
<!-- Included JS Files -->
|
|
142
|
+
<script src="javascripts/jquery.min.js"></script>
|
|
143
|
+
<script src="javascripts/jquery.reveal.js"></script>
|
|
144
|
+
<script src="javascripts/jquery.orbit-1.3.0.js"></script>
|
|
145
|
+
<script src="javascripts/forms.jquery.js"></script>
|
|
146
|
+
<script src="javascripts/jquery.customforms.js"></script>
|
|
147
|
+
<script src="javascripts/jquery.placeholder.min.js"></script>
|
|
148
|
+
<script src="javascripts/app.js"></script>
|
|
149
|
+
|
|
150
|
+
</body>
|
|
151
|
+
</html>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
$(document).ready(function () {
|
|
2
|
+
|
|
3
|
+
/* Use this js doc for all application specific JS */
|
|
4
|
+
|
|
5
|
+
/* TABS --------------------------------- */
|
|
6
|
+
/* Remove if you don't need :) */
|
|
7
|
+
|
|
8
|
+
function activateTab($tab) {
|
|
9
|
+
var $activeTab = $tab.closest('dl').find('a.active'),
|
|
10
|
+
contentLocation = $tab.attr("href") + 'Tab';
|
|
11
|
+
|
|
12
|
+
//Make Tab Active
|
|
13
|
+
$activeTab.removeClass('active');
|
|
14
|
+
$tab.addClass('active');
|
|
15
|
+
|
|
16
|
+
//Show Tab Content
|
|
17
|
+
$(contentLocation).closest('.tabs-content').children('li').hide();
|
|
18
|
+
$(contentLocation).show();
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
$('dl.tabs').each(function () {
|
|
22
|
+
//Get all tabs
|
|
23
|
+
var tabs = $(this).children('dd').children('a');
|
|
24
|
+
tabs.click(function (e) {
|
|
25
|
+
activateTab($(this));
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
if (window.location.hash) {
|
|
30
|
+
activateTab($('a[href="' + window.location.hash + '"]'));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* ALERT BOXES ------------ */
|
|
34
|
+
$(".alert-box").delegate("a.close", "click", function() {
|
|
35
|
+
$(this).closest(".alert-box").fadeOut(function(){
|
|
36
|
+
$(this).remove();
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
/* PLACEHOLDER FOR FORMS ------------- */
|
|
42
|
+
/* Remove this and jquery.placeholder.min.js if you don't need :) */
|
|
43
|
+
|
|
44
|
+
$('input, textarea').placeholder();
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
/* UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE6/7/8 SUPPORT AND ARE USING .block-grids */
|
|
49
|
+
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'left'});
|
|
50
|
+
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'left'});
|
|
51
|
+
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'left'});
|
|
52
|
+
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'left'});
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
/* DROPDOWN NAV ------------- */
|
|
57
|
+
/*
|
|
58
|
+
$('.nav-bar li a, .nav-bar li a:after').each(function() {
|
|
59
|
+
$(this).data('clicks', 0);
|
|
60
|
+
});
|
|
61
|
+
$('.nav-bar li a, .nav-bar li a:after').bind('touchend click', function(e){
|
|
62
|
+
e.stopPropagation();
|
|
63
|
+
e.preventDefault();
|
|
64
|
+
var f = $(this).siblings('.flyout');
|
|
65
|
+
$(this).data('clicks', ($(this).data('clicks') + 1));
|
|
66
|
+
if (!f.is(':visible') && f.length > 0) {
|
|
67
|
+
$('.nav-bar li .flyout').hide();
|
|
68
|
+
f.show();
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
$('.nav-bar li a, .nav-bar li a:after').bind(' touchend click', function(e) {
|
|
72
|
+
e.stopPropagation();
|
|
73
|
+
e.preventDefault();
|
|
74
|
+
if ($(this).data('clicks') > 1) {
|
|
75
|
+
window.location = $(this).attr('href');
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
$('.nav-bar').bind('touchend click', function(e) {
|
|
79
|
+
e.stopPropagation();
|
|
80
|
+
if (!$(e.target).parents('.nav-bar li .flyout') || $(e.target) != $('.nav-bar li .flyout')) {
|
|
81
|
+
e.preventDefault();
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
$('body').bind('touchend', function(e) {
|
|
85
|
+
if (!$(e.target).parents('.nav-bar li .flyout') || $(e.target) != $('.nav-bar li .flyout')) {
|
|
86
|
+
$('.nav-bar li .flyout').hide();
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
*/
|
|
90
|
+
|
|
91
|
+
/* DISABLED BUTTONS ------------- */
|
|
92
|
+
/* Gives elements with a class of 'disabled' a return: false; */
|
|
93
|
+
|
|
94
|
+
});
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* jQuery.placeholder - Placeholder plugin for input fields
|
|
3
|
+
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
|
|
4
|
+
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
|
|
5
|
+
* Date: 2008/10/14
|
|
6
|
+
*
|
|
7
|
+
* @author Blair Mitchelmore
|
|
8
|
+
* @version 1.0.1
|
|
9
|
+
*
|
|
10
|
+
**/
|
|
11
|
+
new function($) {
|
|
12
|
+
$.fn.placeholder = function(settings) {
|
|
13
|
+
settings = settings || {};
|
|
14
|
+
var key = settings.dataKey || "placeholderValue";
|
|
15
|
+
var attr = settings.attr || "placeholder";
|
|
16
|
+
var className = settings.className || "placeholder";
|
|
17
|
+
var values = settings.values || [];
|
|
18
|
+
var block = settings.blockSubmit || false;
|
|
19
|
+
var blank = settings.blankSubmit || false;
|
|
20
|
+
var submit = settings.onSubmit || false;
|
|
21
|
+
var value = settings.value || "";
|
|
22
|
+
var position = settings.cursor_position || 0;
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
return this.filter(":input").each(function(index) {
|
|
26
|
+
$.data(this, key, values[index] || $(this).attr(attr));
|
|
27
|
+
}).each(function() {
|
|
28
|
+
if ($.trim($(this).val()) === "")
|
|
29
|
+
$(this).addClass(className).val($.data(this, key));
|
|
30
|
+
}).focus(function() {
|
|
31
|
+
if ($.trim($(this).val()) === $.data(this, key))
|
|
32
|
+
$(this).removeClass(className).val(value)
|
|
33
|
+
if ($.fn.setCursorPosition) {
|
|
34
|
+
$(this).setCursorPosition(position);
|
|
35
|
+
}
|
|
36
|
+
}).blur(function() {
|
|
37
|
+
if ($.trim($(this).val()) === value)
|
|
38
|
+
$(this).addClass(className).val($.data(this, key));
|
|
39
|
+
}).each(function(index, elem) {
|
|
40
|
+
if (block)
|
|
41
|
+
new function(e) {
|
|
42
|
+
$(e.form).submit(function() {
|
|
43
|
+
return $.trim($(e).val()) != $.data(e, key)
|
|
44
|
+
});
|
|
45
|
+
}(elem);
|
|
46
|
+
else if (blank)
|
|
47
|
+
new function(e) {
|
|
48
|
+
$(e.form).submit(function() {
|
|
49
|
+
if ($.trim($(e).val()) == $.data(e, key))
|
|
50
|
+
$(e).removeClass(className).val("");
|
|
51
|
+
return true;
|
|
52
|
+
});
|
|
53
|
+
}(elem);
|
|
54
|
+
else if (submit)
|
|
55
|
+
new function(e) { $(e.form).submit(submit); }(elem);
|
|
56
|
+
});
|
|
57
|
+
};
|
|
58
|
+
}(jQuery);
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* jQuery Custom Forms Plugin 1.0
|
|
3
|
+
* www.ZURB.com
|
|
4
|
+
* Copyright 2010, ZURB
|
|
5
|
+
* Free to use under the MIT license.
|
|
6
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
jQuery(document).ready(function ($) {
|
|
10
|
+
|
|
11
|
+
function appendCustomMarkup(type) {
|
|
12
|
+
$('form.custom input:' + type).each(function () {
|
|
13
|
+
|
|
14
|
+
var $this = $(this).hide(),
|
|
15
|
+
$span = $this.next('span.custom.' + type);
|
|
16
|
+
|
|
17
|
+
if ($span.length === 0) {
|
|
18
|
+
$span = $('<span class="custom ' + type + '"></span>').insertAfter($this);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
$span.toggleClass('checked', $this.is(':checked'));
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
appendCustomMarkup('checkbox');
|
|
25
|
+
appendCustomMarkup('radio');
|
|
26
|
+
|
|
27
|
+
$('form.custom select').each(function () {
|
|
28
|
+
var $this = $(this),
|
|
29
|
+
$customSelect = $this.next('div.custom.dropdown'),
|
|
30
|
+
$options = $this.find('option'),
|
|
31
|
+
maxWidth = 0,
|
|
32
|
+
$li;
|
|
33
|
+
|
|
34
|
+
if ($customSelect.length === 0) {
|
|
35
|
+
$customSelect = $('<div class="custom dropdown"><a href="#" class="selector"></a><ul></ul></div>"');
|
|
36
|
+
$options.each(function () {
|
|
37
|
+
$li = $('<li>' + $(this).html() + '</li>');
|
|
38
|
+
$customSelect.find('ul').append($li);
|
|
39
|
+
});
|
|
40
|
+
$customSelect.prepend('<a href="#" class="current">' + $options.first().html() + '</a>');
|
|
41
|
+
|
|
42
|
+
$this.after($customSelect);
|
|
43
|
+
$this.hide();
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
$options.each(function (index) {
|
|
47
|
+
if (this.selected) {
|
|
48
|
+
$customSelect.find('li').eq(index).addClass('selected');
|
|
49
|
+
$customSelect.find('.current').html($(this).html());
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
$customSelect.find('li').each(function () {
|
|
54
|
+
$customSelect.addClass('open');
|
|
55
|
+
if ($(this).outerWidth() > maxWidth) {
|
|
56
|
+
maxWidth = $(this).outerWidth();
|
|
57
|
+
}
|
|
58
|
+
$customSelect.removeClass('open');
|
|
59
|
+
});
|
|
60
|
+
$customSelect.css('width', maxWidth + 18 + 'px');
|
|
61
|
+
$customSelect.find('ul').css('width', maxWidth + 16 + 'px');
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
(function ($) {
|
|
66
|
+
|
|
67
|
+
function toggleCheckbox($element) {
|
|
68
|
+
var $input = $element.prev(),
|
|
69
|
+
input = $input[0];
|
|
70
|
+
|
|
71
|
+
input.checked = ((input.checked) ? false : true);
|
|
72
|
+
$element.toggleClass('checked');
|
|
73
|
+
|
|
74
|
+
$input.trigger('change');
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function toggleRadio($element) {
|
|
78
|
+
var $input = $element.prev(),
|
|
79
|
+
input = $input[0];
|
|
80
|
+
|
|
81
|
+
$('input:radio[name="' + $input.attr('name') + '"]').each(function () {
|
|
82
|
+
$(this).next().removeClass('checked');
|
|
83
|
+
});
|
|
84
|
+
input.checked = ((input.checked) ? false : true);
|
|
85
|
+
$element.toggleClass('checked');
|
|
86
|
+
|
|
87
|
+
$input.trigger('change');
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
$(document).on('click', 'form.custom span.custom.checkbox', function (event) {
|
|
91
|
+
event.preventDefault();
|
|
92
|
+
event.stopPropagation();
|
|
93
|
+
|
|
94
|
+
toggleCheckbox($(this));
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
$(document).on('click', 'form.custom span.custom.radio', function (event) {
|
|
98
|
+
event.preventDefault();
|
|
99
|
+
event.stopPropagation();
|
|
100
|
+
|
|
101
|
+
toggleRadio($(this));
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
$(document).on('click', 'form.custom label', function (event) {
|
|
105
|
+
var $associatedElement = $('#' + $(this).attr('for')),
|
|
106
|
+
$customCheckbox,
|
|
107
|
+
$customRadio;
|
|
108
|
+
if ($associatedElement.length !== 0) {
|
|
109
|
+
if ($associatedElement.attr('type') === 'checkbox') {
|
|
110
|
+
event.preventDefault();
|
|
111
|
+
$customCheckbox = $(this).find('span.custom.checkbox');
|
|
112
|
+
toggleCheckbox($customCheckbox);
|
|
113
|
+
} else if ($associatedElement.attr('type') === 'radio') {
|
|
114
|
+
event.preventDefault();
|
|
115
|
+
$customRadio = $(this).find('span.custom.radio');
|
|
116
|
+
toggleRadio($customRadio);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
$(document).on('click', 'form.custom div.custom.dropdown a.current, form.custom div.custom.dropdown a.selector', function (event) {
|
|
122
|
+
var $this = $(this),
|
|
123
|
+
$dropdown = $this.closest('div.custom.dropdown');
|
|
124
|
+
|
|
125
|
+
event.preventDefault();
|
|
126
|
+
$dropdown.toggleClass('open');
|
|
127
|
+
|
|
128
|
+
if ($dropdown.hasClass('open')) {
|
|
129
|
+
$(document).bind('click.customdropdown', function (event) {
|
|
130
|
+
$dropdown.removeClass('open');
|
|
131
|
+
$(document).unbind('.customdropdown');
|
|
132
|
+
});
|
|
133
|
+
} else {
|
|
134
|
+
$(document).unbind('.customdropdown');
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
$(document).on('click', 'form.custom div.custom.dropdown li', function (event) {
|
|
139
|
+
var $this = $(this),
|
|
140
|
+
$customDropdown = $this.closest('div.custom.dropdown'),
|
|
141
|
+
$select = $customDropdown.prev(),
|
|
142
|
+
selectedIndex = 0;
|
|
143
|
+
|
|
144
|
+
event.preventDefault();
|
|
145
|
+
event.stopPropagation();
|
|
146
|
+
|
|
147
|
+
$this
|
|
148
|
+
.closest('ul')
|
|
149
|
+
.find('li')
|
|
150
|
+
.removeClass('selected');
|
|
151
|
+
$this.addClass('selected');
|
|
152
|
+
|
|
153
|
+
$customDropdown
|
|
154
|
+
.removeClass('open')
|
|
155
|
+
.find('a.current')
|
|
156
|
+
.html($this.html());
|
|
157
|
+
|
|
158
|
+
$this.closest('ul').find('li').each(function (index) {
|
|
159
|
+
if ($this[0] == this) {
|
|
160
|
+
selectedIndex = index;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
});
|
|
164
|
+
$select[0].selectedIndex = selectedIndex;
|
|
165
|
+
|
|
166
|
+
$select.trigger('change');
|
|
167
|
+
});
|
|
168
|
+
})(jQuery);
|