Permalink
Browse files

initial commit

  • Loading branch information...
kristianmandrup committed Mar 21, 2012
1 parent cafba54 commit 2c2a6c7d04e260871e9046d518581d889453e0f4
Showing with 8,821 additions and 36 deletions.
  1. +5 −5 .gitignore
  2. +6 −9 Gemfile
  3. +37 −0 Gemfile.lock
  4. +183 −0 README.md
  5. +0 −19 README.rdoc
  6. +2 −2 Rakefile
  7. +1 −1 VERSION
  8. BIN examples/formwizard/css/base/images/ui-bg_flat_0_aaaaaa_40x100.png
  9. BIN examples/formwizard/css/base/images/ui-bg_flat_75_ffffff_40x100.png
  10. BIN examples/formwizard/css/base/images/ui-bg_glass_55_fbf9ee_1x400.png
  11. BIN examples/formwizard/css/base/images/ui-bg_glass_65_ffffff_1x400.png
  12. BIN examples/formwizard/css/base/images/ui-bg_glass_75_dadada_1x400.png
  13. BIN examples/formwizard/css/base/images/ui-bg_glass_75_e6e6e6_1x400.png
  14. BIN examples/formwizard/css/base/images/ui-bg_glass_95_fef1ec_1x400.png
  15. BIN examples/formwizard/css/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png
  16. BIN examples/formwizard/css/base/images/ui-icons_222222_256x240.png
  17. BIN examples/formwizard/css/base/images/ui-icons_2e83ff_256x240.png
  18. BIN examples/formwizard/css/base/images/ui-icons_454545_256x240.png
  19. BIN examples/formwizard/css/base/images/ui-icons_888888_256x240.png
  20. BIN examples/formwizard/css/base/images/ui-icons_cd0a0a_256x240.png
  21. +11 −0 examples/formwizard/css/base/jquery.ui.all.css
  22. +1 −0 examples/formwizard/css/base/jquery.ui.base.css
  23. +41 −0 examples/formwizard/css/base/jquery.ui.core.css
  24. +252 −0 examples/formwizard/css/base/jquery.ui.theme.css
  25. BIN examples/formwizard/css/ui-lightness/images/ui-anim_basic_16x16.gif
  26. BIN examples/formwizard/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png
  27. BIN examples/formwizard/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png
  28. BIN examples/formwizard/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png
  29. BIN examples/formwizard/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png
  30. BIN examples/formwizard/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png
  31. BIN examples/formwizard/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png
  32. BIN examples/formwizard/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png
  33. BIN examples/formwizard/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png
  34. BIN examples/formwizard/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png
  35. BIN examples/formwizard/css/ui-lightness/images/ui-icons_222222_256x240.png
  36. BIN examples/formwizard/css/ui-lightness/images/ui-icons_228ef1_256x240.png
  37. BIN examples/formwizard/css/ui-lightness/images/ui-icons_ef8c08_256x240.png
  38. BIN examples/formwizard/css/ui-lightness/images/ui-icons_ffd27a_256x240.png
  39. BIN examples/formwizard/css/ui-lightness/images/ui-icons_ffffff_256x240.png
  40. +489 −0 examples/formwizard/css/ui-lightness/jquery-ui-1.8.2.custom.css
  41. +154 −0 examples/formwizard/example1.html
  42. +4 −0 lib/jquery_form_utils.rb
  43. BIN vendor/assets/images/custom_input/checkbox.gif
  44. BIN vendor/assets/images/custom_input/radiobutton.gif
  45. +257 −0 vendor/assets/javascripts/autotab/jquery.autotab.js
  46. +68 −0 vendor/assets/javascripts/custom_input/custom_input.jquery.js
  47. +120 −0 vendor/assets/javascripts/field_highlight/field_highlight.jquery.js
  48. +1,138 −0 vendor/assets/javascripts/formwizard/bbq.js
  49. +675 −0 vendor/assets/javascripts/formwizard/jquery.form.js
  50. +460 −0 vendor/assets/javascripts/formwizard/jquery.form.wizard.js
  51. +1,146 −0 vendor/assets/javascripts/formwizard/jquery.validate.js
  52. +140 −0 vendor/assets/javascripts/infieldlabel/jquery.infieldlabel.js
  53. +12 −0 vendor/assets/javascripts/infieldlabel/jquery.infieldlabel.min.js
  54. +17 −0 vendor/assets/javascripts/justify_labels/justify_labels.jquery.js
  55. +62 −0 vendor/assets/javascripts/message/jquery.message.js
  56. +14 −0 vendor/assets/javascripts/message/jquery.message.min.js
  57. +14 −0 vendor/assets/javascripts/message/jquery.message.pack.js
  58. +241 −0 vendor/assets/javascripts/tipsy/jquery.tipsy.js
  59. +88 −0 vendor/assets/javascripts/validate_password/jquery.validate.password.js
  60. +10 −0 vendor/assets/javascripts/validate_password/validate.da.js
  61. +129 −0 vendor/assets/javascripts/validation/jquery.validationEngine-da.js
  62. +173 −0 vendor/assets/javascripts/validation/jquery.validationEngine-en.js
  63. +131 −0 vendor/assets/javascripts/validation/jquery.validationEngine-es.js
  64. +123 −0 vendor/assets/javascripts/validation/jquery.validationEngine-fr.js
  65. +105 −0 vendor/assets/javascripts/validation/jquery.validationEngine-it.js
  66. +143 −0 vendor/assets/javascripts/validation/jquery.validationEngine-ja.js
  67. +130 −0 vendor/assets/javascripts/validation/jquery.validationEngine-ru.js
  68. +1,722 −0 vendor/assets/javascripts/validation/jquery.validationEngine.js
  69. +22 −0 vendor/assets/javascripts/validation/other-validations.js
  70. +67 −0 vendor/assets/stylesheets/custom_input/custom_input.css
  71. +46 −0 vendor/assets/stylesheets/infieldlabel/inFieldLabel.jquery.css
  72. +12 −0 vendor/assets/stylesheets/justify_labels/justify_labels.jquery.css
  73. +44 −0 vendor/assets/stylesheets/message/jquery.message.css
  74. +25 −0 vendor/assets/stylesheets/tipsy/tipsy.css
  75. +46 −0 vendor/assets/stylesheets/validate_password/jquery.validate.password.css
  76. +97 −0 vendor/assets/stylesheets/validation/template.css
  77. +158 −0 vendor/assets/stylesheets/validation/validationEngine.jquery.css
View
@@ -28,22 +28,22 @@ pkg
#
# For MacOS:
#
-#.DS_Store
+.DS_Store
# For TextMate
-#*.tmproj
-#tmtags
+*.tmproj
+tmtags
# For emacs:
#*~
#\#*
#.\#*
# For vim:
-#*.swp
+*.swp
# For redcar:
-#.redcar
+.redcar
# For rubinius:
#*.rbc
View
15 Gemfile
@@ -1,14 +1,11 @@
-source "http://rubygems.org"
-# Add dependencies required to use your gem here.
-# Example:
-# gem "activesupport", ">= 2.3.5"
+source :rubygems
# Add dependencies to develop your gem here.
# Include everything needed to run rake, tests, features, etc.
group :development do
- gem "rspec", "~> 2.8.0"
- gem "rdoc", "~> 3.12"
- gem "bundler", "~> 1.0.0"
- gem "jeweler", "~> 1.8.3"
- gem "rcov", ">= 0"
+ gem "rspec", ">= 2.8.0"
+ gem "rdoc", "~> 3.12"
+ gem "bundler", ">= 1.0.0"
+ gem "jeweler", ">= 1.8.3"
+ gem "simplecov",">= 0.5"
end
View
@@ -0,0 +1,37 @@
+GEM
+ remote: http://rubygems.org/
+ specs:
+ diff-lcs (1.1.3)
+ git (1.2.5)
+ jeweler (1.8.3)
+ bundler (~> 1.0)
+ git (>= 1.2.5)
+ rake
+ rdoc
+ json (1.6.5)
+ multi_json (1.1.0)
+ rake (0.9.2.2)
+ rdoc (3.12)
+ json (~> 1.4)
+ rspec (2.9.0)
+ rspec-core (~> 2.9.0)
+ rspec-expectations (~> 2.9.0)
+ rspec-mocks (~> 2.9.0)
+ rspec-core (2.9.0)
+ rspec-expectations (2.9.0)
+ diff-lcs (~> 1.1.3)
+ rspec-mocks (2.9.0)
+ simplecov (0.6.1)
+ multi_json (~> 1.0)
+ simplecov-html (~> 0.5.3)
+ simplecov-html (0.5.3)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ bundler (>= 1.0.0)
+ jeweler (>= 1.8.3)
+ rdoc (~> 3.12)
+ rspec (>= 2.8.0)
+ simplecov (>= 0.5)
View
183 README.md
@@ -0,0 +1,183 @@
+h1. jQuery Form Utils
+
+Packages various useful Javascript form and other UI utils into Rails 3 assets for the asset pipeline.
+This gem makes it much easier to use these javascript enhancements in a Rails 3 app :)
+
+h3. In-field labels
+
+$(document).ready(function(){
+ $("label").inFieldLabels();
+});
+
+$("label").inFieldLabels({ optionName:value });</pre>
+
+fadeOpacity: Value between 0.1 and 1.0. When a field is focussed, its label is animated to this opacity. Defaults to 0.5
+
+fadeDuration: Time in milliseconds When an animation occurs, it uses this setting to determine duration. Defaults to 300.
+
+h3. Highlight active form fields
+
+See http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html
+
+Highlights the part of the form currently in focus.
+
+h3. Tipsy
+
+See http://onehackoranother.com/projects/jquery/tipsy/
+
+Simple, flexible tooltips plugin
+
+h3. Autotab
+
+http://www.mathachew.com/sandbox/jquery-autotab/
+
+Auto-tab between form fields when field is complete
+
+$(document).ready(function() {
+ $('#area_code, #number1, #number2').autotab_magic().autotab_filter('numeric');
+});
+
+.autotab_magic(): Automatically assign tabbing rules to all selected elements.
+
+Example
+-------
+$(document).ready(function() {
+ $(':input').autotab_magic();
+ // OR
+ $('#area_code, #number1, #number2').autotab_magic();
+});
+
+.autotab_filter(string): Apply the specified filter to an element.
+
+Example
+-------
+$(document).ready(function() {
+ $('#area_code, #number1, #number2').autotab_filter('numeric');
+ $('#key1, #key2, #key3, #key4, #key5').autotab_filter('alpha');
+});
+
+Options
+-------
+all (default): Any character
+text: Any character except numbers 0 through 9
+alpha: A through Z
+numeric: 0 through 9
+number: Identical to numeric
+alphanumeric: A through Z and 0 through 9
+custom: A custom regular expression to be used along with the pattern setting.
+
+.autotab_filter(settings): Apply the key/value pairs to configure filter options to an element.
+
+Example
+$(document).ready(function() {
+ $('#area_code, #number1, #number2').autotab_filter({
+ format: 'alphanumeric',
+ uppercase: true
+ });
+});
+
+Settings
+--------
+format: The filtering method of the text field. Available filtering options are listed above.
+uppercase: Converts any text to uppercase.
+lowercase: Converts any text to lowercase.
+nospace: Removes any spaces.
+pattern: A regular expression pattern to use for custom formats.
+
+.autotab(settings): Apply the key/value pairs to configure auto-tab and filter options to an element. Filtering settings are optional.
+
+Example
+-------
+$(document).ready(function() {
+ // This example achieves the same result as Step 3 under Basic Usage.
+ $('#area_code').autotab({ target: 'number1', format: 'numeric' });
+ $('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code' });
+ $('#number2').autotab({ previous: 'number1', format: 'numeric' });
+});
+
+Settings
+--------
+All listed settings under .autotab_filter()
+maxlength: Determines the maximum number of characters allowed in a text field. Passing maxlength will override the hardcoded maxlength attribute in the HTML.
+
+target: The text field to auto-tab to when the maxlength has been reached on the current text field.
+
+previous: The text field to auto-tab to when the Backspace key has been pressed in an empty text field. You can also press and hold Backspace to continue auto-tabbing in reverse.
+
+h3. Custom inputs (radio and checkboxes)
+
+
+We start with basic HTML for each input that follows web standards conventions:
+assigned a unique id and value to each input
+paired the input with a label element
+included a "for" attribute on each label that references the preceding input's id
+Each radio button input also needs a common name attribute to group it with a set.
+
+<form>
+ <fieldset>
+ <legend>Which genres do you like?</legend>
+
+ <input type="checkbox" name="genre" id="check-1" value="action" />
+ <label for="check-1">Action / Adventure</label>
+
+ . . .
+ </fieldset>
+ <fieldset>
+ <legend>Caddyshack is the greatest movie of all time, right?</legend>
+
+ <input type="radio" name="opinions" id="radio-1" value="1" />
+ <label for="radio-1">Totally</label>
+
+ . . .
+ </fieldset>
+</form>
+
+Pairing the inputs and labels correctly is essential to how this plugin works. As stated in the HTML spec, "When a LABEL element receives focus, it passes the focus on to its associated control." Browsers have standardized this behavior so that when you click a label, the click is passed on to the input — in other words, the label and input act as a single element when marked up this way. Because we don't have to interact with the input directly, we can hide it from view with CSS and apply styles to the label to make it look like a customized checkbox or radio button.
+
+When the page loads, the plugin script finds each input/label pair and wraps it in a div. Each wrapper div is assigned a class to it based on the type of input it contains:
+
+<div class="custom-checkbox">
+ <input id="check-3" type="checkbox" value="epic" name="genre"/>
+ <label class="" for="check-3">Epic / Historical</label>
+</div>
+
+Use:
+
+$('input').customInput();
+
+Customize images for radio and checkbox
+
+.custom-checkbox label { background: url(/assets/custom_input/checkbox.gif) no-repeat; }
+.custom-radio label { background: url(/assets/custom_input/radiobutton.gif) no-repeat; }
+
+h3. Message
+
+Easily display feedback messages as an unobstrusive overlay. The message fades away automatically after some time, avoiding the need to click an “ok” button or something similar. The user can speed up hiding of the message by moving the mouse or clicking anywhere.
+
+The interaction is based on Aza Raskin’s Humanized Message.
+
+See http://bassistance.de/jquery-plugins/jquery-plugin-message/
+
+h3. Justify labels
+
+justifyLabels('form#login');
+
+h3. Validation engine
+
+See https://github.com/posabsolute/jQuery-Validation-Engine
+
+h2. Contributing to Jquery Form Utils
+
+* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
+* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
+* Fork the project.
+* Start a feature/bugfix branch.
+* Commit and push until you are happy with your contribution.
+* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
+* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
+
+h2. Copyright
+
+Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for
+further details.
+
View
@@ -1,19 +0,0 @@
-= jquery_form_utils
-
-Description goes here.
-
-== Contributing to jquery_form_utils
-
-* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
-* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
-* Fork the project.
-* Start a feature/bugfix branch.
-* Commit and push until you are happy with your contribution.
-* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
-* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.
-
-== Copyright
-
-Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for
-further details.
-
View
@@ -17,8 +17,8 @@ Jeweler::Tasks.new do |gem|
gem.name = "jquery_form_utils"
gem.homepage = "http://github.com/kristianmandrup/jquery_form_utils"
gem.license = "MIT"
- gem.summary = %Q{TODO: one-line summary of your gem}
- gem.description = %Q{TODO: longer description of your gem}
+ gem.summary = %Q{jQuery form and UI utils packaged for easy use with Rails 3}
+ gem.description = %Q{Enhance your Rails app with some nice jquery magic!}
gem.email = "kmandrup@gmail.com"
gem.authors = ["Kristian Mandrup"]
# dependencies defined in Gemfile
View
@@ -1 +1 @@
-0.0.0
+0.1.0
@@ -0,0 +1,11 @@
+/*
+ * jQuery UI CSS Framework @VERSION
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming
+ */
+@import "jquery.ui.base.css";
+@import "jquery.ui.theme.css";
@@ -0,0 +1 @@
+@import url("jquery.ui.core.css");
@@ -0,0 +1,41 @@
+/*
+ * jQuery UI CSS Framework @VERSION
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Oops, something went wrong.

0 comments on commit 2c2a6c7

Please sign in to comment.