Merry Christmas: tabs, accordion and accordion-collection

[Bryan Larsen]

The no-prototype branch of Hobo/Hobo-jQuery has gained 3 new tags.
These will be in Hobo 1.4, but if you're anxious you can help us alpha
test:  http://groups.google.com/group/hobousers/browse_thread/thread/93a7793e28c2efda

Here's the docs for the new tags:

<% This tag allows you to easily use [jQuery-UI
tabs](http://jqueryui.com/demos/tabs/)

    <tabs>
      <first:>tab 1 content</first:>
      <tab2:>tab 2 content</tab2:>
    </tabs>

If you don't specify any attributes to the parameters, the parameter
name is used for the tab name and ID.   You can adjust this behaviour
by specifying attributes to your parameters:

    <tabs>
      <tab1: name="1" id="id1">tab 1 content</tab1:>
    </tabs:>

If you specify an href rather than an id, the tab content is loaded dynamically:

    <tabs>
      <remote: href="/front/hello"/>
    </tabs>

Attributes are passed through to jQuery-UI, so options and events
defined in the [jQuery-ui tabs
documentation](http://jqueryui.com/demos/tabs/) may be used:

    <tabs collapsible selected="2">
      ...
    </tabs>

### Attributes

Note that `tabs` supports attributes both on the `tabs` tag as well as
on the parameters.

The parameters support three attributes:  `id`, `name`, `href`, described above.

The `tabs` tag supports all options and events supported in jQuery-UI,
plus one additional attribute:

* sortable:  if set, the tabs are sortable rather than fixed.

### Notes

Usage of Ruby 1.8 will result in an undefined tab order.   Ruby 1.9 is
recommended.

%>

<% The `<accordion>` tag implements the [jQuery-UI
accordion](http://jqueryui.com/demos/accordion/).  It works the same
as the `<tabs>` tag, so see the [tabs
documentation](/api_tag_defs/tabs) for more information

     <accordion>
       <section1:>Hello</section1:>
       <section2:>Hey</section2:>
     </accordion>

There are two differences:  accordion does not support the `href` option.
%>

<!-- This tag, when given a list, chunks the list using the [jQuery-UI
accordion](jqueryui.com/demos/accordion).

If you do not specify the `chunker` attribute, the list is chunked
into sections of equal length. The default is 20 items, but that may
be adjusted by setting the `per-section` attribute.

The `chunker` may be passed a block to specify custom chunking. This
block is passed to
(Enumerable#chunk)[http://www.ruby-doc.org/core-1.9.3/Enumerable.html#method-i-chunk]
For example, to divide a sorted list of users based on the first
letter of their name:

<accordion-collection:users chunker="&Proc.new{|u| u.name[0..1]}"/>

The scoped variable `chunk` is set to the chunker output. If you
didn't specify the chunker, it's set to the chunk number. In the
example above, it would be set to the first letter of the user's name.
Here's an example of it being used to customize the chunk heading:

<heading:>Section <%= scope.chunk %></heading:>

The context is set to the chunked list for all parameters. This
allows us to further customize the heading:

<header:><name:first/> &mdash; <name:last/></header:>

Replacing the collection with a table is easy:

<default:><table fields="this,email"/></default:>

Remember that the default parameter is a list, even if you set
per-section="1". The easiest way to explode a list is with
`<repeat>`:

<accordion-collection per-section="1">
<header:><name:first/></header:>
<default:>
<repeat>
This is my content: <view/>
</repeat>
</default:>
</accordion-collection>

### Note:

This tag uses Enumerable#chunk, which is only available with Ruby
1.9.2 and later. If you are using Ruby 1.8.7, you must include the
`backports` gem in your project.

-->

[Bob Sleys]

Some very nice stuff.  I don't have a need currently for the above 2 tags however it's great to know I've got the option if the need arises.

What I'd really love to see in Hobo is was to make a site mobile friendly.  Jquery has a whole mobile UI set so I began to wonder if it could be put to use to that end.  I know that's no simple request so I hesitate to even mention it.  It's just a hole in the whole hobo toolset IMHO.  I have more and more clients wanting web apps that do work in the "field" and are wanting to use tablets when out in the field to enter data.

Bob

[Bryan Larsen]

> What I'd really love to see in Hobo is was to make a site mobile friendly.
>  Jquery has a whole mobile UI set so I began to wonder if it could be put to
> use to that end.  I know that's no simple request so I hesitate to even
> mention it.  It's just a hole in the whole hobo toolset IMHO.  I have more
> and more clients wanting web apps that do work in the "field" and are
> wanting to use tablets when out in the field to enter data.
>

You're right, it is an obvious hole.

There are a couple of technical challenges involved (for instance Hobo
currently doesn't allow a site to use more than one theme), but the
bulk of the work would best be done by those with CSS-fu and design
sense.

I can sometimes pretend to know my way around CSS, but my design sense
is seriously lacking. Any volunteers, I'd certainly be willing to
help with the technical side.

Bryan