jQWidgets Forums
jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › Group Button + Theme
Tagged: button group, javascript buttons group
This topic contains 4 replies, has 2 voices, and was last updated by naatha 12 years ago.
-
AuthorGroup Button + Theme Posts
-
Hello,
Please have a look the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <link href="jqwidgets/styles/jqx.summer.css" rel="stylesheet" /> <link href="jqwidgets/styles/jqx.office.css" rel="stylesheet" /> <link href="jqwidgets/styles/jqx.metro.css" rel="stylesheet" /> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script></head><body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = 'summer' // Create jqxButton widgets. $("#jqxWidget").jqxButtonGroup({ theme: theme, mode: 'radio' }); $("#jqxButton1").jqxButton({ width: '150', height: '25' }); $("#jqxButton1").click(function () { $("#jqxWidget").jqxButtonGroup({ theme: 'office' }); }); $("#jqxButton2").jqxButton({ width: '150', height: '25' }); $("#jqxButton2").click(function () { $("#jqxWidget").jqxButtonGroup({ theme: 'metro' }); }); }); </script> <div id='jqxWidget'> <button style="padding:4px 16px;" id="Left"> Left</button> <button style="padding:4px 16px;" id="Center"> Center</button> <button style="padding:4px 16px;" id="Right"> Right</button> </div> <div> <input type="button" value="Theme OFFICE" id='jqxButton1' /> </div> <div> <input type="button" value="Theme METRO" id='jqxButton2' /> </div> </body></html>
the initial theme for the group button is summer
when i clicked the first button, the theme changed to office
then when i clicked the second button it changed to metro
After that, i again clicked the first button – but the theme did not change back to office.
why?
Am i doing anything wrong ?
Thanks
Hi,
You can use the following code as a solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <link href="../../jqwidgets/styles/jqx.summer.css" rel="stylesheet" /> <link href="../../jqwidgets/styles/jqx.office.css" rel="stylesheet" /> <link href="../../jqwidgets/styles/jqx.metro.css" rel="stylesheet" /> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script></head><body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = 'summer' // Create jqxButton widgets. $("#jqxWidget").jqxButtonGroup({ theme: theme, mode: 'radio' }); $("#jqxButton1").jqxButton({ width: '150', height: '25' }); $("#jqxButton1").click(function () { var theme = $("#jqxWidget").jqxButtonGroup('theme'); $("#jqxWidget").jqxButtonGroup({ theme: 'office' }); $.jqx.utilities.setTheme(theme, 'office', $("#jqxWidget")); }); $("#jqxButton2").jqxButton({ width: '150', height: '25' }); $("#jqxButton2").click(function () { var theme = $("#jqxWidget").jqxButtonGroup('theme'); $("#jqxWidget").jqxButtonGroup({ theme: 'metro' }); $.jqx.utilities.setTheme(theme, 'metro', $("#jqxWidget")); }); }); </script> <div id='jqxWidget'> <button style="padding:4px 16px;" id="Left"> Left</button> <button style="padding:4px 16px;" id="Center"> Center</button> <button style="padding:4px 16px;" id="Right"> Right</button> </div> <div> <input type="button" value="Theme OFFICE" id='jqxButton1' /> </div> <div> <input type="button" value="Theme METRO" id='jqxButton2' /> </div> </body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter,
Thanks for you help, it works fine…
Now I am facing another problem.
I have created a new theme summer2 from the theme summer by only changing
.jqx-fill-state-pressed-summer2{border-color: #1faeff; background-color: #1faeff; color: #fff; }
line. (I want to use different color instead of orange color in the summer theme)
here is the summer2 theme i have crated:
.jqx-widget-summer2{border-color: #cacaca;}.jqx-fill-state-normal-summer2, .jqx-widget-header-summer2{ border-color: #cacaca; background-color:#e4e5e5;}.jqx-fill-state-hover-summer2, .jqx-scrollbar-thumb-state-normal-summer2, .jqx-scrollbar-thumb-state-normal-horizontal-summer2{ border-color:#222; background-color:#888888; color: #fff;}.jqx-fill-state-pressed-summer2{border-color: #1faeff; background-color: #1faeff; color: #fff; }.jqx-fill-state-focus-summer2 { border-color: #555; }.jqx-scrollbar-state-normal-summer2, .jqx-grid-bottomright-summer2, .jqx-panel-bottomright-summer2, .jqx-listbox-bottomright-summer2{background-color: #e4e5e5;}.jqx-scrollbar-button-state-pressed, .jqx-scrollbar-button-state-hover{background-color: #e4e5e5; border-color: #222;}/*icons*/.jqx-menu-item-arrow-up-selected-summer2, .jqx-icon-arrow-up-hover-summer2, .jqx-icon-arrow-up-selected-summer2{background-image:url('images/icon-up-white.png');background-repeat:no-repeat;background-position:center;}.jqx-menu-item-arrow-down-selected-summer2, .jqx-icon-arrow-down-hover-summer2, .jqx-icon-arrow-down-selected-summer2{background-image:url('images/icon-down-white.png');background-repeat:no-repeat;background-position:center;}.jqx-menu-item-arrow-left-selected-summer2, .jqx-icon-arrow-left-hover-summer2, .jqx-icon-arrow-left-selected-summer2{background-image:url('images/icon-left-white.png');background-repeat:no-repeat;background-position:center;}.jqx-menu-item-arrow-right-selected-summer2, .jqx-icon-arrow-right-hover-summer2, .jqx-icon-arrow-right-selected-summer2{background-image:url('images/icon-right-white.png');background-repeat:no-repeat;background-position:center;}.jqx-tabs-close-button-hover-summer2, .jqx-tabs-close-button-selected-summer2{background-image:url(images/close_white.png); background-repeat:no-repeat; background-position:center;}.jqx-scrollbar-summer2 .jqx-icon-arrow-up-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-up-hover-summer2{background-image:url('images/icon-up.png'); background-repeat:no-repeat; background-position:center;}.jqx-scrollbar-summer2 .jqx-icon-arrow-down-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-down-hover-summer2{background-image:url('images/icon-down.png'); background-repeat:no-repeat; background-position:center;}.jqx-scrollbar-summer2 .jqx-icon-arrow-left-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-left-hover-summer2{background-image:url('images/icon-left.png'); background-repeat:no-repeat; background-position:center;}.jqx-scrollbar-summer2 .jqx-icon-arrow-right-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-right-hover-summer2{background-image:url('images/icon-right.png');background-repeat:no-repeat; background-position:center;}
Then i used these two themes in the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <link href="../../jqwidgets/styles/jqx.summer.css" rel="stylesheet" /> <link href="../../jqwidgets/styles/jqx.summer2.css" rel="stylesheet" /> <link href="../../jqwidgets/styles/jqx.office.css" rel="stylesheet" /> <link href="../../jqwidgets/styles/jqx.metro.css" rel="stylesheet" /> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script></head><body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = 'office' // Create jqxButton widgets. $("#jqxWidget").jqxButtonGroup({ theme: theme, mode: 'radio' }); $("#jqxButton1").jqxButton({ width: '150', height: '25' }); $("#jqxButton1").click(function () { var theme1 = $("#jqxWidget").jqxButtonGroup('theme'); $("#jqxWidget").jqxButtonGroup({ theme: 'summer' }); $.jqx.utilities.setTheme(theme1, 'summer', $("#jqxWidget")); }); $("#jqxButton2").jqxButton({ width: '150', height: '25' }); $("#jqxButton2").click(function () { var theme2 = $("#jqxWidget").jqxButtonGroup('theme'); $("#jqxWidget").jqxButtonGroup({ theme: 'summer2' }); $.jqx.utilities.setTheme(theme2, 'summer2', $("#jqxWidget")); }); }); </script> <div id='jqxWidget'> <button style="padding:4px 16px;" id="Left"> Left</button> <button style="padding:4px 16px;" id="Center"> Center</button> <button style="padding:4px 16px;" id="Right"> Right</button> </div> <div> <input type="button" value="Theme SUMMER" id='jqxButton1' /> </div> <div> <input type="button" value="Theme SUMMER2" id='jqxButton2' /> </div> </body></html>
initial theme – office OK
click first button – theme summer OK
click second button – theme summer2 OK
then click first button – cant get the summer theme back.
What i am missing this time?
In the Theme Builder, can i start from an existing .css file and modify to get the custom one ?
Thanks
Hi naatha,
1. Please, choose a different Theme name.
2. The Theme Builder does not currently support such kind of functionality.Best Regards,
Peter StoevjQWIdgets Team
http://www.jqwidgets.com/Hi Peter,
Changed the theme name, works like a charm…
thanks you very much for your help
-
AuthorPosts
You must be logged in to reply to this topic.