Page 1 of 1

how to color selected list item containing grid and labels?

Posted: Thu Apr 04, 2013 1:20 pm
by Marco Della Gala

hello i have a problem with list item. I found a similar post in https://getsatisfaction.com/tiggzi/to...
I tested the code proposed in that post: code$(document).ready(function() {
$("li.ui-li-static").removeClass("ui-li-static").addClass('ui-btn').data('theme', 'a').attr('data-theme', 'a');
});
/code
But i would like to have the selected item colored in a different color when it is tapped.
I'm working with the old version of tiggzi and i can not change the button down color of any standard jquery mobile theme.
I tried to add a custom swatch in the jquery mobile theme with a differnt color for button down, but if i try to change the code ...data('theme', 'a').attr('data-theme', 'a'); with ....data('theme', 'my_swatch').attr('data-theme', 'my_swatch'); it does not work
is there any way to obtai a list with gray color for every list item and blue color for the selected (button down) one, like in
http://jquerymobile.com/demos/1.2.1/d...


how to color selected list item containing grid and labels?

Posted: Thu Apr 04, 2013 1:47 pm
by Kateryna Grynko

Hello,

On page http://jquerymobile.com/demos/1.2.1/d... Swatch "c" is selected.

If you want your app to look like that use the following code:
code$(document).ready(function() {
$("li.ui-li-static").removeClass("ui-li-static").addClass('ui-btn').data('theme', 'c').attr('data-theme', 'c');
});/code('a' is changed to 'c')

To make the list item to get another color you would need to create CSS asset with the following code: http://pastebin.com/dr8Qj2Fs


how to color selected list item containing grid and labels?

Posted: Thu Apr 04, 2013 2:26 pm
by Marco Della Gala

thanks it works.
I added the css asset and it is ok.
Is there any way to live the color of the selected item to the same of .ui-btn-down-c (in the css) after the click???


how to color selected list item containing grid and labels?

Posted: Thu Apr 04, 2013 5:26 pm
by Maryna Brodina

Seems it's not possible to do with CSS, but you can add additional class for selected item and on click add that class. This should help http://stackoverflow.com/questions/77...


how to color selected list item containing grid and labels?

Posted: Wed Jun 05, 2013 7:13 pm
by Nate Snyder

Hello,
Katya's sample JS shown above has allowed me to get back almost everything I wanted on a list component (used in something very similar to the clickable list app tutorial). But I was wondering if there's also a way to add a highlighted border around the selected list item so it will be similar to a button click like in the image below?

Thanks.

Image


how to color selected list item containing grid and labels?

Posted: Wed Jun 05, 2013 7:46 pm
by Kateryna Grynko

Hi Nate,

You can look here:
https://developer.mozilla.org/en-US/d...


how to color selected list item containing grid and labels?

Posted: Thu Jun 06, 2013 8:38 pm
by Nate Snyder

Hello -
I'm trying to change list item color and border color on click, but unsuccessful. The pastebin link above does not seem to be working. Any ideas?