jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tabs › JQX Tabs background-color change
Tagged: background, background color, clicked, color, hover, jqxTabs, selected, tab, Tabs
This topic contains 6 replies, has 2 voices, and was last updated by panky 11 years, 5 months ago.
-
Author
-
Hi
I have 10 tabs in my JQXTab control.
I have button in each tabs, when clicked , I want to mark that tab in different color.
I am doing this as below
$('#jqxTabs .jqx-tabs-title:eq(' + index + ')').css("background-color", "Green");
Above works fine but issue with Hover not as expected,
but when I clicked another button in another tab, I want to revert back previously marked
tab as normal.
How could it be achieved?
Thanks
Panky
Looping thr all tabs and se it’s BG as below removes Green BG,
but it’s Hover does not work
var len = $(‘#jqxTabs’).jqxTabs(‘length’);
for (var i = 1; i < len – 2; i++) {
$('#jqxTabs .jqx-tabs-title:eq(' + i + ')').css("background-color", "transparent");
}-Panky
Hello Panky,
You should modify the background-color CSS property of the classes jqx-tabs-title-selected-top and jqx-tabs-title-hover-top. Here is an example:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <style type="text/css"> #jqxTabs .jqx-tabs-title-selected-top { background-color: Lime; } #jqxTabs .jqx-tabs-title-hover-top { background-color: Red; } </style> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; // Create jqxTabs. $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top', theme: theme }); $('#settings div').css('margin-top', '10px'); $('#animation').jqxCheckBox({ theme: theme }); $('#contentAnimation').jqxCheckBox({ theme: theme }); $('#animation').on('change', function (event) { var checked = event.args.checked; $('#jqxTabs').jqxTabs({ selectionTracker: checked }); }); $('#contentAnimation').on('change', function (event) { var checked = event.args.checked; if (checked) { $('#jqxTabs').jqxTabs({ animationType: 'fade' }); } else { $('#jqxTabs').jqxTabs({ animationType: 'none' }); } }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;">Node.js</li> <li>JavaServer Pages</li> <li>Active Server Pages</li> <li>Python</li> <li>Perl</li> </ul> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers. It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl. Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby. Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js includes a REPL environment for interactive testing. </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types. Released in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web. To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP (Java Community Process) must both be met by the container. </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages. </div> <div> Python is a general-purpose, high-level programming language[5] whose design philosophy emphasizes code readability. Python claims to "[combine] remarkable power with very clear syntax",[7] and its standard library is large and comprehensive. Its use of indentation for block delimiters is unique among popular programming languages. Python supports multiple programming paradigms, primarily but not limited to object-oriented, imperative and, to a lesser extent, functional programming styles. It features a fully dynamic type system and automatic memory management, similar to that of Scheme, Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting language, but is also used in a wide range of non-scripting contexts. </div> <div> Perl is a high-level, general-purpose, interpreted, dynamic programming language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions and become widely popular amongst programmers. Larry Wall continues to oversee development of the core language, and its upcoming version, Perl 6. Perl borrows features from other programming languages including C, shell scripting (sh), AWK, and sed.[5] The language provides powerful text processing facilities without the arbitrary data length limits of many contemporary Unix tools, facilitating easy manipulation of text files. </div> </div> <div id='settings'> <div id='animation'> Enable Select Animation</div> <div id='contentAnimation'> Enable Content Animation</div> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar,
Sample looks gud, but I want to set it in JS , I tried something as below, but no luck
var len = $(‘#jqxTabs’).jqxTabs(‘length’);
for (var i = 1; i < len – 2; i++) {
$('#jqxTabs .jqx-tabs-title:eq(' + i + ')').css("background-color", "transparent");$('#jqxTabs .jqx-tabs-title-selected-top:eq(' + i + ')').css("background-color", "transparent");
$('#jqxTabs .jqx-tabs-title-hover-top:eq(' + i + ')').css("background-color", "transparent");}
I have to this bqz, at first time based on value coming from DB , I will set tab title BG Green, but after words
when user mark another Tab as Final then , I have to mark all tabs to original style [which I have in my custom css file generated from Theme builder]
then mark new tab title BG green.
Thanks
PankyHi Panky,
The solution you are trying does not work because you make a jQuery selection of all the selected/hovered items at initialization, which is actually only one element (selected) or zero elements (hovered). That is why the style solution is more appropriate. And here is another suggestion:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <style type="text/css"> .selected { background-color: Lime; } .hovered { background-color: Red; } </style> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; // Create jqxTabs. $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top', theme: theme }); $("#jqxTabs .jqx-tabs-title-selected-top").addClass("selected"); $("#jqxTabs .jqx-tabs-title-hover-top").addClass("hover"); $('#jqxTabs').on('selected', function (event) { $("#jqxTabs .jqx-tabs-title").removeClass("selected"); $("#jqxTabs .jqx-tabs-title:eq(" + event.args.item + ")").addClass("selected"); }); $('#jqxTabs .jqx-tabs-title').mouseenter(function (event) { $("#jqxTabs .jqx-tabs-title").removeClass("hovered"); $(event.target).addClass("hovered"); }); $('#jqxTabs .jqx-tabs-title').mouseleave(function (event) { $("#jqxTabs .jqx-tabs-title").removeClass("hovered"); }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;">Node.js</li> <li>JavaServer Pages</li> <li>Active Server Pages</li> <li>Python</li> <li>Perl</li> </ul> <div> Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers. It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl. Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby. Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js includes a REPL environment for interactive testing. </div> <div> JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types. Released in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web. To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP (Java Community Process) must both be met by the container. </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages. </div> <div> Python is a general-purpose, high-level programming language[5] whose design philosophy emphasizes code readability. Python claims to "[combine] remarkable power with very clear syntax",[7] and its standard library is large and comprehensive. Its use of indentation for block delimiters is unique among popular programming languages. Python supports multiple programming paradigms, primarily but not limited to object-oriented, imperative and, to a lesser extent, functional programming styles. It features a fully dynamic type system and automatic memory management, similar to that of Scheme, Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting language, but is also used in a wide range of non-scripting contexts. </div> <div> Perl is a high-level, general-purpose, interpreted, dynamic programming language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions and become widely popular amongst programmers. Larry Wall continues to oversee development of the core language, and its upcoming version, Perl 6. Perl borrows features from other programming languages including C, shell scripting (sh), AWK, and sed.[5] The language provides powerful text processing facilities without the arbitrary data length limits of many contemporary Unix tools, facilitating easy manipulation of text files. </div> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Awsome
Thanks Dimitar
I did below to make it work for me
Defined a css class
.selected
{
background-color: green;
}Remove “Selected” class from all tabs if they has
var len = $(‘#jqxTabs’).jqxTabs(‘length’);
for (var i = 1; i < len – 2; i++) {
if ($('#jqxTabs .jqx-tabs-title:eq(' + i + ')').hasClass("selected"))
$('#jqxTabs .jqx-tabs-title:eq(' + i + ')').removeClass("selected");
}Add Selected Class to newly selected Tab
$("#jqxTabs .jqx-tabs-title:eq(" + newIndex + ")").addClass("selected");Thanks again !!
Thanks
PankyJust noticed.
Tab Control looses applied CSS class when you add/remove tabs.
I managed to make it work.
-Panky
-
AuthorPosts
You must be logged in to reply to this topic.