ZURB-foundation 2.1.3b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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);
|