Tab-tool in tabbar

Suite and Optimus Suite 5
#1

Can I insert tab-tool inside tabbar?, I call it “tab-tool” that I want attach a button (its can be menu) top corner i call “Username/John” and inside the button I will attach dhtmlxPopup, there are Setting, Logout and other buttons.
How can I do the layout like this one?

#2

Please, provide us image with exepted result.

#3

I migrate from jeasyui to dhtmlx but I can not do as following :

#4

You can try the next demo:

[code]

tabbar 
<style>
    html, body {
       width: 100%;
       height: 100%;
       margin: 0px;
       overflow: hidden;
       background-color:white;
    }
</style>

	<script>
	function doOnLoad(){
        tabbar = new dhtmlXTabBar("userTab", "top");
        tabbar.setSkin('dhx_skyblue');
        tabbar.setImagePath("../dhtmlxTabbar/codebase/imgs/");
        tabbar.setSkinColors("white","#FFFACD");
        tabbar.setStyle("dhx_skyblue");
        tabbar.addTab("a1", "Tab 1-1", "100px");
        tabbar.addTab("a2", "Tab 1-2", "100px");
        tabbar.addTab("a3", "Tab 1-3", "100px");
        tabbar.setTabActive("a1");

        t = document.createElement("DIV");
        t.style.position = "absolute";
        t.style.height = "27px";
        t.style.top = "-1px";
        t.style.right = "0px";
        t.style.zIndex = 1001;

        tabbar._tabAll.appendChild(t);

        tb = new dhtmlXToolbarObject(t,"dhx_skyblue");
        tb.setIconsPath("../dhtmlxToolbar/samples/common/imgs/");
        tb.addButton("username", 0, "User Name", "user.png");

        tb.cont.style.background="none";
        tb.cont.childNodes[2].style.display="none";
        tb.cont.childNodes[3].style.display="none";

        myPop = new dhtmlXPopup({
            toolbar: tb,
            id: "username"
        });
        myPop.attachList("name,price", [{
            id: 1,
            name: "Ronaldo"
        }, {
            id: 2,
            name: "Messi"
        }, {
            id: 3,
            name: "Roben"
        }]);

    }
	</script>
</head>

<body onload="doOnLoad()">
	<div align="center" valign="middle">
		<div id="userTab" class="dhtmlxTabBar" style="width:700px; height:280px" offset="100px">
		</div>
	</div>

</body>
[/code] Result is the next:
Untitled.png743×190 4.7 KB

#5

Thanks Arya, I have try what you explained but the div position overrides the tabbar header/tab-scroll-right, How to move tab-scroll-right navigation before div tag?

#6

Find line
t.style.right = “0px”;
in my sample and increase it till 15 or 20 px.

#7

Its not work when many tabs opened or full, change right margin div tag still overide username label and nav-scroll-right on the position

#8

Replace code for demo with this:

[code]

tabbar 
    <style>
    html, body {
       width: 100%;
       height: 100%;
       margin: 0px;
       overflow: hidden;
       background-color:white;
    }
</style>

	<script>
        var tabbar, t, tb, myPop;
	function doOnLoad(){
        tabbar = new dhtmlXTabBar("userTab", "top");
        tabbar.setSkin('dhx_skyblue');
        tabbar.setImagePath("../dhtmlxTabbar/codebase/imgs/");
        tabbar.setSkinColors("white","#FFFACD");
        tabbar.setStyle("dhx_skyblue");
        tabbar.addTab("a1", "Tab 1-1", "100px");
        tabbar.addTab("a2", "Tab 1-2", "100px");
        tabbar.addTab("a3", "Tab 1-3", "100px");
        tabbar.addTab("a4", "Tab 1-4", "100px");
        tabbar.addTab("a5", "Tab 1-5", "100px");
        tabbar.addTab("a6", "Tab 1-6", "100px");
        tabbar.addTab("a7", "Tab 1-7", "100px");
        tabbar.addTab("a8", "Tab 1-8", "100px");
        tabbar.addTab("fakeEmptyTab", "", "110px");
        tabbar.setTabActive("a1");
        tabbar.disableTab("fakeEmptyTab");

        t = document.createElement("DIV");
        t.style.position = "absolute";
        t.style.height = "27px";
        t.style.top = "-1px";
        t.style.right = "15px";
        t.style.zIndex = 10000001;

        tabbar._tabAll.appendChild(t);

        tb = new dhtmlXToolbarObject(t,"dhx_skyblue");
        tb.setIconsPath("../dhtmlxToolbar/samples/common/imgs/");
        tb.addButton("username", 0, "User Name", "user.png");

        myPop = new dhtmlXPopup({
            toolbar: tb,
            id: "username"
        });
        myPop.attachList("name,price", [{
            id: 1,
            name: "Ronaldo"
        }, {
            id: 2,
            name: "Messi"
        }, {
            id: 3,
            name: "Roben"
        }]);

    }
	</script>
</head>

<body onload="doOnLoad()">
	<div align="center" valign="middle">
		<div id="userTab" class="dhtmlxTabBar" style="width:700px; height:280px" offset="100px">
		</div>
	</div>

</body>
[/code] And download little fix for tabbar scroll: dhtmlxtabbar_scroll_ext.rar (681 Bytes) 1) I created fake disabled tab to place it under toolbar button 2) attached extention will fix the scroll
#9

Thanks Darya, that’s work perfectly

#10

You are welcome!