jQuery UI Widgets Forums Getting Started One tab without close button and others with close button

This topic contains 4 replies, has 2 voices, and was last updated by  Aemal 10 years, 9 months ago.

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

  • Aemal
    Participant

    I want to create a tab without close button and the rest with close button. I need the one without close button for the Dashboard of the application, this will be the main page and shouldn’t be closeable.


    Dimitar
    Participant

    Hello Aemal,

    Please check out the demo Close Buttons for a solution.

    Best Regards,
    Dimitar

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


    Aemal
    Participant

    Dear Dimitar,

    Thanks a heap for your reply. I already had a look on that demo but what I need is a bit different. I need the first tab not to have the close button and the rest of the tabs should have close buttons. Something like this.


    Dimitar
    Participant

    Hi Aemal,

    The solution is to set the hasclosebutton attribute of the first tab title to false, as is done for the third in the demo, e.g.:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxbuttons.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    // create jqxTabs.
    $('#jqxTabs').jqxTabs({ height: 250, width: 500, theme: theme, showCloseButtons: true });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id='jqxTabs' style="float: left;">
    <ul style="margin-left: 30px;" id="unorderedList">
    <li hasclosebutton='false'>Node.js</li>
    <li>Active Server Pages</li>
    <li>Add New Tab</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>
    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>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Aemal
    Participant

    Yes!!!
    I just found that after sending the comment, but your support is so much great and superb that didn’t let me delete my comment. 🙂
    Great Support!!! 🙂

    jqWidgets I am loven it!!!

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

You must be logged in to reply to this topic.