jQWidgets Forums
jQuery UI Widgets › Forums › Lists › DropDownList › Reusing theme combobox
Tagged: combobox, combobox theme, DropDownList
This topic contains 5 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 11 months ago.
-
AuthorReusing theme combobox Posts
-
Deals with problems encountered when trying to reuse the theme combobox of the demo section of the jqwidgets.com website
Hi I am trying to reuse the themeComboBox but when it tries to init the widget in the initthemes function I get an error because the listbox member is undefined.
I use the 1.4 of jqwidgets.
here is a chunk of the code I use:
HTML code:
Theme:javascript code:
GetTheme.js:
function initthemes(initialurl) {
var loadedThemes = [0, -1, -1, -1, -1];
var themes = [‘Classic’, ‘Energy Blue’, ‘Shiny Black’, ‘Dark Blue’, ‘Summer’];
var me = this;
this.$head = $(‘head’);
//next line is the one which cause the exception in the jqxdropdownlist.js file
$(‘#themeComboBox’).jqxDropDownList({ source: themes, theme: ‘classic’, selectedIndex: 0,
dropDownHeight: 122, width: ‘120px’, height: ’20px’ });
….$(document).ready(function () {
var initialurl = “jqwidgets/styles/jqx.”;
initthemes(initialurl);
….Cheers!
Hi alhopiteau,
The gettheme.js is a utility function that we use in our demos to load the correct files. It is implemented only for the Examples project purpose.
To set a theme to a dropdownlist, please take a look at this help article: jquery-dropdownlist-styling-and-appearance.htm
The article shows which files you need to include in your project and how to set the theme property.
In addition, the DropDownList widgets internally uses the ListBox widget and you need to include the jqxlistbox.js in your page, too. If you don’t include it, an exception will be raised.
The following code example shows the list of files that you need to reference in your page to use the jqxDropDownList.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/><script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script><script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script><script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script><script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script><script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script><script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks a lot for your help Peter (on the bridge during week ends, so nice of you) , looks like I was missing the jqxscrollbar module in my attempt to make this code running. I will have a look to this article of yours tonight in order to improve this theming feature.
Cheers.
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
Hi Zandro,
You have to dynamically set the “theme” property of a widget(s) and make sure that the theme’s CSS file is present.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.