jQuery UI Widgets Forums General Discussions Switching themes

This topic contains 19 replies, has 7 voices, and was last updated by  Peter Stoev 7 years, 5 months ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • Switching themes #2018

    pile
    Member

    Hi,
    I didn’t know where to put this topic, since this board doesn’t have some general discussion section. I’ll leave it here, ’cause it has something to do with ‘getting started’.

    I’ve been testing jqW for a couple of days, and find it very powerfull and nice. However, I didn’t manage to figure out how to change themes from a html/web page, similar to the way it is done in Demo section here.

    Can someone provide me any guidelines?

    Thanks,
    Pile

    Switching themes #2029

    Peter Stoev
    Keymaster

    Hi Pile,

    By setting the ‘theme’ property to ‘classic’, ‘darkblue’, ‘shinyblack’, ‘summer’ or ‘energyblue’, you will initialize a widget with a specific theme. You also need to load the theme’s CSS stylesheet. At present, the ‘theme’ property can be set only during the initialization of the widget in its constructor. In the upcoming releases we will enable setting it dynamically by simply setting a new value to the ‘theme’ property. Below, I will show you how to switch themes dynamically without setting the ‘theme’ property:

    Create a simple page with IFrame tag inside. In this page, we will switch the themes. In this page, I added a button which sets the ‘src’ of the IFrame. The ‘src’ of the IFrame contains the theme’s name(‘classic’ by default or ‘darkblue’ after clicking the button).

    <!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>
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    </head>
    <body class='default'>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    $('iframe')[0].src = "content.htm" + "?classic";
    $('input').click(function () {
    $('iframe')[0].src = "content.htm" + "?darkblue";
    });
    });
    </script>
    <div>
    <iframe></iframe>
    <input type="button" value="Switch Theme"/>
    </div>
    </div>
    </body>
    </html>

    Next, create the web page with the widget. In this page, I added a jqxButton widget and set its theme in the constructor. You can also see a function called getTheme. The getTheme function checks the url’s string and dynamically loads the theme’s css stylesheet and return’s the theme’s name.

    <!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>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    </head>
    <body class='default'>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    function getTheme() {
    var themestart = window.location.toString().indexOf('?');
    if (themestart == -1) {
    return '';
    }
    var theme = window.location.toString().substring(1 + themestart);
    var url = "../../jqwidgets/styles/jqx." + theme + '.css';
    if (document.createStyleSheet != undefined) {
    document.createStyleSheet(url);
    }
    else $(document).find('head').append('<link rel="stylesheet" href="' + url + '" media="screen" />');
    return theme;
    };
    var theme = getTheme();
    // Create jqxButton widgets.
    $("#jqxButton").jqxButton({ width: '150', height: '25', theme: theme });
    });
    </script>
    <input type="button" value="Button" id='jqxButton' />
    </div>
    </body>
    </html>

    Hope this helps you.

    Best Regards,
    Peter Stoev

    http://www.jqwidgets.com
    jQWidgets Team

    Switching themes #2053

    pile
    Member

    Thanks Peter for this more than complete answer!

    At present, the ‘theme’ property can be set only during the initialization of the widget in its constructor. In the upcoming releases we will enable setting it dynamically by simply setting a new value to the ‘theme’ property.

    I was guessing that this is the only way, and I am glad that upcoming releases will bring dznamic and simple solution in case of theme switching :).

    I will show you how to switch themes dynamically without setting the ‘theme’ property.

    Thanks for this interesting code, I’ll try to find some solution using it.

    Switching themes #2069

    Peter Stoev
    Keymaster

    Hi Pile,

    Please feel free to contact us, if you have any questions, issues or suggestions.

    Best Regards,
    Peter Stoev

    http://www.jqwidgets.com
    jQWidgets Team

    Switching themes #2741

    DavidSimmons
    Participant

    Do you support now or in the future jQuery themes. I am building many of my application using jQuery themes and like to uses them on JQWidgets within my current development.

    Switching themes #2750

    Peter Stoev
    Keymaster

    Hi David,

    We are currently not supporting the jQuery UI’s themes. In April, we’ll release a Theme Builder application which will allow our customers to easily build new themes for our widgets. We will also consider providing some of the jQuery UI’s themes in the future versions.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Switching themes #11069

    kcrusch
    Participant

    So, unless I’m missing something, that means you can’t use any CGI variables in the URL, because the getTheme() method will just eat up the whole CGI string and assume that’s the theme name?

    Again, maybe I’m reading this wrong, but this seems to be a very big problem. I’m getting pages blowing up because it can’t find a theme called “MemberID=4”.

    Switching themes #11071

    Peter Stoev
    Keymaster

    For setting themes see the Styling and Appearance help topics in the help documentation.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Switching themes #11077

    kcrusch
    Participant

    Yeah, I don’t think i properly described my issue.

    So I’m going along using the code just like in the examples,where my javascript has

    var theme = getTheme();.

    then, just like all the examples, I have
    if (theme.length > 0) {
    $(“#isActive”).addClass(‘jqx-input-‘ + theme);

    then I try to set the value of the checkbox (you know, CHECKING it), the script blows up, because it’s looking for a theme called
    “jqx-input-LeaseID=12”.

    And i ask myself “what is that?” Turns out if I didn’t specify a theme yet (because I’m too busy getting anything else to work to care about how good it looks) the theme is just taken from the URL. And again, unless I’m missing something, the code in getTheme just takes *the entire* CGI string. Is that right? If so, does that mean I simply cannot use GET variables and jqxWidgets at the same time?

    Again, i’m not trying to SET a theme. I’m trying to get the stuff to work before bothering with themes.

    Please help.

    Switching themes #11079

    Peter Stoev
    Keymaster

    getTheme’s function is implemented for our Examples project and it’s fine for it. If you don’t like how it works, you may not use it for switching themes and it is not required for setting themes as well. The idea is to load the Theme’s CSS file and to set the widgets theme property to the theme’s name. That’s all you need to do. To switch a theme, set the theme property to the theme’s name. If the CSS file is loaded, the theme will be switched. If it isn’t loaded, the theme will not we switched. Here’s a help topic about using the EnergyBlue theme: jquery-button-styling-and-appearance.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Switching themes #62288

    fdski
    Participant

    Hi, sorry if stupid question, but has the dynamic switching feature been implemented ?

    Thanks,

    B

    Switching themes #62302

    Peter Stoev
    Keymaster

    Hi fdski,

    It’s available since version 1.0. You can set the “theme” property whenever you wish.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Switching themes #62331

    fdski
    Participant

    yes, but once the widget has been initialized, it’s theme is set. How do i force reskinning of all active widgets ?

    Basically I have aplication loaded, and I want a user to have an option to change the theme. As far as I can tell, i have to either reload the application or cycle though all jqx controls and reset the theme to them. Is there a third, better way ? 😉

    Switching themes #62335

    Peter Stoev
    Keymaster

    Hi fdski,

    You can set any property dynamically. “theme” is a property and can be set dynamically.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Switching themes #69150

    zandro
    Participant

    Hi, Can I ask if how can I also use the theme switcher function using a dropdown or combobox? example i have a dropdown list that contains the list of all themes then if I on the onselect function of the combobox the whole theme of all the widgets irregardless of the number of widgets, they will change accordingly based on the selected theme on the combo box.

    Thanks in advance.

    Zandro

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.