jQWidgets Forums

Tagged: html, jqxTabs, rename, tab, title

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

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

Author

Renaming Tabs w/ HTML title Posts

January 11, 2013 at 9:11 pm Renaming Tabs w/ HTML title #13527

Participant

When renaming a tab for some reason it won’t take/read the HTML I’m passing as the new title. When I add a tab, passing the same HTML as the title works fine. Is there some reason for this?

January 14, 2013 at 6:15 am Renaming Tabs w/ HTML title #13558

Dimitar

Participant

Hello shimmoril,

Here is an example with a button, which, when cicked, changes the title of the first tab using the method setTitleAt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView, jqxTabs" />
    <meta name="description" content="The jqxTabs is breaking the content into multiple sections. You
        can populate it from 'UL' for the tab titles and 'DIV' for it's contents." />
    <title id='Description'>The jqxTabs is breaking the content into multiple sections.
        You can populate it from 'UL' for the tab titles and 'DIV' for it's contents.
    </title>
    <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.8.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 = getTheme();
            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top', theme: theme });
            $('#tabChild').jqxTabs({ width: '90%', height: 200, position: 'top', theme: theme });
            $('#settings div').css('margin-top', '10px');
            $('#animation').jqxCheckBox({ theme: theme });
            $('#contentAnimation').jqxCheckBox({ theme: theme });
            $('#animation').bind('change', function (event) {
                var checked = event.args.checked;
                $('#jqxTabs').jqxTabs({ selectionTracker: checked });
            });
            $('#contentAnimation').bind('change', function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $('#jqxTabs').jqxTabs({ animationType: 'fade' });
                }
                else {
                    $('#jqxTabs').jqxTabs({ animationType: 'none' });
                }
            });
            $('#tabChild').on('selected', function (event) {
                event.stopPropagation();
                return false;
            });
            $('#jqxTabs').on('selected', function (event) {
                alert('da');
            });
            $("#changeTitle").click(function () {
                $('#jqxTabs').jqxTabs('setTitleAt', 0, "Changed title");
            });
        });
    </script>
</head>
<body class='default'>
    <button id="changeTitle">
        Change title of first tab</button>
    <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
            </div>
            <div>
                <div id="tabChild">
                    <ul>
                        <li>Child1</li>
                        <li>Child2</li>
                    </ul>
                    <div>
                        Child 1 content.</div>
                    <div>
                        Child 2 content.</div>
                </div>
            </div>
            <div>
                ASP.NET is a web applicat
            </div>
            <div>
                Python is a general-purpose, high-leve
            </div>
            <div>
                Perl is a high-level, g
            </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,
Dimitar

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

January 14, 2013 at 5:40 pm Renaming Tabs w/ HTML title #13593

shimmoril

Participant

I specifically said I was passing through HTML as the new tab name, not just text.

In the example below we are using FontAwesome icons on our tab labels. If you click an item in the tree, the tab is correctly created w/ the icon in front of the text. If you then click the Rename tab link, the tab is renamed, but the HTML for the icon comes through instead of the image.

<html>
	<head>
		<link rel="stylesheet" href="/javascript/jqwidgets/2.6.0/styles/jqx.base.css" type="text/css" />
		<link rel="stylesheet" href="/user/includes/font-awesome/3.0.0/css/font-awesome.css">
		
		<script type="text/javascript" src="/Javascript/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxcore.js"></script>
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxdata.js"></script> 
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxbuttons.js"></script>
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxscrollbar.js"></script>
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxpanel.js"></script>	
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxtree.js"></script>
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxtabs.js"></script>
		<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxsplitter.js"></script>
		
		<script type="text/javascript">
			var current_tab = 0;
			
			
			$(document).ready(function () {		
				var theme = '';
				
				$("#splitter").jqxSplitter({ 
					theme: theme, 
					panels: [{min: 190, max: 290, size: '25%'}, {min: 570, max: 870, size: '75%'}],  
					height: '100%'
				});
				
				$('#jqxTabs').jqxTabs({ 
					theme: theme,				
					width: '100%', 
					height: '100%', 
					position: 'top', 
					showCloseButtons: true,
					reorder: true, 
					scrollPosition: 'both', 
					selectionTracker: true
				});
				
				$('#jqxTabs').bind('selected', function(event){
					current_tab = event.args.item;
				});
				
				$('#nav_tree').jqxTree({
					theme: theme,
					width: '100%', 
					height: '500px'
				});	
				
				$('#nav_tree').bind('select', function(event){ 
					var src = '';
					var args = event.args;
					//get the clicked tree item
					var item = $('#nav_tree').jqxTree('getItem', args.element); 
					//get the clicked tree item's label (text) so the tab title can be set 
					var treeLabel = item.label;					
					var length = $('#jqxTabs').jqxTabs('length');	
		
					//add the new tab to the end
					$('#jqxTabs').jqxTabs('addLast', '<i class="fa-icon-info-sign"></i>' + treeLabel, '<div><a href="javascript: renameTab();">Rename Tab</a></div>');
					
					//make sure the newly added tab is visible in the tab bar
					$('#jqxTabs').jqxTabs('ensureVisible', length);
				})
			});
			
			function renameTab() { 
				//this will be called from the iframes on a successful save; changes the name of the tab to match what was saved
				$('#jqxTabs').jqxTabs('setTitleAt', current_tab, '<i class="fa-icon-ok-sign"></i> New tab name ' + current_tab);
				
				//the close button disappears on rename; re-show it 
				$('#jqxTabs').jqxTabs('showCloseButtonAt', current_tab);
			}
		</script>
		
	</head>
	<body>
		<div>
			<div id="splitter">
				<div class="tree-navigation">
			    	<div id="nav_tree">
			    		<ul>
			    			<li value="10">
			    				Item 1
								<ul>
									<li>Child 1</li>
									<li>Child 2</li>
								</ul>
							</li>
							<li>Item 2</li>
							<li>Item 3</li>
							<li>Item 4</li>
			    		</ul>	
			    	</div>							
				</div>
				<div id="ContentPanel">
					<div id='jqxTabs'>
						<ul id="unorderedList">
							<li>First Tab</li>	
						</ul>
						<div>
							<a href="javascript: renameTab();">Rename Tab</a>
						</div>
					</div>			
				</div>
			</div>
		</div>
	</body>
</html>

January 15, 2013 at 6:46 am Renaming Tabs w/ HTML title #13614

Dimitar

Participant

Hi shimmoril,

When using the method setTitleAt, the second parameter should be text and not HTML. However, in the forum topic Dynamic tab creation with Image there is something of a workaround you may check out.

Best Regards,
Dimitar

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

January 15, 2013 at 2:48 pm Renaming Tabs w/ HTML title #13642

shimmoril

Participant

Why is it possible to pass through HTML when creating a tab but not renaming it? Seems like a bug that they don’t accept the same content.

For the example you showed me, I assume if I change it to search for a specific LI, based on the current_tab index, I can target my tabs appropriately?

January 15, 2013 at 5:25 pm Renaming Tabs w/ HTML title #13646

shimmoril

Participant

Okay, I was able to rename the tab while passing the FontAwesome HTML, but now the close button is gone. Neither of these code snippits restores it:

$('#jqxTabs').find("ul li").eq(current_tab).attr('hasclosebutton', 'true');
$('#jqxTabs').jqxTabs('showCloseButtonAt', current_tab);

I was previously using the showCloseButtonAt with the setTitleAt, so I dont think it’s the same issue brought up in the linked thread.

January 16, 2013 at 1:38 pm Renaming Tabs w/ HTML title #13700

Dimitar

Participant

Hi shimmoril,

I assume you have changed the title to a custom HTML via:

$('#jqxTabs').find("ul li").eq(current_tab).html("new HTML value");

As stated in the linked forum topic, 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 no longer the case with the setTitleAt method. A workaround is given in the thread – remove the tab and replace it with a new one.

Best Regards,
Dimitar

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

January 16, 2013 at 3:00 pm Renaming Tabs w/ HTML title #13707

shimmoril

Participant

Is it possible for you to provide the HTML for the close button? I can’t just remove the tab and recreate it every time the user makes a change.

January 17, 2013 at 10:36 am Renaming Tabs w/ HTML title #13784

Dimitar

Participant

Hi shimmoril,

Here is a working solution. The following code changes the text of the first tab’s title to an image and keeps the close button:

            $("#change_title").click(function () {
                $("#jqxTabs li:eq(0) .jqx-tabs-titleContentWrapper").html('<img src="../../../Custom Images/arrow-right.jpg" />');
            });

Best Regards,
Dimitar

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

January 17, 2013 at 3:13 pm Renaming Tabs w/ HTML title #13805

shimmoril

Participant

Thank you SO MUCH Dimitar! This works perfectly. I really appreciate your help on this issue.

Author

Posts

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

You must be logged in to reply to this topic.