Tabber & Toolbar Guide

sichipan · May 1, 2011, 10:49am

Good day,

I’m just a new developer trying to evaluate your product. I have a problem creating my site using tabber and toolbar. I want to access all my page in the main frame.

Below are my code:

My FrameSet

My Main.jsp

tabbar = new dhtmlXTabBar("a_tabbar", "top"); tabbar.setSkin('dhx_skyblue'); tabbar.setImagePath("common/images/"); tabbar.addTab("a1", "HOME", "150px"); tabbar.addTab("a2", "MAINTENANCE", "150px"); tabbar.addTab("a3", "INQUIRY", "150px"); tabbar.addTab("a4", "REPORTING", "150px"); tabbar.addTab("a5", "CHANGE PASSWORD", "150px"); tabbar.addTab("a5", "LOGOUT", "150px"); tabbar.setHrefMode("iframes-on-demand"); tabbar.setContentHref("a1", "home.jsp"); tabbar.setTabActive("a1");

		var toolbar = tabbar.cells("a2").attachToolbar();
		toolbar.setIconsPath("common/images/toolbar_images/");
	toolbar.loadXML("common/bm_editor.xml");
		
		toolbar.attachEvent("onClick", function(register) {
			tabbar.cells("a2").attachURL("register.jsp");
		})
		toolbar.attachEvent("onClick", function(update) {
			tabbar.cells("a2").attachURL("update.jsp");
		})
		toolbar.attachEvent("onClick", function(uplift) {
			tabbar.cells("a2").attachURL("uplift.jsp");
		})
  </script>

My Toolbar XML

<?xml version="1.0"?>

Could you give me a proper way how to code it. I’m new in programming. If you could rewrite my code it much be appreciate.

Thank.

Alexandra · May 4, 2011, 1:43pm

Hello,

I want to access all my page in the main frame.

to access the parent page you may refer parent object from the main.jsp frame.

I have a problem creating my site using tabber and toolbar.

Instead of three onClick handlers of toolbar you need to set one:

toolbar.attachEvent("onClick", function(id) { if(id=="register") tabbar.cells("a2").attachURL("register.jsp"); else if(id=="update") tabbar.cells("a2").attachURL("update.jsp"); else if(id=="uplift") tabbar.cells("a2").attachURL("uplift.jsp"); })

sichipan · May 6, 2011, 7:49am

Hi Alexandra,

Thank for the guide. It work no. Just one more thing. I have 3 tabs. Let say tab A, B and C. When click on tab B, a toolbar with 3 menu on it will be displayed and I attached a pageB.jsp on tab B. On my screen now it will display tab B with 3 menu on the toolbar and pageB.jsp will be display. Click on menuA on the toolbar. It will display menuA.jsp. (Please refer to my code above).

Than click on tab A. This will display pageA.jsp where I already attachURL on it. But if I click on tab B again, it will display menuA.jsp instead of displaying pageB.jsp.

How to solved this problem. Thank in advance.

Can icon be attach in the tabbar…

Alexandra · May 6, 2011, 1:12pm

Hi,

there problem is not clear enough. You may attach the completed demo that allows to reproduce the problem.

Can icon be attach in the tabbar…

Where do you want to attach an icon ?

sichipan · May 8, 2011, 3:16am

Index.jsp

Header.jsp

<script>
	var dhxLayout;
	function loadHeader() {
		dhxLayout = new dhtmlXLayoutObject(document.body, "1C");
		dhxLayout.cells("a").fixSize(true, true);
		dhxLayout.cells("a").hideHeader();
		dhxLayout.cells("a").attachObject("header");
		var cell_a = dhxLayout.cells("a");
		cell_a.childNodes[0].childNodes[0].childNodes[4].style.display = "none";
	}
</script>

My Main.jsp

tabbar = new dhtmlXTabBar("a_tabbar", "top"); tabbar.setSkin('dhx_skyblue'); tabbar.setImagePath("../common/images/"); tabbar.addTab("a1", "HOME", "150px"); tabbar.addTab("a2", "MAINTENANCE", "150px"); tabbar.addTab("a3", "INQUIRY", "150px"); tabbar.addTab("a4", "REPORTING", "150px"); tabbar.addTab("a5", "CHANGE PASSWORD", "150px"); tabbar.addTab("a6", "LOGOUT", "150px"); tabbar.setHrefMode("iframes-on-demand"); tabbar.setContentHref("a1", "home.jsp"); tabbar.setContentHref("a2", "maintenance.jsp"); tabbar.setContentHref("a3", "inquiry.jsp"); tabbar.setContentHref("a4", "reporting.jsp"); tabbar.setContentHref("a5", "chgpassword.jsp"); tabbar.setContentHref("a6", "../logout.jsp"); tabbar.setTabActive("a1");

		var toolbar = tabbar.cells("a2").attachToolbar();
		toolbar.loadXML("../common/bm_mEditor.xml");
		toolbar.setIconsPath("../common/images/icons/");
		toolbar.attachEvent("onClick", function(id) {
		if (id == "register")
			tabbar.cells("a2").attachURL("user/add/addDefaulter.jsp"); 
		else if (id == "update")
			tabbar.cells("a2").attachURL("user/upd/updDefaulter.jsp");
		else if (id == "uplift")
			 tabbar.cells("a2").attachURL("user/upd/upliftDefaulter.jsp");
		else if (id == "segment")
			 tabbar.cells("a2").attachURL("user/upd/updMktSegment.jsp");
		else if (id == "delete")
			tabbar.cells("a2").attachURL("user/del/delDefaulter.jsp");	 
		})
		
		var toolbar = tabbar.cells("a3").attachToolbar();
	toolbar.loadXML("../common/bm_iEditor.xml");
		toolbar.setIconsPath("../common/images/icons/");
		
		toolbar.attachEvent("onClick", function(id) {
		if (id == "inquiry")
			tabbar.cells("a3").attachURL("user/inq/inqDefaulter.jsp?typ=G");	 
		else if (id == "asatdate")
			tabbar.cells("a3").attachURL("user/inq/inqAsAtDate.jsp?typ=D");	 
		else if (id == "daterange")
			tabbar.cells("a3").attachURL("user/inq/inqDateRange.jsp?typ=R");	 
		})
  </script>

bm_mEditor.xml

<?xml version="1.0"?>

bm_iEditor.xml

<?xml version="1.0"?>

Hi Alexandra,

Attached are my code. From the code above I have 6 tabs. Each tabs attached to their own page. For tab a2 and a3 I attach toolbar on it. It all working fine right now.

Select tab a3 (Inquiry). It will load (inquiry.jsp) screen.
A set of menu will be display on the toolbar for inquiry. Screen still display (inquiry.jsp).
Select “General Inquiry” on the toolbar, a inquiry form (inqDefaulter.jsp) screen will be display.
Select tab a2 (Maintenance). It will load (maintenance.jsp) screen.
5 A set of menu will be display on the toolbar for maintenance.Screen still display (maintenance.jsp).
6 Select “Register New Defaulter” on the toolbar, a registration form (addDefaulter.jsp) screen will be display.
Problem:
Select tab a1 (Home). It will load home that is the an application landing page.
Click back on tab a2 (Maintenance) or tab a3 (Inquiry). This were the problem occurs.

Suppose when I click back on the tab a2 it should load the (maintenance.jsp) page instead of displaying back the (addDefaulter.jsp) that was previously selected. It also happen when I click on the a3 tab for Inquiry. I will display back the (inqDefaulter.jsp) instead of displaying the (inquiry.jsp).

How to resolved this. Hope my explaination above make you clear.
Can I attach an icon on the tab

Alexandra · May 10, 2011, 1:37pm

Hi,

please attach the completed demo - a ready sample with all necessary files (it should not contain server-side scripts).

hal.xie · November 5, 2015, 12:36am

Hi Alex,

I am using Suit v4.5 Pro.

Tabbar is correctly created. My problem is the sub-pages couldn’t be opened (see below: cbd_contacts.php) via attachURL. Any possible reasons?

Any difference between business.cells(“a2”).attachURL() and business.tabs(“a2”).attachURL()? both not working for me.

thanks,

My code:

<?php if(is_readable("actmanagement/cbd_contacts.php")) echo "Yes"; ?>

//window.onload = function(){

		business = new dhtmlXTabBar("s_business");
		
		business.addTab("a1", "Contacts", null, null, false);			
		business.addTab("a2", "Referrals", null, null, true);

		business.cells("a1").attachURL("actmanagement/cbd_contacts.php");
		business.cells("a2").attachURL("actmanagement/cbd2_contacts.php");
		
		//business.tabs("a1").attachURL("actmanagement/cbd_contacts.php");
		//business.tabs("a2").attachURL("actmanagement/cbd2_contacts.php");

	//}
</script>

Darya · November 6, 2015, 2:41pm

Hi, hal.xie
Provided data is not enough. Please, provide completed demo to inspect it locally.
You can send in on support [a] dhtmlx.com
docs.dhtmlx.com/auxiliary_docs__ … pport.html