jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by  naatha 12 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Group Button + Theme #19833

    naatha
    Member

    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

    Group Button + Theme #19845

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Group Button + Theme #19890

    naatha
    Member

    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

    Group Button + Theme #19896

    Peter Stoev
    Keymaster

    Hi naatha,

    1. Please, choose a different Theme name.
    2. The Theme Builder does not currently support such kind of functionality.

    Best Regards,
    Peter Stoev

    jQWIdgets Team
    http://www.jqwidgets.com/

    Group Button + Theme #19906

    naatha
    Member

    Hi Peter,

    Changed the theme name, works like a charm…

    thanks you very much for your help

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.