jQWidgets Forums

jQuery UI Widgets › Forums › Grid › JQXTab coloring

Tagged: , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 11 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    JQXTab coloring Posts
  • October 23, 2013 at 6:36 am JQXTab coloring #31234

    ssp
    Participant

    Hi,

    I will have N-number of tabs JQXTab control. I want to mark some tabs in different color based on some conditions, I am able to do this as following

    $(“#jqxTabs .jqx-tabs-title:eq(1)”).css(“background-color”, “Red”);

    but I want to pass key values as arguments instead of index values something like below:

    $(“#jqxTabs .jqx-tabs-title:eq(” + location + “)“).css(“background-color”, “Red”);

    plz tell me how do I pass the string values as arguments?

     

    October 23, 2013 at 10:54 am JQXTab coloring #31251

    ssp
    Participant

    I have to pass the title of the tab as arguments or is there a method to retrieve the index of the jqxTab based on the title of the tab?

    October 23, 2013 at 12:39 pm JQXTab coloring #31257

    Dimitar
    Participant

    Hello ssp,

    Here is an example which shows how to achieve the requested functionality:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <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">
            $(document).ready(function () {
                // create jqxtabs.
                $('#jqxtabs').jqxTabs({ width: 550, height: 150 });
                var tabsCount = $("#jqxtabs .jqx-tabs-title").length;
                for (var i = 0; i < tabsCount; i++) {
                    var currentTabTitle = $('#jqxtabs').jqxTabs('getTitleAt', i);
                    if (currentTabTitle == "Colourful tab") {
                        $("#jqxtabs .jqx-tabs-title:eq(" + i + ")").css({ "background-color": "Blue", "color": "White" });
                        break;
                    };
                };
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxtabs'>
            <ul style='margin-left: 20px;'>
                <li>Tab 1</li>
                <li>Tab 2</li>
                <li>Tab 3</li>
                <li>Colourful tab</li>
                <li>Tab 5</li>
            </ul>
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
            <div>
                Content 3
            </div>
            <div>
                Content 4
            </div>
            <div>
                Content 5
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.