Tabbed dialog contol - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Tabbed dialog contol

tell me how to create the tabbed dialog control using
the HTML. As I am project that needs the tabbed dialog
control into a single form and which contains the 4 tabs
as result,contents,search and settings.

































Comments

  • WeirdofreakWeirdofreak Posts: 439Member
    [b][red]This message was edited by Weirdofreak at 2004-4-30 7:53:52[/red][/b][hr]
    You forgot to say please. ;-)

    If I understand correctly, you want to be able to click links and change the contents of a div, correct? Well, you can't do it with HTML alone. You need Javascript and CSS as well. Try this, although I haven't tested it:

    [code]


    function show (obj) {
    var ids = ['box1','box2','box3','box4'];
    for (i = 0; i < ids.length; i++) {
    if (obj == ids[i])
    document.getElementById(obj).style.display = 'block';
    else
    document.getElementById(ids[i]).style.display ='none';
    }
    }


    div { display: none; }
    div.first { display: block; }



    First tab
    Second tab
    Third tab
    Fourth tab

    This shows to begin with.


    This doesn't.


    Nor this...


    ...or this.


    [/code]

    Like I said, I haven't tested it, so it may completely fail to work. Play around with stlyes to make it look how you want.
  • sanjeevkumarsanjeevkumar Posts: 3Member
    : [b][red]This message was edited by Weirdofreak at 2004-4-30 7:53:52[/red][/b][hr]
    : You forgot to say please. ;-)
    :
    : If I understand correctly, you want to be able to click links and change the contents of a div, correct? Well, you can't do it with HTML alone. You need Javascript and CSS as well. Try this, although I haven't tested it:
    :
    : [code]
    :
    :
    : function show (obj) {
    : var ids = ['box1','box2','box3','box4'];
    : for (i = 0; i < ids.length; i++) {
    : if (obj == ids[i])
    : document.getElementById(obj).style.display = 'block';
    : else
    : document.getElementById(ids[i]).style.display ='none';
    : }
    : }
    :
    :
    : div { display: none; }
    : div.first { display: block; }
    :
    :
    :
    : First tab
    : Second tab
    : Third tab
    : Fourth tab
    :

    : This shows to begin with.
    :

    :

    : This doesn't.
    :

    :

    : Nor this...
    :

    :

    : ...or this.
    :

    :
    : [/code]
    :
    : Like I said, I haven't tested it, so it may completely fail to work. Play around with stlyes to make it look how you want.
    :

  • sanjeevkumarsanjeevkumar Posts: 3Member
    : : [b][red]This message was edited by Weirdofreak at 2004-4-30 7:53:52[/red][/b][hr]
    : : You forgot to say please. ;-)
    : :
    : : If I understand correctly, you want to be able to click links and change the contents of a div, correct? Well, you can't do it with HTML alone. You need Javascript and CSS as well. Try this, although I haven't tested it:
    : :
    : : [code]
    : :
    : :
    : : function show (obj) {
    : : var ids = ['box1','box2','box3','box4'];
    : : for (i = 0; i < ids.length; i++) {
    : : if (obj == ids[i])
    : : document.getElementById(obj).style.display = 'block';
    : : else
    : : document.getElementById(ids[i]).style.display ='none';
    : : }
    : : }
    : :
    : :
    : : div { display: none; }
    : : div.first { display: block; }
    : :
    : :
    : :
    : : First tab
    : : Second tab
    : : Third tab
    : : Fourth tab
    : :

    : : This shows to begin with.
    : :

    : :

    : : This doesn't.
    : :

    : :

    : : Nor this...
    : :

    : :

    : : ...or this.
    : :

    : :
    : : [/code]
    : :
    : : Like I said, I haven't tested it, so it may completely fail to work. Play around with stlyes to make it look how you want.
    : :
    :
    : very very Thank you Mr.Weirdofreak for help me. I worked on your given code and it worked. once again Thank you.

Sign In or Register to comment.