jQuery UI Widgets › Forums › Navigation › Tabs › Dynamic tab creation with Image

Tagged: , , , , , , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 12 years, 3 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Dynamic tab creation with Image Posts
  • August 22, 2012 at 12:14 am Dynamic tab creation with Image #6973

    anilsaxena
    Member

    I want to dynamically create tab with image in tab title on some events, I haven’t seen anything in api for this, is there a way to do it ?

    August 22, 2012 at 5:46 am Dynamic tab creation with Image #6984

    Dimitar
    Participant

    Hello anilsaxena,

    Here is an example. By pressing a button, a jqxTabs is dynamically created with images as titles. By pressing another button, one of the images is dynamically changed.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>jQuery Tabs Sample</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.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 dynamically by pressing a button
                $("#tab_create").click(function () {
                    $("body").append('<div id="jqxtabs"><ul style="margin-left: 20px;"><li><img src="../custom_images/IE.png" /></li><li><img src="../custom_images/Firefox.png" /></li><li><img src="../custom_images/Opera.png" /></li></ul><div>Internet Explorer</div><div>Firefox</div><div>Opera</div></div>');
                    $('#jqxtabs').jqxTabs({ width: 550, height: 150 });
                    $("#tab_create")[0].disabled = true;
                });
                // change a tab title image dynamically by pressing a button
                $("#images_change").click(function () {
                    $("#jqxtabs").find("ul:first").find("li:first").html('<img src="../custom_images/Firefox.png" />');
                    $("#images_change")[0].disabled = true;
                });
            });
        </script>
    </head>
    <body class='default'>
        <button id="tab_create">
            Create a tab</button>
        <button id="images_change">
            Change tab titles to images</button>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    August 22, 2012 at 6:51 am Dynamic tab creation with Image #6999

    anilsaxena
    Member

    Thanks, I already have tabs created so I used following code to dynamically add tab with image.

    \
    $('#jqxtabs').jqxTabs('addLast', reportTitle, reportHtml);
    $("#jqxtabs").find("ul:first").find("li:last").html('

      ' + reportTitle + '

    ');

    but now I can’t see close button although showCloseButtons : true; is set.

    August 22, 2012 at 7:22 am Dynamic tab creation with Image #7004

    Dimitar
    Participant

    Hi anilsaxena,

    Please check the following example from the demo:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/closebuttons.htm?classic

    Best Regards,
    Dimitar

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

    August 22, 2012 at 7:44 am Dynamic tab creation with Image #7008

    anilsaxena
    Member

    I have already checked the example, please see the below example, in second page close button is not shown. This happens as soon as I call html on li.

    <script type="text/javascript">
           $(document).ready(function() {
    		$('#tabDiv').jqxTabs({
    			showCloseButtons : true
    		});
    		
    		$('#tabDiv').jqxTabs('addLast', 'Second', 'Second Page');
    		$("#tabDiv").find("ul:first").find("li:last").html('Second Changed');
    		$("#tabDiv").find("ul:first").find("li:last").attr('hasclosebutton', 'true');
           });
    </script>
    	<div id="tabDiv">
    		<ul style="margin-left: 30px;" id="unorderedList">
    			<li>First</li>
    		</ul>
    		<div>First Page</div>
    	</div>
    August 22, 2012 at 8:17 am Dynamic tab creation with Image #7011

    Dimitar
    Participant

    Hi anilsaxena,

    The .html() method replaces the html code of the title element. This means it also removes the information about the tab’s close button. This is also the case for setTitleAt. The only way to change a tab title and its contents and retain the close button is to remove the old tab and replace it with a new one. So, your script should be like this:

        <script type="text/javascript">
            $(document).ready(function () {
                $('#tabDiv').jqxTabs({
                    showCloseButtons: true
                });
                $('#tabDiv').jqxTabs('addLast', 'Second', 'Second Page');
                $("#tabDiv").jqxTabs('removeLast');
                $('#tabDiv').jqxTabs('addLast', 'Second Changed', 'Second Page Changed');
            });
        </script>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.