<
From version < 12.1 >
edited by Marius Dumitru Florea
on 2013/03/02
To version < 13.1 >
edited by Marius Dumitru Florea
on 2013/03/02
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -15,6 +15,52 @@
15 15  
16 16  = New and Noteworthy (since XWiki 4.5) =
17 17  
18 +== Button Group Widget ==
19 +
20 +We added a small widget to group form buttons.
21 +
22 +{{image reference="buttonGroup.png" /}}
23 +
24 +It can be used either with a static list of buttons, when you know beforehand that you have more than 1 button and you know the main one, or with a dynamic list of buttons, if you want the buttons to be grouped on the client side if there are more than one.
25 +
26 +The static button group works even with JavaScript disabled (in a modern browser):
27 +
28 +{{code language="html"}}
29 +<p class="buttons">
30 + <span class="buttonwrapper button-group">
31 + <button>Action</button><a href="#foo" class="dropdown-toggle" tabindex="0"><span/></a>
32 + <span id="foo" class="dropdown-menu">
33 + <button>First item</button>
34 + <input type="submit" value="Second item" class="button" />
35 + <a href="#third">Third item</a>
36 + </span>
37 + </span>
38 +</p>
39 +{{/code}}
40 +
41 +The dynamic group obviously requires JavaScript. The first button found in the group is considered the main one. The buttons are grouped only if there are more than one. If the main button is secondary then the button group is styled as a secondary button.
42 +
43 +{{code language="html"}}
44 +<span class="dynamic-button-group">
45 + <span class="buttonwrapper">
46 + <button>One</button>
47 + </span>
48 + <span class="buttonwrapper">
49 + <input type="submit" class="button secondary" value="Two" />
50 + </span>
51 + <span class="buttonwrapper">
52 + <a href="#three" class="secondary">Three</a>
53 + </span>
54 +</span>
55 +{{/code}}
56 +
57 +In both cases you need to include the widget resources:
58 +
59 +{{code language="none"}}
60 +#set ($discard = $xwiki.ssfx.use('uicomponents/widgets/buttonGroup.css', true))
61 +#set ($discard = $xwiki.jsfx.use('uicomponents/widgets/buttonGroup.js'))
62 +{{/code}}
63 +
18 18  == Full Issue List ==
19 19  
20 20  {{jira style="list" url="http://jira.xwiki.org" fields="type, status, key, summary" source="jql"}}

Get Connected