CODEWITHSUNDEEP
jqueryjquery-mobileheader
dejavu
dejavu

Reputation: 3254

Adding button to controlgroup in jquery mobile header

I am trying to add two buttons to controlgroup dynamically. The controlgroup is contained within the header. I want the two buttons to be side by side on the right side of header.

But the buttons are getting added in vertical way and also there is a rectangular box around the buttons. How can I do it in correct manner?

Link: http://jsfiddle.net/saQFx/1/

$('div[data-role="controlgroup"]').append('<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" id="open-panel"></a>');

$('div[data-role="controlgroup"]').append('<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" id="open-panel2"></a>');

$('#open-panel').button();
$('#open-panel2').button();

Upvotes: 0

Views: 946

Answers (1)

krishwader
krishwader

Reputation: 11371

For some reason, your setting of data-type="horizontal" is getting erased when you try to dynamically push a tags into the controlgroup. SO i tried setting those values again through code like this : 

$('#ctrl').controlgroup({
  type: "horizontal",
  corners: false
});

Then, trigger a create on the page:

$("#frontPage").trigger('create');

This seems to work. I'll look more into this and get back to you. But for now, here's a working demo : http://jsfiddle.net/saQFx/3/

Changes made

  • removed the data-role from html and initialized controlgroup from JS
  • changed append() to html()
  • added trigger('create'); at the end.
  • removed button(). This ain't needed anymore. If you're doing a lot of changes together, like you're doing now,its wiser to call create on page.

An alternative though would be to inject the entire control group with all its contents through javascript, then run a trigger('create') on your page.

EDIT

Unfortunately, when you init controlgroup through the JS way, the rounded corners aren't kicking in by themselves. Guess you have to add ui-corner-all class by yourself to this, I just didnt want to get into that. That's a whole new level of mess. SO, instead of that, you could try the second method I mentioned:

  • injecting the entire control structure through JS itself
  • trigger the create method of page in the end.

Here's a demo : http://jsfiddle.net/hungerpain/saQFx/8/

Hope this helps!

Upvotes: 1

Related Questions