[JS/CSS] Dynamisch Tabbladen maken, mogelijk??

[Woudloper]

Ik heb een idee... Maar weet niet of het mogelijk is, gezocht heb ik al wel, maar vinden kon ik het niet....

Binnen een JavaScript Object genaamd 'Product' zit een Array met Leveranciers, ook Objecten. Bijvoorbeeld:

code:

function product(naam, eigenschappen, leverancier) {
    this.naam = naam;
    this.eigenschappen = eigenschappen;
    this.leveranciers[this.leveranciers.length] = leverancier;
}

function leverancier(naam, adres, etc.) {
    this.naam = naam;
    this.adres = adres;
    this.etc = etc;
}

Nu wil ik dit laten tonen in een tabel. Bovenin de tabel staan dan de productgegevens en onderin (laatste gemergede cell) staan tabbladen voor elke leverancier.. en daaronder (na het klikken op een tabblad) staat er dan de info van de leverancier...

Weten jullie of dit mogelijk is??? en zo ja, waar ik ergens dan een voorbeeld kan vinden....

[Dennis]

Ik snap het niet, ligt het aan mij?
Als ik het zo zie zou PHP trouwens wel makkelijker zijn.

[Woudloper]

Ik snap het niet, ligt het aan mij?
Als ik het zo zie zou PHP trouwens wel makkelijker zijn.

Zoiets bedoel ik:

code:

|------------------------------------|
|Product                     |
|Naam:      test             |
|Eigenschappen: testerdetest       |
|                       |
|Leveranciers:               |
|  Tab 1  |  Tab 2  |  Tab 3  | |
|------------------------------------|
| Naam: leveranciersnaam         |
| Adres Adres leverancier       |
|------------------------------------|

Ik hoop dat dat duidelijker is....

[Mithrandir]

't zou op zich mogelijk moeten zijn.

Weet 't niet precies, maar je kan misschien wel layers gebruiken... Dat werkt waarschijnlijk!

[Verwijderd]

Er zijn meerdere mogelijkheden...zoals de lagen in verschillende layers/divs zetten en die zicht/onzichtbaar maken of één layer gebruiken en die met JS document.writen, zou kunnen...

Waar komt de data vandaan? Uit een database?

[Woudloper]

Er zijn meerdere mogelijkheden...zoals de lagen in verschillende layers/divs zetten en die zicht/onzichtbaar maken of één layer gebruiken en die met JS document.writen, zou kunnen...

Ik zelf zat te denken aan een tabel en deze met behulp van JS op te bouwen... (zoiets heb ik al gedaan, weet alleen niet of je tabbladen kan maken??)

Waar komt de data vandaan? Uit een database?

Ja en nee... De data komt uit een Array gevuld met objecten... Maar deze array is gecreeerd vanuit een database..

zie voor een voorbeeld:

http://verwijderddomain.nl/GoT/test.html

[ Voor 8% gewijzigd door Woudloper op 18-09-2005 23:31 ]

[crisp]

Ideetje: bouw de tabs met een tabel (eventueel met achtergrondplaatjes - je hebt dan 2 plaatjes nodig: 1 voor een gesloten en 1 voor een open tab; je kan echter ook met borders werken). De cellen kan je van een onClick actie voorzien.
De gegevens daaronder pomp je dan in een divje.

[crisp]

Ik heb ff wat in elkaar geflanst Hier te bezichtigen
Het geheel met alle plaatjes is ook in zipsmaak verkrijgbaar

[Dennis]

Op dinsdag 04 december 2001 22:31 schreef crisp het volgende:
Ik heb ff wat in elkaar geflanst Hier te bezichtigen
Het geheel met alle plaatjes is ook in zipsmaak verkrijgbaar

Mooi gedaan. Maar wat is me dus afvraag is waarom rouwdsma dit met javascript wil oplossen

Uiteraard doe je die leuke wisselingen van layers met javascript, maar waarom niet gewoon al die divjes schrijven met php

[crisp]

Op woensdag 05 december 2001 07:12 schreef dennisdotcom het volgende:

[..]

Mooi gedaan. Maar wat is me dus afvraag is waarom rouwdsma dit met javascript wil oplossen

Uiteraard doe je die leuke wisselingen van layers met javascript, maar waarom niet gewoon al die divjes schrijven met php

omdat niet alle providers dit ondersteunen misschien?

[Woudloper]

Ik heb ff wat in elkaar geflanst Hier te bezichtigen

Ziet er goed uit crisp, zelf had ik ook iets in elkaar geflanst Zie hier

Uiteraard doe je die leuke wisselingen van layers met javascript, maar waarom niet gewoon al die divjes schrijven met php

Net zoals crisp zegt omdat niet alle providers PHP ondersteunen en omdat ik zoals in het voorbeeld te zien was gebruik maak van objecten welke middels bepaalde events worden opgebouwd...

[ Voor 10% gewijzigd door Woudloper op 18-09-2005 23:31 ]

[chuxiej]

ga naar www.ilse.nl bekijk de sourch van de tab blaaden zou ik zegge

[Woudloper]

ga naar www.ilse.nl bekijk de sourch van de tab blaaden zou ik zegge

Dat was ook mijn eerste gedachte, maar dat was niet helemaal wat ik zocht....

Zoals je kan zien, heb ik met hulp van crisp iets werkend gekregen.

[ Voor 10% gewijzigd door Woudloper op 18-09-2005 23:32 ]

[crisp]

En ik moest en zou het gelijk krijgen aan de windows tabbladen (zelfde idee verder).
Ik heb de preload nu ook geoptimaliseerd zodat het geheel pas zichtbaar wordt als alle plaatjes geladen zijn.
Nu nog cross-browser maken (is nu nog erg IE-only)

[Woudloper]

En ik moest en zou het gelijk krijgen aan de windows tabbladen (zelfde idee verder).
Ik heb de preload nu ook geoptimaliseerd zodat het geheel pas zichtbaar wordt als alle plaatjes geladen zijn.
Nu nog cross-browser maken (is nu nog erg IE-only)

Ziet er leuk uit, lijkt erg op de windows tabbladen... Jammer dat het wat lang duurt met laten

Bij selecteren van de tabs kan je nog dit in het TD zetten:

code:

OnSelectStart="return false;"

Zorgt ervoor dat de teksten niet geselecteerd worden..

[crisp]

Op woensdag 05 december 2001 15:56 schreef rwoudsma het volgende:

[..]

Ziet er leuk uit, lijkt erg op de windows tabbladen... Jammer dat het wat lang duurt met laten

Bij selecteren van de tabs kan je nog dit in het TD zetten:

code:

OnSelectStart="return false;"

Zorgt ervoor dat de teksten niet geselecteerd worden..

Het inladen zat idd nog een probleempje in; ik schreef de HTML al terwijl ik ook nog de plaatjes aan het preloaden was; dit heb ik gewijzigd, met een snellere timeout op de preloadcheck (was 200 ms per plaatje )

Die OnSelectStart heb ik er ook nog ff ingebakken.

[Verwijderd]

Hoe wil met PHP oplossen die tabbladen dynamisch laten veranderen dan ??

PHP kent geen DOM en kan je layers niet aanspreken (SS) en JS (CS) wel...

[crisp]

Voor de echte freaks heb ik het nog even ingebakken in een dialogwindow
Oh ja, hij is draggable

Leuk dat DHTML

[Juup]

Is het niet mooier on de tabbladen al te laten zien onMouseDown?

[crisp]

Op donderdag 06 december 2001 16:22 schreef Jaaap het volgende:
Is het niet mooier on de tabbladen al te laten zien onMouseDown?

Is waar, kan je nagaan dat ik daar helemaal niet meer op let... ff fixen...

[Pelle]

Op donderdag 06 december 2001 15:42 schreef crisp het volgende:
Voor de echte freaks heb ik het nog even ingebakken in een dialogwindow
Oh ja, hij is draggable
Leuk dat DHTML

Gaaf man! Moest ik me ook maar eens in gaan verdiepen..

* Pelle een actiepuntje voor pellePaint

[BtM909]

Waarom moet je zo moeilijk doen, Ruben ???


Remember me ==> Randy D. van HoHo!

[Woudloper]

Moeilijk doen is het niet Gewoon kijken of ik alle relaties in tabbladen kan stoppen... Ziet het er een beetje simpel uit voor de normale gebruikers...

[ Voor 35% gewijzigd door Woudloper op 18-09-2005 23:32 ]

[Woudloper]

Tabellen geïntegreerd met m'n prutswerk, maar...

Ja, het gaat de goede kant op! Heb alleen nog een klein probleempje en ik zie maar niet wat de oplossing is...

Als je naar bovenstaande URL gaat, dan kan je alle personen bekijken met daarbij hun relaties... Alleen is het zo dat de breedte van de Header (relatie X) steeds verspringt als je erop klikt. Bij meerdere relaties (bv Voornaam Achternaam) gaat het gedeeltelijk goed.... Weet één van jullie wat ik wellicht kan doen.

De JS sources staan in:

http://verwijderddomain.nl/GoT/

[ Voor 16% gewijzigd door Woudloper op 18-09-2005 23:33 ]

[crisp]

In je TabContainer.js dit

code:

s+= "<td id =\"EmptyCell\">&nbsp;</td>";

vervangen door dit

code:

s+= "<td id =\"EmptyCell\" width=\"" + ((5 - this.tabs.length) * w) + "\">&nbsp;</td>";

oftwel ook precies de breedte van je lege cel meegeven (waarom weet ik niet, maar het werkt).

Nog een tip: als je in je JS nou enkele quotes gebruikt voor je variabelen, dan hoef je de dubbele quotes daarin niet te escapen. Verder hoeven in HTML numerieke waarden ook niet gequote te worden.

Voorbeeld:

code:

s+= '<td id ="EmptyCell" width=' + ((5 - this.tabs.length) * w) + '>&nbsp;</td>';

leest een stuk makkelijker...

[Woudloper]

oftwel ook precies de breedte van je lege cel meegeven (waarom weet ik niet, maar het werkt).

* Woudloper vindt het ook erg vreemd, maar bedankt voor de oplossing

Nog een tip: als je in je JS nou enkele quotes gebruikt voor je variabelen, dan hoef je de dubbele quotes daarin niet te escapen. Verder hoeven in HTML numerieke waarden ook niet gequote te worden.

Thanx, was daar eigenlijk mee begonnen omdat ik tijdens de database import niet de mogelijkheid heb om de single quotes (') om te vormen naar \', dus heb ik maar gebruik gemaakt van de double quotes...

[ Voor 3% gewijzigd door Woudloper op 18-09-2005 23:33 ]

[TGEN]

maak van

code:

this.leveranciers[this.leveranciers.length] = leverancier;

dittuh:

code:

this.leveranciers[this.leveranciers.length] = leverancier[this.leveranciers.length];

Waarom? Nou, telkens als je anders een new Product aanmaakt zou je maar 1 (een) leverancier toevoegen! da's toch niet de bedoeling... En zorg natuurlijk wel dat leverancier een array is van leverancier() -en .

[Woudloper]

In je TabContainer.js dit
[..]
vervangen door dit
[..]

Crisp gedaan en het werkt steeds beter... Moet nu maar weer achter mijn andere kleine puntjes aan, maar bedankt voor de tips...

* Woudloper vindt jou dialog windowtjes erg cool..

Op maandag 10 december 2001 18:41 schreef TGEN het volgende:

[..]

Waarom? Nou, telkens als je anders een new Product aanmaakt zou je maar 1 (een) leverancier toevoegen! da's toch niet de bedoeling... En zorg natuurlijk wel dat leverancier een array is van leverancier() -en .

Snap je niet helemaal, praten we nu langs elkaar heen of heb ik dat mis??

[crisp]

No thanks. Ik heb de dialog nu object-georienteerd opgezet waardoor je er makkelijk meer aan kan maken; nu nog met de tabbladen hetzelfde doen (makkelijk on the fly tabs kunnen toevoegen).
Eerst eens kijken of ik het ook nog x-browser krijg

[Woudloper]

Ik heb de dialog nu object-georienteerd opgezet waardoor je er makkelijk meer aan kan maken;

Het zou trouwens ook nog grappig zijn om de kleuren van de huidige windows instellingen over te kunnen nemen

nu nog met de tabbladen hetzelfde doen (makkelijk on the fly tabs kunnen toevoegen).
Eerst eens kijken of ik het ook nog x-browser krijg

Ik had mijn simpele versie van de tabbladen ook al een beetje OO gemaakt en het is wel eenvoudig....

[crisp]

Op woensdag 12 december 2001 09:10 schreef rwoudsma het volgende:

Het zou trouwens ook nog grappig zijn om de kleuren van de huidige windows instellingen over te kunnen nemen

Dat schijnt dus inderdaad te kunnen (wel IE only offcourse).
Eerst eens kijken hoe ik dat met de plaatjes ga doen dan. Hier en daar zal er dan waarschijnlijk wel PHP bij komen kijken.
Zoals die gradient titlebar, die is wel aanpasbaar qua kleur, maar dat is een tabel met cellen van 1 pixel breed; niet echt efficient dus...

[Woudloper]

[..]

Dat schijnt dus inderdaad te kunnen (wel IE only offcourse).

Ik dacht dat het werd ondersteund door CSS2 (volgens Topstyle dan..)

Eerst eens kijken hoe ik dat met de plaatjes ga doen dan. Hier en daar zal er dan waarschijnlijk wel PHP bij komen kijken.
Zoals die gradient titlebar, die is wel aanpasbaar qua kleur, maar dat is een tabel met cellen van 1 pixel breed; niet echt efficient dus...

Weet jij trouwens waarom dit gebeurt, is wel erg veel???

[crisp]

Op woensdag 12 december 2001 09:56 schreef rwoudsma het volgende:

Weet jij trouwens waarom dit gebeurt, is wel erg veel???
[afbeelding]

Per dialog zijn het 11 plaatjes; en sommige plaatjes worden in meerdere cellen gebruikt. Misschien telt hij dat allemaal als 1, en dan maal 6 dialogboxen, dan krijg je aardig wat items ja.
Zelf heb ik dit echter nog niet gezien...

[Woudloper]

Op woensdag 12 december 2001 10:36 schreef crisp het volgende:

[..]

Per dialog zijn het 11 plaatjes; en sommige plaatjes worden in meerdere cellen gebruikt. Misschien telt hij dat allemaal als 1, en dan maal 6 dialogboxen, dan krijg je aardig wat items ja.
Zelf heb ik dit echter nog niet gezien...

Is het wellicht niet handiger om in plaats van de plaatjes gebruik te maken van stylesheets... Zoals bv:

code:

.Geselecteerd {
    cursor:      hand; 
    text-align:      center; 
    border:      threedhighlight outset thin; 
    font-weight:         bold; 
    border-bottom:       none;
}

.NietGeselecteerd {
    cursor:      hand; 
    text-align:      center; 
    border:      threedhighlight groove thin
    border-bottom-style:     inset;
}

.InhoudVanTab { 
    border:      threedhighlight outset thin; 
    padding:         20pt;
    border-top:      none;
}

was maar een ideetje waar ik gisteravond nog ff mee aan het spelen was...

[Verwijderd]

Waarom moeilijk doen jongens? Zoek bij msdn eventjes op MPC control. Oftewel MultiPage Control.

[crisp]

Op vrijdag 21 december 2001 09:05 schreef rwoudsma het volgende:

[..]

Is het wellicht niet handiger om in plaats van de plaatjes gebruik te maken van stylesheets... Zoals bv:

code:

.Geselecteerd {
    cursor:      hand; 
    text-align:      center; 
    border:      threedhighlight outset thin; 
    font-weight:         bold; 
    border-bottom:       none;
}

.NietGeselecteerd {
    cursor:      hand; 
    text-align:      center; 
    border:      threedhighlight groove thin
    border-bottom-style:     inset;
}

.InhoudVanTab { 
    border:      threedhighlight outset thin; 
    padding:         20pt;
    border-top:      none;
}

was maar een ideetje waar ik gisteravond nog ff mee aan het spelen was...

Dat kan idd, helaas is dat IE/windows only, en het is juist mijn bedoeling om het uiteindelijk crossbrowser/crossplatform te maken...