jQuery UI Widgets › Forums › Navigation › Tabs › Two closebutton jqxTabs in 1 page

Tagged: , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 9 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Two closebutton jqxTabs in 1 page Posts
  • February 25, 2016 at 4:27 am Two closebutton jqxTabs in 1 page #81809

    er.paulsmith
    Participant
    Hi,

Please tell me how to implement 2 closebuttons jqxTabs in 1 page. When i add one jqxtab than It is working perfectly but when i add 2nd jqxtab than 2nd tab is not work properly. The Code is below

Please help me..
Thanks in advance.!

<title id='Description'>Hello</title>

 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
   <link rel="stylesheet" href="jqx1.base.css" type="text/css" />
    <script type="text/javascript" src="jqxcore1.js"></script>
    <script type="text/javascript" src="jqxtabs1.js"></script>
    <script type="text/javascript" src="jqxbuttons1.js"></script>

<link rel="stylesheet" href="jqx.base.css" type="text/css" />
 <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxtabs.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
 
</head>
<body >

<script type="text/javascript">
        $(document).ready(function () {
            var addButton,
                addButtonWidth = 29,
                index = 2;

            // create jqxTabs.
            $('#jqxTabs').jqxTabs({ height: 250, width: 500,  showCloseButtons: true });
            var index = 2;
            $('#jqxTabs').on('tabclick', function (event) {
                if (event.args.item == $('#unorderedList').find('li').length - 1) {
                    var length = $('#unorderedList').find('li').length;
                    $('#jqxTabs').jqxTabs('addAt', event.args.item, 'TabPrimary ' + index, '<input type="text"  class="form-control" placeholder="" name=' + index + '>');
					
					
                    index++;
                }
            });
        });
    </script>
        <div id='jqxTabs' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>TabPrimary 1</li>
              
                <li canselect='false' hasclosebutton='false'>Add more
            
            <div>
        <input type="text" name="1"  >
		
		
            </div>
       
            <div> 
            </div>
		
        </div>

    <script type="text/javascript">
        $(document).ready(function () {
            var addButton,
                addButtonWidth = 29,
                index = 2;

            // create jqxTabs.
            $('#jqxTabs1').jqxTabs1({ height: 250, width: 500,  showCloseButtons: true });
            var index = 2;
            $('#jqxTabs1').on('tabclick', function (event) {
                if (event.args.item == $('#unorderedList').find('li').length - 1) {
                    var length = $('#unorderedList').find('li').length;
                    $('#jqxTabs1').jqxTabs1('addAt', event.args.item, 'TabSecondary ' + index, '<input type="text"  class="form-control" placeholder="" name=' + index + '>');
					
					
                    index++;
                }
            });
        });
    </script>
        <div id='jqxTabs1' style="float: left;">
            <ul style="margin-left: 30px;" id="unorderedList">
                <li>TabSecondary 1</li>
              
                <li canselect='false' hasclosebutton='false'>Add more
            
            <div>
        <input type="text" name="1"  >
		
		
            </div>
       
            <div> 
            </div>
		
        </div>
  
</body>
    February 25, 2016 at 7:31 am Two closebutton jqxTabs in 1 page #81819

    Hristo
    Participant

    Hello er.paulsmith,

    If you would like to see this article it could be helpful:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtabs/jquery-tabs-getting-started.htm?search=tab

    Please take a look this demo and follow acuratly:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/closebuttons.htm?arctic
    No need to create new ‘script’ tag and the sequence is incorrect first create ‘ul’ with ‘li’ tags.
    That create the title of each <i>tabs</i> and after this create as many ‘div’ tags for each one content tab.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    February 25, 2016 at 12:46 pm Two closebutton jqxTabs in 1 page #81839

    er.paulsmith
    Participant

    Hi
    Thanks for your reply

    Actually the problem is that I want two closebuttons jqxtabs widgets in 1 page. Single jdxtabs widget is working properly but I’m unable to add second tab widget. Please suggest me how to add two tabs widgets in single page so that no one conflicts with each other

    Thanks

    February 25, 2016 at 1:58 pm Two closebutton jqxTabs in 1 page #81841

    Hristo
    Participant

    Hello er.paulsmith,

    Please take a look this example:
    https://www.jseditor.io/?key=jqwidgets-two-tabs-in-one-page

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.