{"id":18,"date":"2023-08-25T17:32:29","date_gmt":"2023-08-25T17:32:29","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=18"},"modified":"2023-08-25T17:32:29","modified_gmt":"2023-08-25T17:32:29","slug":"controlgroup","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/controlgroup\/","title":{"rendered":"Controlgroup Widget"},"content":{"rendered":"

\nControlgroup Widget<\/span>version added: 1.3<\/span>\n<\/h2>\n
\n

Description: <\/strong>Groups buttons together.<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
corners<\/a><\/div>\n
excludeInvisible<\/a><\/div>\n
initSelector<\/a><\/div>\n
mini<\/a><\/div>\n
shadow<\/a><\/div>\n
type<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
container<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

Occasionally, you may want to visually group a set of buttons to form a single block that looks contained like a navigation component. To get this effect, wrap a set of buttons in a container with the data-role="controlgroup"<\/code> attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together. <\/p>\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<div<\/span> data-role<\/span>="controlgroup"<\/span>><\/span><\/code><\/div><\/div>
  <a<\/span> href<\/span>="#"<\/span> data-role<\/span>="button"<\/span>><\/span>Yes<\/a<\/span>><\/span><\/code><\/div><\/div>
  <a<\/span> href<\/span>="#"<\/span> data-role<\/span>="button"<\/span>><\/span>No<\/a<\/span>><\/span><\/code><\/div><\/div>
  <a<\/span> href<\/span>="#"<\/span> data-role<\/span>="button"<\/span>><\/span>Maybe<\/a<\/span>><\/span><\/code><\/div><\/div>
<\/div<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
This will result in the following button group:\n\t\t