zurb-foundation 2.0.1 → 2.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +51 -13
- data/lib/foundation/generators/layout_generator.rb +10 -1
- data/lib/foundation/generators/templates/application.html.erb +1 -1
- data/lib/foundation/generators/templates/application.html.haml +30 -0
- data/lib/foundation/generators/templates/application.html.slim +30 -0
- data/lib/foundation/version.rb +1 -1
- data/{app → vendor}/assets/images/foundation/misc/button-gloss.png +0 -0
- data/{app → vendor}/assets/images/foundation/misc/button-overlay.png +0 -0
- data/{app → vendor}/assets/images/foundation/misc/custom-form-sprites.png +0 -0
- data/{app → vendor}/assets/images/foundation/misc/input-bg.png +0 -0
- data/{app → vendor}/assets/images/foundation/misc/modal-gloss.png +0 -0
- data/{app → vendor}/assets/images/foundation/misc/table-sorter.png +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/bullets.jpg +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/left-arrow.png +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/loading.gif +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/mask-black.png +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/pause-black.png +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/right-arrow.png +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/rotator-black.png +0 -0
- data/{app → vendor}/assets/images/foundation/orbit/timer-black.png +0 -0
- data/{app/assets/javascripts/foundation/jquery.orbit-1.3.0.js → vendor/assets/javascripts/foundation.js} +354 -1
- data/vendor/assets/stylesheets/foundation.scss +1072 -0
- metadata +26 -36
- data/app/assets/javascripts/foundation/app.js +0 -43
- data/app/assets/javascripts/foundation/forms.jquery.js +0 -58
- data/app/assets/javascripts/foundation/index.js +0 -6
- data/app/assets/javascripts/foundation/jquery.customforms.js +0 -162
- data/app/assets/javascripts/foundation/jquery.placeholder.min.js.erb +0 -2
- data/app/assets/javascripts/foundation/jquery.reveal.js +0 -150
- data/app/assets/stylesheets/foundation/forms.css.scss.erb +0 -83
- data/app/assets/stylesheets/foundation/globals.css.scss.erb +0 -301
- data/app/assets/stylesheets/foundation/index.css +0 -8
- data/app/assets/stylesheets/foundation/mobile.css.scss.erb +0 -112
- data/app/assets/stylesheets/foundation/orbit.css.scss.erb +0 -210
- data/app/assets/stylesheets/foundation/reveal.css.scss.erb +0 -91
- data/app/assets/stylesheets/foundation/ui.css.scss.erb +0 -212
data/README.markdown
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
WELCOME TO FOUNDATION
|
|
2
|
-
=====================
|
|
1
|
+
# WELCOME TO FOUNDATION
|
|
3
2
|
|
|
4
3
|
Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that'll get you up and running in no time.
|
|
5
4
|
|
|
@@ -8,17 +7,16 @@ Documentation: http://foundation.zurb.com/docs
|
|
|
8
7
|
|
|
9
8
|
Foundation is MIT-licensed and absolutely free to use. Foundation wouldn't be possible without the support of the entire ZURB team, our friends and colleagues who gave feedback, and some luminaries who did some heavy lifting that we took advantage of (thanks guys).
|
|
10
9
|
|
|
11
|
-
Installation
|
|
12
|
-
|
|
10
|
+
# Installation
|
|
11
|
+
|
|
13
12
|
|
|
14
13
|
Inside your Gemfile add the following line:
|
|
15
14
|
|
|
16
|
-
`gem "zurb-foundation"`
|
|
15
|
+
`gem "zurb-foundation", :group => :assets`
|
|
17
16
|
|
|
18
17
|
Then run `bundle install` to install the gem.
|
|
19
18
|
|
|
20
|
-
What now?
|
|
21
|
-
---------
|
|
19
|
+
## What now?
|
|
22
20
|
|
|
23
21
|
If you want to include Foundation on all of your application pages (and why wouldn't you!) then run the following to append `foundation` to your application sprockets files:
|
|
24
22
|
|
|
@@ -39,20 +37,60 @@ Or add `require "foundation"` to your sprockets files like so:
|
|
|
39
37
|
**in application.js**
|
|
40
38
|
`//= require "foundation"`
|
|
41
39
|
|
|
42
|
-
|
|
43
|
-
|
|
40
|
+
### Set the viewport
|
|
41
|
+
|
|
42
|
+
Finally you'll also want to add the following line to the `<head>` section in your layout file (i.e. `app/views/layouts/application.html.erb`) so the design will scale for mobile devices:
|
|
43
|
+
|
|
44
|
+
`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
|
|
45
|
+
|
|
46
|
+
You can also use the included generator to accomplish the same thing:
|
|
47
|
+
|
|
48
|
+
`rails g foundation:layout`
|
|
49
|
+
|
|
50
|
+
# Using foundation in production
|
|
51
|
+
|
|
52
|
+
Before pushing your application to production, you'll need to determine how you want your assets served. You can either compile them on-the-fly or precompile them (recommended). Before continuing you'll want to check your Rails application Gemfile and ensure that `gem "zurb-foundation"` is included in the `assets` group.
|
|
53
|
+
|
|
54
|
+
## To compile on-the-fly
|
|
55
|
+
|
|
56
|
+
In your Rails application edit `config/application.rb` and change:
|
|
57
|
+
|
|
58
|
+
`Bundler.require(*Rails.groups(:assets => %w(development test)))`
|
|
59
|
+
|
|
60
|
+
to:
|
|
61
|
+
|
|
62
|
+
`Bundler.require(:default, :assets, Rails.env)`
|
|
63
|
+
|
|
64
|
+
Then in `config/environments/production.rb` make sure the following setting exists:
|
|
65
|
+
|
|
66
|
+
`config.assets.compile = true`
|
|
67
|
+
|
|
68
|
+
Now all your assets will be compiled the first time someone visits your site, which can cause some delay. Kind of like the first time Passenger spins up your application after it has been idle for some time.
|
|
69
|
+
|
|
70
|
+
## To precompile assets using Capistrano
|
|
71
|
+
|
|
72
|
+
In your Rails application edit `Capfile` and add the following line after `load 'deploy'`:
|
|
73
|
+
|
|
74
|
+
`load 'deploy/assets'`
|
|
75
|
+
|
|
76
|
+
Now when you run `cap deploy` the `deploy:assets:precompile` task will be run which takes care of running `bundle exec rake assets:precompile` for you.
|
|
77
|
+
|
|
78
|
+
By default assets that are precompiled will be located in the `public/assets/` folder of your application.
|
|
79
|
+
|
|
80
|
+
## Why use this gem?
|
|
81
|
+
|
|
44
82
|
|
|
45
83
|
* Easy to setup: Start using Foundation in mere seconds, like a boss
|
|
46
84
|
* Paths: All images will work regardless of if you deploy to a sub-uri or not
|
|
47
85
|
* Clean: Don't clutter up your assets directory
|
|
48
86
|
|
|
49
|
-
Dependencies
|
|
50
|
-
|
|
87
|
+
# Dependencies
|
|
88
|
+
|
|
51
89
|
* rails (~> 3.1)
|
|
52
90
|
* jquery-rails (~> 1.0)
|
|
53
91
|
|
|
54
|
-
MIT Open Source License
|
|
55
|
-
|
|
92
|
+
# MIT Open Source License
|
|
93
|
+
|
|
56
94
|
|
|
57
95
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
58
96
|
|
|
@@ -5,9 +5,18 @@ module Foundation
|
|
|
5
5
|
class LayoutGenerator < Rails::Generators::Base
|
|
6
6
|
source_root File.join(File.dirname(__FILE__), 'templates')
|
|
7
7
|
argument :layout_name, :type => :string, :default => 'application', :banner => 'layout_name'
|
|
8
|
+
|
|
9
|
+
class_option :haml, :desc => 'Generate HAML layout instead of ERB.', :type => :boolean
|
|
10
|
+
class_option :slim, :desc => 'Generate slim layout instead of ERB.', :type => :boolean
|
|
8
11
|
|
|
9
12
|
def create_layout
|
|
10
|
-
|
|
13
|
+
if options.haml?
|
|
14
|
+
template 'application.html.haml', "app/views/layouts/#{file_name}.html.haml"
|
|
15
|
+
elsif options.slim?
|
|
16
|
+
template 'application.html.slim', "app/views/layouts/#{file_name}.html.slim"
|
|
17
|
+
else
|
|
18
|
+
template 'application.html.erb', "app/views/layouts/#{file_name}.html.erb"
|
|
19
|
+
end
|
|
11
20
|
end
|
|
12
21
|
|
|
13
22
|
private
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->
|
|
12
12
|
|
|
13
13
|
<!-- Set the viewport width to device width for mobile -->
|
|
14
|
-
<meta name="viewport" content="width=device-width" />
|
|
14
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
15
15
|
|
|
16
16
|
<title><%%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
|
|
17
17
|
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
!!! 5
|
|
2
|
+
/ paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
|
|
3
|
+
/[if lt IE 7 ] <html class=\"ie6\" lang=\"en\">
|
|
4
|
+
/[if IE 7 ] <html class=\"ie7\" lang=\"en\">
|
|
5
|
+
/[if IE 8 ] <html class=\"ie8\" lang=\"en\">
|
|
6
|
+
/[if IE 9 ] <html class=\"ie9\" lang=\"en\">
|
|
7
|
+
/[if (gt IE 9)|!(IE)] <!--> <html lang=\"en\">
|
|
8
|
+
|
|
9
|
+
%head
|
|
10
|
+
%meta{ :charset => "utf-8" }
|
|
11
|
+
|
|
12
|
+
-# Uncomment to make IE8 render like IE7
|
|
13
|
+
-# meta http-equiv="X-UA-Compatible" content="IE=7"
|
|
14
|
+
|
|
15
|
+
-# Set the viewport width to device width for mobile
|
|
16
|
+
%meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }
|
|
17
|
+
|
|
18
|
+
%title= content_for?(:title) ? yield(:title) : "Untitled"
|
|
19
|
+
|
|
20
|
+
-# Included CSS Files
|
|
21
|
+
= stylesheet_link_tag "application"
|
|
22
|
+
|
|
23
|
+
-# Included JS Files
|
|
24
|
+
= javascript_include_tag "application"
|
|
25
|
+
|
|
26
|
+
= csrf_meta_tag
|
|
27
|
+
|
|
28
|
+
%body
|
|
29
|
+
.container
|
|
30
|
+
= yield
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
doctype html
|
|
2
|
+
== "<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->"
|
|
3
|
+
== "<!--[if lt IE 7 ]> <html class=\"ie6\" lang=\"en\"> <![endif]-->"
|
|
4
|
+
== "<!--[if IE 7 ]> <html class=\"ie7\" lang=\"en\"> <![endif]-->"
|
|
5
|
+
== "<!--[if IE 8 ]> <html class=\"ie8\" lang=\"en\"> <![endif]-->"
|
|
6
|
+
== "<!--[if IE 9 ]> <html class=\"ie9\" lang=\"en\"> <![endif]-->"
|
|
7
|
+
== "<!--[if (gt IE 9)|!(IE)]><!--> <html lang=\"en\"> <!--<![endif]-->"
|
|
8
|
+
|
|
9
|
+
head
|
|
10
|
+
meta charset="utf-8"
|
|
11
|
+
|
|
12
|
+
/ Uncomment to make IE8 render like IE7
|
|
13
|
+
/ meta http-equiv="X-UA-Compatible" content="IE=7"
|
|
14
|
+
|
|
15
|
+
/ Set the viewport width to device width for mobile
|
|
16
|
+
meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
17
|
+
|
|
18
|
+
title= content_for?(:title) ? yield(:title) : "Untitled"
|
|
19
|
+
|
|
20
|
+
/ Included CSS Files
|
|
21
|
+
= stylesheet_link_tag "application"
|
|
22
|
+
|
|
23
|
+
/ Included JS Files
|
|
24
|
+
= javascript_include_tag "application"
|
|
25
|
+
|
|
26
|
+
= csrf_meta_tag
|
|
27
|
+
|
|
28
|
+
body
|
|
29
|
+
.container
|
|
30
|
+
== yield
|
data/lib/foundation/version.rb
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,3 +1,130 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* jQuery Reveal 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
|
+
|
|
10
|
+
(function ($) {
|
|
11
|
+
$('a[data-reveal-id]').live('click', function (event) {
|
|
12
|
+
event.preventDefault();
|
|
13
|
+
var modalLocation = $(this).attr('data-reveal-id');
|
|
14
|
+
$('#' + modalLocation).reveal($(this).data());
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
$.fn.reveal = function (options) {
|
|
18
|
+
var defaults = {
|
|
19
|
+
animation: 'fadeAndPop', // fade, fadeAndPop, none
|
|
20
|
+
animationSpeed: 300, // how fast animtions are
|
|
21
|
+
closeOnBackgroundClick: true, // if you click background will modal close?
|
|
22
|
+
dismissModalClass: 'close-reveal-modal' // the class of a button or element that will close an open modal
|
|
23
|
+
};
|
|
24
|
+
var options = $.extend({}, defaults, options);
|
|
25
|
+
|
|
26
|
+
return this.each(function () {
|
|
27
|
+
var modal = $(this),
|
|
28
|
+
topMeasure = parseInt(modal.css('top')),
|
|
29
|
+
topOffset = modal.height() + topMeasure,
|
|
30
|
+
locked = false,
|
|
31
|
+
modalBg = $('.reveal-modal-bg');
|
|
32
|
+
|
|
33
|
+
if (modalBg.length == 0) {
|
|
34
|
+
modalBg = $('<div class="reveal-modal-bg" />').insertAfter(modal);
|
|
35
|
+
modalBg.fadeTo('fast', 0.8);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function openAnimation() {
|
|
39
|
+
modalBg.unbind('click.modalEvent');
|
|
40
|
+
$('.' + options.dismissModalClass).unbind('click.modalEvent');
|
|
41
|
+
if (!locked) {
|
|
42
|
+
lockModal();
|
|
43
|
+
if (options.animation == "fadeAndPop") {
|
|
44
|
+
modal.css({'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible'});
|
|
45
|
+
modalBg.fadeIn(options.animationSpeed / 2);
|
|
46
|
+
modal.delay(options.animationSpeed / 2).animate({
|
|
47
|
+
"top": $(document).scrollTop() + topMeasure + 'px',
|
|
48
|
+
"opacity": 1
|
|
49
|
+
}, options.animationSpeed, unlockModal);
|
|
50
|
+
}
|
|
51
|
+
if (options.animation == "fade") {
|
|
52
|
+
modal.css({'opacity': 0, 'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure});
|
|
53
|
+
modalBg.fadeIn(options.animationSpeed / 2);
|
|
54
|
+
modal.delay(options.animationSpeed / 2).animate({
|
|
55
|
+
"opacity": 1
|
|
56
|
+
}, options.animationSpeed, unlockModal);
|
|
57
|
+
}
|
|
58
|
+
if (options.animation == "none") {
|
|
59
|
+
modal.css({'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure});
|
|
60
|
+
modalBg.css({"display": "block"});
|
|
61
|
+
unlockModal();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
modal.unbind('reveal:open', openAnimation);
|
|
65
|
+
}
|
|
66
|
+
modal.bind('reveal:open', openAnimation);
|
|
67
|
+
|
|
68
|
+
function closeAnimation() {
|
|
69
|
+
if (!locked) {
|
|
70
|
+
lockModal();
|
|
71
|
+
if (options.animation == "fadeAndPop") {
|
|
72
|
+
modalBg.delay(options.animationSpeed).fadeOut(options.animationSpeed);
|
|
73
|
+
modal.animate({
|
|
74
|
+
"top": $(document).scrollTop() - topOffset + 'px',
|
|
75
|
+
"opacity": 0
|
|
76
|
+
}, options.animationSpeed / 2, function () {
|
|
77
|
+
modal.css({'top': topMeasure, 'opacity': 1, 'visibility': 'hidden'});
|
|
78
|
+
unlockModal();
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
if (options.animation == "fade") {
|
|
82
|
+
modalBg.delay(options.animationSpeed).fadeOut(options.animationSpeed);
|
|
83
|
+
modal.animate({
|
|
84
|
+
"opacity" : 0
|
|
85
|
+
}, options.animationSpeed, function () {
|
|
86
|
+
modal.css({'opacity': 1, 'visibility': 'hidden', 'top': topMeasure});
|
|
87
|
+
unlockModal();
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
if (options.animation == "none") {
|
|
91
|
+
modal.css({'visibility': 'hidden', 'top': topMeasure});
|
|
92
|
+
modalBg.css({'display': 'none'});
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
modal.unbind('reveal:close', closeAnimation);
|
|
96
|
+
}
|
|
97
|
+
modal.bind('reveal:close', closeAnimation);
|
|
98
|
+
modal.trigger('reveal:open');
|
|
99
|
+
|
|
100
|
+
var closeButton = $('.' + options.dismissModalClass).bind('click.modalEvent', function () {
|
|
101
|
+
modal.trigger('reveal:close');
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
if (options.closeOnBackgroundClick) {
|
|
105
|
+
modalBg.css({"cursor": "pointer"});
|
|
106
|
+
modalBg.bind('click.modalEvent', function () {
|
|
107
|
+
modal.trigger('reveal:close');
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
$('body').keyup(function (event) {
|
|
112
|
+
if (event.which === 27) { // 27 is the keycode for the Escape key
|
|
113
|
+
modal.trigger('reveal:close');
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
function unlockModal() {
|
|
118
|
+
locked = false;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function lockModal() {
|
|
122
|
+
locked = true;
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
})(jQuery);
|
|
127
|
+
|
|
1
128
|
/*
|
|
2
129
|
* jQuery Orbit Plugin 1.3.0
|
|
3
130
|
* www.ZURB.com/playground
|
|
@@ -593,4 +720,230 @@
|
|
|
593
720
|
});
|
|
594
721
|
}
|
|
595
722
|
|
|
596
|
-
}(jQuery));
|
|
723
|
+
}(jQuery));
|
|
724
|
+
|
|
725
|
+
/**
|
|
726
|
+
* jQuery.placeholder - Placeholder plugin for input fields
|
|
727
|
+
* Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
|
|
728
|
+
* Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
|
|
729
|
+
* Date: 2008/10/14
|
|
730
|
+
*
|
|
731
|
+
* @author Blair Mitchelmore
|
|
732
|
+
* @version 1.0.1
|
|
733
|
+
*
|
|
734
|
+
**/
|
|
735
|
+
new function($) {
|
|
736
|
+
$.fn.placeholder = function(settings) {
|
|
737
|
+
settings = settings || {};
|
|
738
|
+
var key = settings.dataKey || "placeholderValue";
|
|
739
|
+
var attr = settings.attr || "placeholder";
|
|
740
|
+
var className = settings.className || "placeholder";
|
|
741
|
+
var values = settings.values || [];
|
|
742
|
+
var block = settings.blockSubmit || false;
|
|
743
|
+
var blank = settings.blankSubmit || false;
|
|
744
|
+
var submit = settings.onSubmit || false;
|
|
745
|
+
var value = settings.value || "";
|
|
746
|
+
var position = settings.cursor_position || 0;
|
|
747
|
+
|
|
748
|
+
|
|
749
|
+
return this.filter(":input").each(function(index) {
|
|
750
|
+
$.data(this, key, values[index] || $(this).attr(attr));
|
|
751
|
+
}).each(function() {
|
|
752
|
+
if ($.trim($(this).val()) === "")
|
|
753
|
+
$(this).addClass(className).val($.data(this, key));
|
|
754
|
+
}).focus(function() {
|
|
755
|
+
if ($.trim($(this).val()) === $.data(this, key))
|
|
756
|
+
$(this).removeClass(className).val(value)
|
|
757
|
+
if ($.fn.setCursorPosition) {
|
|
758
|
+
$(this).setCursorPosition(position);
|
|
759
|
+
}
|
|
760
|
+
}).blur(function() {
|
|
761
|
+
if ($.trim($(this).val()) === value)
|
|
762
|
+
$(this).addClass(className).val($.data(this, key));
|
|
763
|
+
}).each(function(index, elem) {
|
|
764
|
+
if (block)
|
|
765
|
+
new function(e) {
|
|
766
|
+
$(e.form).submit(function() {
|
|
767
|
+
return $.trim($(e).val()) != $.data(e, key)
|
|
768
|
+
});
|
|
769
|
+
}(elem);
|
|
770
|
+
else if (blank)
|
|
771
|
+
new function(e) {
|
|
772
|
+
$(e.form).submit(function() {
|
|
773
|
+
if ($.trim($(e).val()) == $.data(e, key))
|
|
774
|
+
$(e).removeClass(className).val("");
|
|
775
|
+
return true;
|
|
776
|
+
});
|
|
777
|
+
}(elem);
|
|
778
|
+
else if (submit)
|
|
779
|
+
new function(e) { $(e.form).submit(submit); }(elem);
|
|
780
|
+
});
|
|
781
|
+
};
|
|
782
|
+
}(jQuery);
|
|
783
|
+
|
|
784
|
+
/*
|
|
785
|
+
* jQuery Custom Forms Plugin 1.0
|
|
786
|
+
* www.ZURB.com
|
|
787
|
+
* Copyright 2010, ZURB
|
|
788
|
+
* Free to use under the MIT license.
|
|
789
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
790
|
+
*/
|
|
791
|
+
|
|
792
|
+
jQuery(document).ready(function ($) {
|
|
793
|
+
|
|
794
|
+
function appendCustomMarkup(type) {
|
|
795
|
+
$('form.custom input:' + type).each(function () {
|
|
796
|
+
var $span = $('<span class="custom ' + type + '"></span>');
|
|
797
|
+
if ($(this).next('span.custom.' + type).length === 0) {
|
|
798
|
+
if (this.checked) {
|
|
799
|
+
$span.addClass('checked');
|
|
800
|
+
}
|
|
801
|
+
$(this)
|
|
802
|
+
.hide()
|
|
803
|
+
.after($span);
|
|
804
|
+
}
|
|
805
|
+
});
|
|
806
|
+
}
|
|
807
|
+
appendCustomMarkup('checkbox');
|
|
808
|
+
appendCustomMarkup('radio');
|
|
809
|
+
|
|
810
|
+
$('form.custom select').each(function () {
|
|
811
|
+
var $this = $(this),
|
|
812
|
+
$customSelect = $this.next('div.custom.dropdown'),
|
|
813
|
+
$options = $this.find('option'),
|
|
814
|
+
maxWidth = 0,
|
|
815
|
+
$li;
|
|
816
|
+
|
|
817
|
+
if ($customSelect.length === 0) {
|
|
818
|
+
$customSelect = $('<div class="custom dropdown"><a href="#" class="selector"></a><ul></ul></div>"');
|
|
819
|
+
$options.each(function () {
|
|
820
|
+
$li = $('<li>' + $(this).html() + '</li>');
|
|
821
|
+
$customSelect.find('ul').append($li);
|
|
822
|
+
});
|
|
823
|
+
$customSelect.prepend('<a href="#" class="current">' + $options.first().html() + '</a>');
|
|
824
|
+
|
|
825
|
+
$this.after($customSelect);
|
|
826
|
+
$this.hide();
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
$options.each(function (index) {
|
|
830
|
+
if (this.selected) {
|
|
831
|
+
$customSelect.find('li').eq(index).addClass('selected');
|
|
832
|
+
$customSelect.find('.current').html($(this).html());
|
|
833
|
+
}
|
|
834
|
+
});
|
|
835
|
+
|
|
836
|
+
$customSelect.find('li').each(function () {
|
|
837
|
+
$customSelect.addClass('open');
|
|
838
|
+
if ($(this).outerWidth() > maxWidth) {
|
|
839
|
+
maxWidth = $(this).outerWidth();
|
|
840
|
+
}
|
|
841
|
+
$customSelect.removeClass('open');
|
|
842
|
+
});
|
|
843
|
+
$customSelect.css('width', maxWidth + 18 + 'px');
|
|
844
|
+
$customSelect.find('ul').css('width', maxWidth + 16 + 'px');
|
|
845
|
+
});
|
|
846
|
+
});
|
|
847
|
+
|
|
848
|
+
(function ($) {
|
|
849
|
+
|
|
850
|
+
function toggleCheckbox($element) {
|
|
851
|
+
var $input = $element.prev(),
|
|
852
|
+
input = $input[0];
|
|
853
|
+
|
|
854
|
+
input.checked = ((input.checked) ? false : true);
|
|
855
|
+
$element.toggleClass('checked');
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
function toggleRadio($element) {
|
|
859
|
+
var $input = $element.prev(),
|
|
860
|
+
input = $input[0];
|
|
861
|
+
|
|
862
|
+
$('input:radio[name=' + $input.attr('name') + ']').each(function () {
|
|
863
|
+
$(this).next().removeClass('checked');
|
|
864
|
+
});
|
|
865
|
+
input.checked = ((input.checked) ? false : true);
|
|
866
|
+
$element.toggleClass('checked');
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
$('form.custom span.custom.checkbox').live('click', function (event) {
|
|
870
|
+
event.preventDefault();
|
|
871
|
+
event.stopPropagation();
|
|
872
|
+
|
|
873
|
+
toggleCheckbox($(this));
|
|
874
|
+
});
|
|
875
|
+
|
|
876
|
+
$('form.custom span.custom.radio').live('click', function (event) {
|
|
877
|
+
event.preventDefault();
|
|
878
|
+
event.stopPropagation();
|
|
879
|
+
|
|
880
|
+
toggleRadio($(this));
|
|
881
|
+
});
|
|
882
|
+
|
|
883
|
+
$('form.custom label').live('click', function (event) {
|
|
884
|
+
var $associatedElement = $('#' + $(this).attr('for')),
|
|
885
|
+
$customCheckbox,
|
|
886
|
+
$customRadio;
|
|
887
|
+
if ($associatedElement.length !== 0) {
|
|
888
|
+
if ($associatedElement.attr('type') === 'checkbox') {
|
|
889
|
+
event.preventDefault();
|
|
890
|
+
$customCheckbox = $(this).find('span.custom.checkbox');
|
|
891
|
+
toggleCheckbox($customCheckbox);
|
|
892
|
+
} else if ($associatedElement.attr('type') === 'radio') {
|
|
893
|
+
event.preventDefault();
|
|
894
|
+
$customRadio = $(this).find('span.custom.radio');
|
|
895
|
+
toggleRadio($customRadio);
|
|
896
|
+
}
|
|
897
|
+
}
|
|
898
|
+
});
|
|
899
|
+
|
|
900
|
+
$('form.custom div.custom.dropdown a.current, form.custom div.custom.dropdown a.selector').live('click', function (event) {
|
|
901
|
+
var $this = $(this),
|
|
902
|
+
$dropdown = $this.closest('div.custom.dropdown');
|
|
903
|
+
|
|
904
|
+
event.preventDefault();
|
|
905
|
+
$dropdown.toggleClass('open');
|
|
906
|
+
|
|
907
|
+
if ($dropdown.hasClass('open')) {
|
|
908
|
+
$(document).bind('click.customdropdown', function (event) {
|
|
909
|
+
$dropdown.removeClass('open');
|
|
910
|
+
$(document).unbind('.customdropdown');
|
|
911
|
+
});
|
|
912
|
+
} else {
|
|
913
|
+
$(document).unbind('.customdropdown');
|
|
914
|
+
}
|
|
915
|
+
});
|
|
916
|
+
|
|
917
|
+
$('form.custom div.custom.dropdown li').live('click', function (event) {
|
|
918
|
+
var $this = $(this),
|
|
919
|
+
$customDropdown = $this.closest('div.custom.dropdown'),
|
|
920
|
+
$select = $customDropdown.prev(),
|
|
921
|
+
selectedIndex = 0;
|
|
922
|
+
|
|
923
|
+
event.preventDefault();
|
|
924
|
+
event.stopPropagation();
|
|
925
|
+
|
|
926
|
+
$this
|
|
927
|
+
.closest('ul')
|
|
928
|
+
.find('li')
|
|
929
|
+
.removeClass('selected');
|
|
930
|
+
$this.addClass('selected');
|
|
931
|
+
|
|
932
|
+
$customDropdown
|
|
933
|
+
.removeClass('open')
|
|
934
|
+
.find('a.current')
|
|
935
|
+
.html($this.html());
|
|
936
|
+
|
|
937
|
+
$this.closest('ul').find('li').each(function (index) {
|
|
938
|
+
if ($this[0] == this) {
|
|
939
|
+
selectedIndex = index;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
});
|
|
943
|
+
$select[0].selectedIndex = selectedIndex;
|
|
944
|
+
});
|
|
945
|
+
})(jQuery);
|
|
946
|
+
|
|
947
|
+
/*! http://mths.be/placeholder v1.8.5 by @mathias */
|
|
948
|
+
(function(g,a,$){var f='placeholder' in a.createElement('input'),b='placeholder' in a.createElement('textarea');if(f&&b){$.fn.placeholder=function(){return this};$.fn.placeholder.input=$.fn.placeholder.textarea=true}else{$.fn.placeholder=function(){return this.filter((f?'textarea':':input')+'[placeholder]').bind('focus.placeholder',c).bind('blur.placeholder',e).trigger('blur.placeholder').end()};$.fn.placeholder.input=f;$.fn.placeholder.textarea=b;$(function(){$('form').bind('submit.placeholder',function(){var h=$('.placeholder',this).each(c);setTimeout(function(){h.each(e)},10)})});$(g).bind('unload.placeholder',function(){$('.placeholder').val('')})}function d(i){var h={},j=/^jQuery\d+$/;$.each(i.attributes,function(l,k){if(k.specified&&!j.test(k.name)){h[k.name]=k.value}});return h}function c(){var h=$(this);if(h.val()===h.attr('placeholder')&&h.hasClass('placeholder')){if(h.data('placeholder-password')){h.hide().next().show().focus().attr('id',h.removeAttr('id').data('placeholder-id'))}else{h.val('').removeClass('placeholder')}}}function e(){var l,k=$(this),h=k,j=this.id;if(k.val()===''){if(k.is(':password')){if(!k.data('placeholder-textinput')){try{l=k.clone().attr({type:'text'})}catch(i){l=$('<input>').attr($.extend(d(this),{type:'text'}))}l.removeAttr('name').data('placeholder-password',true).data('placeholder-id',j).bind('focus.placeholder',c);k.data('placeholder-textinput',l).data('placeholder-id',j).before(l)}k=k.removeAttr('id').hide().prev().attr('id',j).show()}k.addClass('placeholder').val(k.attr('placeholder'))}else{k.removeClass('placeholder')}}}(this,document,jQuery));
|
|
949
|
+
|