[JavaScript] Span object met custom methods - Softwareontwikkeling

vrijdag 7 mei 2004 16:19

Acties:

Webdeveloper

Topicstarter

Hallo!

In JavaScript probeer ik custom defined functions toe te voegen aan een <span> tag/object. Ik heb het idee dat dat echter niet mogelijk is. Wat ik zou willen komt het best tot uitdrukking in het volgende voorbeeld (wat dus niet werkt).

-------------------------------------------------------------------

<head>

<script language='JavaScript1.2'>

Span.prototype.printHtml = function() {
alert ( "Bla!" );
}

</script>

</head>

<body>

<span onClick='this.printHtml()'>Click op mij</span>

</body>

--------------------------------------------------------------------

Mijn vraag is nu: Is het mogelijk om dit toch op een of andere manier voor elkaar te krijgen ... eventueel wellicht door gebruik van een andere tag (XML?).

Ik kijk uit naar de reacties.

vrijdag 7 mei 2004 16:24

Acties:

Clay

cookie erbij?

in echte browsers is dat heel simpel:

code:

<script type="text/javascript">

    HTMLSpanElement.prototype.printHTML = function() {
        alert("bla!");
    }

</script>

<span onclick="this.printHTML()">Klik op mij</span>

in IE zal je ff de spans moeten ophalen en runtime de functie eraan hangen.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 7 mei 2004 16:25

Acties:

Verwijderd

Clay... was me weer is voor

[ Voor 93% gewijzigd door Verwijderd op 07-05-2004 16:25 ]

vrijdag 7 mei 2004 16:25

Acties:

crisp

Devver

Pixelated

Nee, je kan op deze manier geen methods toekennen aan HTML-elementen, misschien zou je iets met behaviors kunnen doen en anders gewoon zoiets:

HTML:

1	<span onclick="printHTML(this)">klik</span>

edit

Clay: kan dat in echte browsers? nooit geweten

Je zou dan voor IE alsnog een behavior kunnen gebruiken.

[ Voor 26% gewijzigd door crisp op 07-05-2004 16:27 ]

Intentionally left blank

vrijdag 7 mei 2004 16:28

Acties:

gvanh

Webdeveloper

Topicstarter

Wow ... dat was snel...

Ik ga 'ns kijken of ik hiermee verder kom.

Mijn grote dank!

vrijdag 7 mei 2004 16:36

Acties:

gvanh

Webdeveloper

Topicstarter

Hmm... ik kom eigenlijk steeds uit bij de wortel van het probleem. Ik heb een prachtig JScript object gebouwd, genaamd tree_item (voor een menu-tree), dat alle eigenschappen bevat voor het betreffende tree item. De tree-items zijn vervolgens 'ge-nest', waardoor ieder tree-item eventueel een aantal child-items kan hebben ( een array van objecten ). Ook heeft ieder tree-item zijn eigen HTML al bij zich.

Nu komt het erop neer, dat deze structuur van tree-item objecten gevisualiseerd moet worden. Daarbij wil ik dus gebruik gaan maken van <span> tags, die op dezelfde manier zijn gerangschikt als de tree-item objecten, waarbij dus iedere <span> tag een corresponderend tree-item object heeft. Als er vervolgens een tak van de boom moet worden uitgeklapt, hoeft een tree-item alleen maar zijn corresponderende <span> te voorzien van de juiste innerHTML en klaar is Kees.

Mijn probleem is: Hoe leg ik een koppeling tussen tree-item en <span>.

Hebben jullie - als zijnde mijn grote helden (slijm slijm) - wellicht suggesties?

vrijdag 7 mei 2004 16:44

Acties:

crisp

Devver

Pixelated

als je je span aanmaakt kan je de referentie toch gewoon opslaan in je tree?

JavaScript:

var menu = document.getElementById('menu');
var newspan = document.createElement('span');
newspan.appendChild(document.createTextNode('inhoud'));
menu.appendChild(newspan);
tree_item[index] = newspan;

Intentionally left blank

vrijdag 7 mei 2004 16:55

Acties:

gvanh

Webdeveloper

Topicstarter

Crisp: Dat is inderdaad wat ik bedoel ... geweldig!

Alleen hoe moet dan de <span> eruit gaan zien? Want hoe kom je dan bij een klik op de <span> weer bij de goeie tree_item uit?

vrijdag 7 mei 2004 17:22

Acties:

crisp

Devver

Pixelated

gvanh schreef op 07 mei 2004 @ 16:55:
Crisp: Dat is inderdaad wat ik bedoel ... geweldig!

Alleen hoe moet dan de eruit gaan zien? Want hoe kom je dan bij een klik op de weer bij de goeie tree_item uit?

wat ik vaak doe is een custom property toevoegen:

JavaScript:

1 2	var newspan = document.createElement('span'); newspan.setAttribute('index', index);

je kan dan in code weer je index ophalen en daarmee dus je juiste tree-item benaderen:

JavaScript:

function clickHandler(e) {

  var index = this.getAttribute('index');
  var cur_tree_item = tree_item[parseInt(index, 10)];

}

Intentionally left blank

vrijdag 7 mei 2004 17:24

Acties:

crisp

Devver

Pixelated

als je HTML structuur altijd hetzelfde is zou je ook gewoon met DOM methoden kunnen bepalen of er een sub-item is en daar iets mee doen; zoiets gebruik ik in dit menu
functie showMenu/hideMenu kijkt gewoon vanuit een li of er een ul in genest is, en laat deze zien cq verbergt deze.

[ Voor 23% gewijzigd door crisp op 07-05-2004 17:25 ]

Intentionally left blank

vrijdag 7 mei 2004 17:27

Acties:

Verwijderd