C Reese C Reese - 1 year ago 71
jQuery Question

Indicator lamp in jQuery mobile

I use jQuery mobile for a particular site.

I'd like a widget similar to the toggle slider element, but that clearly indicates it is only an indicator, rather than a control. Imagine the toggle slider element without the sliding button: color indication of state and change of option value text.

I know I could easily do this with css outside of jQuery mobile, but I have my global js set up to render to elements of a known type, e.g. :

function RenderWidgets(data,prefix) {
$('.' + prefix + key).html(value)
$('.' + prefix + key + 'toggle').val(booleanbinarytoonoff(value)).slider("refresh")
$('.' + prefix + key + 'automantoggle').val(value).slider("refresh")
$('.' + prefix + key + 'slider').val(value).slider("refresh")
$('.' + prefix + key + 'select').val(value)

I'd like to add a line for an indicator element set value and be done with it, rather than having to add and remove classes.

So my question is: is the best way to accomplish this to dig through the jQuery mobile library, duplicate the slider toggle class with a custom name, and then change the css to make it appear like an indicator rather than a control?


Answer Source

Ok, so here's what I did. I wrapped each toggle that I wanted to only be an indicator in a span with class 'justalamp', and then applied the following after each slider refresh event:

$('.justalamp .ui-slider-label-a').css('text-indent','0')
$('.justalamp .ui-slider-label-b').css('text-indent','0')
$('.justalamp .ui-slider-inneroffset').html('')
$('.justalamp .ui-slider').unbind()

The first two remove text-indent, the third nukes the button, and the last removes the user click response. The nice and clean part is that we can send values to the things as if they were regular toggles. I also don't have to copy pasta the whole confounded blurb of jquery mobile generated html(icky). Super!