DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by ptityop on May 28, 2009 07:47

open dhtmlx forum

Hw does it work?? (Layout & Header)

Hi!!
Well I must admit I have some troubles understanding how all this works reading your manual full of coding ... I am having pbs with the most basic thing, trying to use a layout and menu, followed the instructions but nothing happens... Always get a very nice blank page... checked all links everything ok but there is something I am propably missing...my question is ... is there anywhere I could find a tutorial designed for total beginners like me ? Many thanks in advance

Answer posted by Alex (support) on May 28, 2009 09:07

Hello,�

the documentation ( http://dhtmlx.com/docs/products/docsExplorer/index.shtml) contains complete description of using our components.

Also package contains different samples. We recommend to start with ready samples:

dhtmlxLayout/samples/ (http://dhtmlx.com/docs/products/dhtmlxLayout/samples/)

dhtmlxMenu/samples/�(http://dhtmlx.com/docs/products/dhtmlxMenu/samples/)

�The menu implementation is:

dhtmlxLayout/samples/components/menu.html ( http://dhtmlx.com/docs/products/dhtmlxLayout/samples/components/menu.html )

Regarding the black page. Please, be sure that all necessary libraries are included. If the issue still persists, you can provide the demo. We'll try to help.

Answer posted by ptityop on May 28, 2009 12:42

Thanks for your reply...well I try ;;but not simple really...from what I see what I really need for my project is Tabbar,I'd like to use one of the predesigned template which seems the best option so looking at the doc , I get this piece of code :

<

<div id="a_tabbar" style="width:400;height:100"></div>
<div id="b_tabbar" style="width:400;height:100"></div>
<script> 
    //use one of predefined schemas
    tabbar=new dhtmlXTabBar("a_tabbar","top");
    tabbar.setImagePath("../../imgs/");
    tabbar.setStyle("silver");
    
    //define custom schema. paths are related to images directory set with setImagePath method
    customStyleSchema = ["custom/p_left.gif","custom/p_middle.gif","custom/p_right.gif",
                        "custom/a_left.gif","custom/a_middle.gif","custom/a_right.gif",
                        "custom/p_middle_over.gif",5,6,6,false,false,false];
    
    tabbar2=new dhtmlXTabBar("c_tabbar","top");
    tabbar2.setImagePath("../../imgs/");
    tabbar2.setStyle("custom");</script>

>

But I really don't see how to place that in an html page .... I am a bit code literatte but not familiar with this at all.... but I cannot see how this piece of code can work as a standalone... could you please be kind enough to show me "us", an example of clean html page with this code inserted so we can just duplicate and understand ...
For information I have put the Tabbar folders on my local server and have a regular index.html page ;;blank waiting to know what code should go where...
Many thanks for your time

Answer posted by ptityop on May 28, 2009 13:01

ok...well after fiddling around seems I managed to get somewhere.... the nly thing I still cannot work out is how to insert the content into the tabs... :-)
Thanks a lot, here is where i am so far...:

<>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Predefined designs</title>
    <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxtabbar.css">

    <script src="codebase/dhtmlxcommon.js"></script>
    <script src="codebase/dhtmlxtabbar.js"></script>
</head>

<body>
<link rel='STYLESHEET' type='text/css' href='common/style.css'>
<table cellspacing="0" cellpadding="0" class="sample_header" border="0">
    <tr valign="middle">
        
        <td width="40" align="center"><img src="ommon/dhtmlxtabbar_icon.gif" border="0"></td>
        
        <td width="150" align="left" nowrap="true">Sample: dhtmlxTabbar</td>
        
        <td width="0" align="left" nowrap><b>Predefined designs</b></td>
        
        <td width="0" align="right"><a href="http://www.dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml">dhtmlxTabbar main page</a></td>
        
        <td width="50"><div class="sample_close"><a href="javascript:void(0);" onClick="self.close();"><img src="common/sample_close.gif" width="14" height="14" border="0" alt="X"></a></div></td>
    </tr>
</table>



    <table>
        <tr>
            <td>
                <h3>winDflt</h3>
                <div id="a_tabbar" style="width:612px; height:150px;"></div>
            </td> </tr>
            <tr>
            <td>
                <h3>Modern</h3>
                <div id="b_tabbar" style="width:612px; height:150px;"></div>
            </td> </tr>
            <tr>
            <td>
                <h3>Silver</h3>
                <div id="c_tabbar" style="width:612px; height:150px;"></div>
            </td> </tr>
    </table>
<br>
<script>
            //modernStyleSchema = ["modern/p_left.gif","modern/p_middle.gif","modern/p_right.gif","modern/a_left.gif","modern/a_middle.gif","modern/a_right.gif","modern/p_middle_over.gif",5,6,6,false,false,false];
            //silverStyleSchema = ["silver/p_left.gif","silver/p_middle.gif","silver/p_right.gif","silver/a_left.gif","silver/a_middle.gif","silver/a_right.gif","silver/p_middle_over.gif",5,6,6,false,false,false];

            tabbar=new dhtmlXTabBar("a_tabbar","top");
            tabbar.setImagePath("codebase/imgs/");
            tabbar.loadXML("tabs1.xml");

            tabbar2=new dhtmlXTabBar("b_tabbar","top");
            tabbar2.setImagePath("codebase/imgs/");
            tabbar2.setStyle("modern");
            tabbar2.setMargin(-1);
            tabbar2.loadXML("tabs1.xml");

            tabbar3=new dhtmlXTabBar("c_tabbar","top");
            tabbar3.setImagePath("codebase/imgs/");
            tabbar3.setStyle("silver");
            tabbar3.setMargin(-1);
            tabbar3.loadXML("tabs1.xml");

            /*tabbar4=new dhtmlXTabBar("d_tabbar","top",45);
            tabbar4.setImagePath("codebase/imgs/");

            tabbar4.setMargin(-20);
            tabbar4.setStyle("winRound");
            tabbar4.loadXML("tabs1.xml");*/
    </script>


<table callspacing="0" cellpadding="0" border="0" class="sample_footer"><tr><td style="padding-left: 8px;">© <a href="http://www.dhtmlx.com">DHTMLX LTD</a>. All rights reserved</td></tr></table>


</body>
</html>

<\>

Answer posted by Alex (support) on May 29, 2009 02:20

Hello,

content can be added using different ways.

For example, in case of "iframes" loading mode you can define "href" attribute in the xml and that page will be loaded into tabbar iframe:
<?xml version="1.0"?>
<tabbar hrefmode="iframes">
    <row>
        <tab id="tab1" width='100px' selected="1" href="http://google.com">Google</tab>
....
    </row>
</tabbar>

Please, take a look at the samples that demonstrates adding content:

dhtmlxTabbar/samples/loading_creating_tabs_content/

http://dhtmlx.com/docs/products/dhtmlxTabbar/samples/loading_creating_tabs_content/

Answer posted by ptityop on May 29, 2009 05:08

Thanks for your help...I finally managed to get somewhere.... Need to perfect all this now...thanks for your time