I've re-implemented the code using <LABEL>, as Anthony advised.
    http://code.google.com/r/ryo1kato-web2py/source/list?name=better-checkbox2
And demo is updated also
    http://ryo1kato.appspot.com/checkbox

The code is shorter, but still ugly. But I couldn't figure out how to
improve even more,
despite I (briefly) studied a little bit more about HTML4, CSS and JavaScript.
(hope there's 'parent' selector, and ":checked" support in IE6...)

Any idea?
--
R.Kato

On Tue, Aug 23, 2011 at 23:35, Anthony <abasta...@gmail.com> wrote:
> I think using <label for="[input id]">input text</label> would be a good
> start (certainly a lot simpler). web2py already uses that to label fields in
> SQLFORMs and for the "Remember me" checkbox on login forms. The base.css
> even sets the cursor to 'pointer' for all label elements, so you get a
> pointer whenever you hover over a label.
>
> To enable more sophisticated effects (e.g., dynamic style changes), maybe
> wrap the <input> and <label> in a <span> container with a special class, as
> suggested, and leave it up to the developer to add additional effects via
> CSS/jQuery.
>
> Anthony
>
> On Tuesday, August 23, 2011 9:44:03 AM UTC-4, ryo1kato wrote:
>>
>> Well, actually I'm embarrassed that I didn't know about <LABLE>....
>> And yes, I'm pretty sure that the change can be more simple.
>>
>> Primarily what I want is clickable option value(label) for
>> radio/checkboxes.
>> Besides,
>>   * Preferably, more large clickable area (*1)
>>   * Dynamic style change (as shown on the demo)
>>   * IE6 support.
>> would be good for easy-to-use UI.
>>
>> Regards,
>> ---
>> (*1) In my current implementation, <span class="...label"> and <input
>> ...> are clickable.
>> But I think this is still a bit too small to click.
>> Perhaps making "container"(a box containing both <input> and label)
>> clickable is more easy-to use.
>> (<span class="..._container"> in my example)
>>
>> On Tue, Aug 23, 2011 at 22:25, Massimo Di Pierro
>> <massimo....@gmail.com> wrote:
>> > here there is substantial JS to add to web2py_ajax and perhaps we can
>> > make it more compact. What is more specifically the problem that you
>> > want to solve? Be able to check/uncheck clicking on option value
>> > instead of checkbox/radio button?
>> >
>> >
>> >
>> > On Aug 23, 6:34 am, ryo1kato <ryo1...@gmail.com> wrote:
>> >> Hi,
>> >>
>> >> I'm frustrated that I can't check/select the checkboxes / radio-
>> >> buttons
>> >> by clicking on their labels rather than the box/buttons.
>> >> So, here's my own solution for web2py,
>> >> because I couldn't find any by quick googling.
>> >>
>> >> *http://bit.ly/nsNAmq(deep link inhttp://code.google.com/)
>> >>
>> >> * Demo is available on
>> >> here:http://ryo1kato.appspot.com/checkbox/default/
>> >>     (Tested on IE6, Firefox5,6, GoogleChrome13)
>> >>
>> >> ...It's quite possible you have better solution, because
>> >> I'm pretty new to both web2py and HTML/JavaScript.
>> >> However, I'm happy if this feature is supported as web2py's default.
>> >> (perhaps by someone's better implementation...)
>> >>
>> >> --
>> >> R.Kato
>>
>> --
>> R.Kato
>



-- 
R.Kato

Reply via email to