Subscriber extras for Bootstrap 3 and select boxes

237 views
Skip to first unread message

Tom Short

unread,
Nov 19, 2013, 6:02:13 PM11/19/13
to jquery...@googlegroups.com
I'm growing to like jQuery.dForm quite a bit. It's easy to customize for what you want. Along those lines, I've added a few subscribers to fit my needs:

https://github.com/tshort/mdpad/blob/gh-pages/js/dform_extras.js

Here are the highlights:
  • bs3caption - Use this to specify a caption next to a form element. This wraps each form element to support Bootstrap 3 form layouts.
  • form-horizontal - If you add the class form-horizontal to the form, the Bootstrap form will be arranged with the captions on the left and the form elements on the right. You can also add the parameters col1class and col2class to specify the classes for the left and right columns. These are normally used to specify column widths. The column widths normally should add to 12. The form example at the end of the page uses a horizontal form with the following specification:
  class: form-horizontal
  col1class : col-sm-6
  col2class : col-sm-6
  • choices - Use this in select boxes to pass an array of values to use in the select box. This is like the options subscriber built into dform with the difference being that the main argument is an array of values rather than a key:value object.

  • selectvalue - This subscriber allows one to set the default for the select choices or options. This is a little easier than specifying the selection within the choices or option list. I actually extended the value subscriber to make this happen. I'm not sure this is kosher, but it worked:)

I use YAML as the means of specifying form and other HTML elements inside of a Markdown file. You can see an example here:

http://tshort.github.io/mdpad/mdpad.html?yaml_usage.md

To look at the Markdown with the YAML spec embedded, see here:

http://tshort.github.io/mdpad/yaml_usage.md

For more info on this approach, see here:

http://tshort.github.io/mdpad/

All of the examples here use jQuery.dForm with these extensions:

http://distributionhandbook.com/calculators/

- Tom

David Luecke

unread,
Nov 19, 2013, 6:33:41 PM11/19/13
to jquery...@googlegroups.com
Nice! I've been wanting to add Bootstrap forms for a while, this looks pretty good for that. Also, if you have some docs and a direct download for your extensions I'd be happy to add it to the documentation.


--
You received this message because you are subscribed to the Google Groups "jQuery dForm" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jquery-dform...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages