CSS: Behavior

Behavior je vlastnost CSS je, která umožňuje přiřadit prvku nejen styl, ale i funkci Lze ho použít s JavaScriptem. Funguje jen v Internet Exploreru 4 a vyšším. Jednoduchý příklad.

Tabulky

článek	datum	Jméno Autora
hudba	10.9.2003	J. Novák
video	12.9.2003	J. Novák
WAP	15.9.2003	J. Novák
meta	18.9.2003	J. Novák

Nic zvláštního, ale bez CSS byste se museli v každém řádku tabulky odvolávat na nějaké funkce a to vůbec není nutné s použitím šablon htc

Zdrojový kód tabulky a šablony

Tabulka:

<html>
<head>
	<META http-equiv="Content-language" content="cs">
	<META http-equiv="content-type" content="text/html; charset=windows-1250">
	<title>[tabulka pomocí behavior, CSS a JavaScriptu]</title>
	<style>
	table {border-collapse: collapse; font-family: Verdana; font-size: 11px}
	tr {background-color: white; border: 1px solid gray; behavior: url('row.htc')}
	</style>
</head>

<body>
<table border="1" bordercolor="#368af1" bgcolor="white">
<tr style="behavior: none"><th>článek</th><th>datum</th><th>Jméno Autora</th></tr>
	<tr><td>hudba</td><td>10.9.2003</td><td>J. Novák</td></tr>
	<tr><td>video</td><td>12.9.2003</td><td>J. Novák</td></tr>
	<tr><td>WAP</td><td>15.9.2003</td><td>J. Novák</td></tr>
	<tr><td>meta</td><td>18.9.2003</td><td>J. Novák</td></tr>
</table>


</body>
</html>

Šablona row.htc

<component>
	<attach event="onclick" handler="cik">
	<attach event="onmouseover" handler="hover">
	<attach event="onmouseout" handler="ut">
	<script>
		function cik(){
		if((this.style.backgroundColor!='#7d94fb') && (this.style.backgroundColor!='#bfbfbf')){
		this.style.backgroundColor='#7d94fb';
		this.style.color='white';
		}
		else {this.style.backgroundColor='white';
		this.style.color='black';
		}
		}
		function hover(){
		if(this.style.backgroundColor!='#7d94fb')
		this.style.backgroundColor='#75aaf9';
		if(this.style.backgroundColor=='#7d94fb')
		this.style.backgroundColor='#bfbfbf';
		}
		function ut(){
		if(this.style.backgroundColor=='#75aaf9')
		this.style.backgroundColor='white';
		if(this.style.backgroundColor=='#bfbfbf')
		this.style.backgroundColor='#7d94fb';
		}
	</script>
</component>

Podrobně: JavaScript a CSS

Doporučuji

Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.

Potřebujete poradit?