Nice, though I worry glancing at some of the css that it might be somewhat brittle in different layouts. Then again, I haven't had to deal with IE chicanery for awhile so maybe that's just me. :P
On Aug 5, 9:30 am, Bryan Larsen <[email protected]> wrote: > Hi all, > > I've got a big demo set up for tomorrow. Hopefully after that I can > start getting caught up on hobousers again. In the meantime, here's > a tag and some css that I'll probably put into hobo-contrib. Please > try it out. Enjoy! > > <!--- This tag is very similar to Rapid's `field-list`. However, > instead of rendering a table, it renders what [Anatoli Papirovski > calls "perfect form markup"](http://fecklessmind.com/2009/01/23/how-to- > reliable-css-forms/) > > It takes the same attributes & parameters as [field-list](http:// > cookbook.hobocentral.net/api_tag_defs/field-list), with the addition > of a `legend` parameter and a `required` attribute. > > The `required` attribute is a list of methods. If the current field > is included in the list, the field div has the `required` class added > to it. > > The accompanying css allows this fieldset to be rendered in three > different ways. You may trigger these by setting a class of > `horizontal`, `vertical` or `inline-vertical`. `inline-vertical` > fieldset's may also be nested inside of a `horizontal` fieldset. > > ### Example > > Simple example: > > <form> > <feckless-fieldset class="vertical"/> > </form> > > And a more complicated one that you may actually want to steal: > > <extend tag="signup-form" for="User"> > <old-signup-form > > <field-list: replace> > <fieldset class="horizontal"> > <legend>New Account Registration</legend> > <div class="field name-field"> > <label class="name-label" for="user_name">Name</label> > <feckless-fieldset id="user_name" class="inline- > vertical" fields="salutation, first_name, last_name, suffix" > required="first_name, last_name" /> > </div> > <div class="field contact-field"> > <label class="contact-label" for="user_contact">Contact</ > label> > <feckless-fieldset id="user_contact" class="inline- > vertical" fields="email_address, phone_number" > required="email_address" /> > </div> > <div class="field passwords-field"> > <label class="passwords-label" > for="user_contact">Password</label> > <feckless-fieldset id="user_passwords" class="inline- > vertical" fields="password, password_confirmation" required="password, > password_confirmation"> > <password-label:></password-label:> > <password-confirmation-label:>Confirmation</password- > confirmation-label:> > </feckless-fieldset> > </div> > </fieldset> > </field-list:> > </old-signup-form> > </extend> > > --> > <def tag="feckless-fieldset" attrs="tag, no-edit, required"> > <% tag ||= scope.in_form ? "input" : "view"; no_edit ||= "skip" -%> > <% required ||= "" ; required = comma_split(required.gsub('-', '_')) > -%> > <fieldset class="feckless-fields" merge-attrs="&attributes - > attrs_for(:with_fields)"> > <legend param if="¶meters[:legend]" /> > <with-fields merge-attrs="&attributes & attrs_for(:with_fields)"> > <% field_name = this_field_name > input_attrs = {:no_edit => no_edit} if tag == "input" && > no_edit == "disable" > field_method = this_field.to_s.sub('?', '') > id_for_this = param_name_for_this.gsub('[', '_').gsub(']', '') > -%> > <div class="field #{field_method}-field #{'required' if > required.include?(field_method)} " unless="&tag == 'input' && no_edit > == 'skip' && !can_edit?"> > <label for="&id_for_this" param="#{field_method}-label" > unless="&field_name.blank?"> > <%= field_name %> > </label> > <do param="#{field_method}-view"> > <do param="view"><call-tag tag="&tag" param="#{field_method}- > tag" merge-attrs="&input_attrs"/></do> > </do> > <span param="#{field_method}-help" class="input-help" > if="&tag.to_sym == :input && !this_field_help.blank?"> > <%= this_field_help %> > </span> > </div> > </with-fields> > </fieldset> > </def> > > css: > > /* see:http://fecklessmind.com/2009/01/23/how-to-reliable-css-forms/ > */ > > /* put a class of 'vertical', 'horizontal' or 'inline-vertical' on > your fieldset to choose your layout. */ > > /* fieldset {clear: both;} */ > legend {padding: 0 0 1.286em; font-size: 1.167em; font-weight: 700;} > fieldset fieldset legend {padding: 0 0 1.5em; font-size: 1em;} > * html legend {margin-left: -7px;} /* ie6 */ > *+html legend {margin-left: -7px;} /* ie7 */ > > fieldset .field, fieldset .buttons {/* clear: both; */ margin: 0 0 > 1.0em;} > fieldset .field label, fieldset .field .input-help {display: block;} > fieldset ul.fields {margin: 0 0 1.0em; padding: 0;} > fieldset ul.fields li {list-style-type: none; margin: 0;} > fieldset ul.inline li, fieldset ul.inline label {display: inline;} > fieldset ul.inline li {padding: 0 .75em 0 0;} > > input.radio, input.checkbox {vertical-align: top;} > label, button, input.submit, input.image {cursor: pointer;} > * html input.radio, * html input.checkbox {vertical-align: middle;} /* > ie6 */ > *+html input.radio, *+html input.checkbox {vertical-align: middle;} /* > ie7 */ > > textarea {overflow: auto;} > input.text, input.string, input.email-address, input.password, > textarea, select {margin: 0; font: 1em/1.3 Helvetica, Arial, > "Liberation Sans", "Bitstream Vera Sans", sans-serif; vertical-align: > baseline;} > input.text, input.string, input.email-address, input.password, > textarea {border: 1px solid #444; padding: 2px;} > > /* horizontal layout */ > fieldset.horizontal .field {padding-left: 150px; } > fieldset.horizontal .field label {display: inline; float: left; width: > 140px; margin-left: -150px; clear:none;} > fieldset.horizontal .input-help { display: inline; margin-left: > 0.5em; } > > /* inline vertical layout. We make sure to undue all the > fieldset.horizontal styles so that this can be nested inside a > fieldset.horizontal */ > fieldset.inline-vertical .field {padding-left: 0; display: inline- > block; float: none; margin-left: 0; clear: none; height:1%; > *display:inline;} > fieldset.inline-vertical .field label {display: block; float: none; > width: 100%; margin-left: 0;} > fieldset.inline-vertical .input-help { display: block; margin-left: > 0; } > > fieldset .field.required {color: red; } --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Hobo Users" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/hobousers?hl=en -~----------~----~----~----~------~----~------~--~---
