| Autor | Zpráva | ||
|---|---|---|---|
| xxxObiWan Profil |
#1 · Zasláno: 12. 5. 2010, 14:54:45
Ahoj,
tohle bude určitě popsané na spoustě místech na netu, ale bohužel nevím co zadat do vyhledávání, ani nevim jestli ten nadpis je správně :-) Potřebuju vytvořit funkci např. zmenBarvuPisma(barva), která by se používala takto: document.getElementById('mujDiv').zmenBarvuPisma('red');nikoliv takto (to už umím): zmenBarvuPisma(document.getElementById('mujDiv'), 'red');Prosím aspoň o nasměrování na nějaký návod, popřípadě slovní spojení, které mám googlit ;-) Děkuju |
||
| Chamurappi Profil |
#2 · Zasláno: 12. 5. 2010, 15:33:44
Reaguji na xxxObiWana:
Zrovna nedávno zde padl podobný dotaz, viz Propašování nové funkce k prototypu libovolného elementu. |
||
| ah01 Profil |
#3 · Zasláno: 12. 5. 2010, 15:54:12
xxxObiWan:
Protože některé prohlížeče zacházejí s DOM objekty jinak než ostatní, není toto zajistit zcela triviální úkol. Pokud nemáš dobré znalosti JS a opravdu dobré důvody, proč to chceš implementovat sám, tak být tebou, bych se na to vykašlal. Spíš se zkus podívat na nějaký JS framework, který toto už nějakým způsobem řeší. Můžeš zkusit třeba: • jQuery – zde přímo nerozšiřuješ nativní HTMLElement, ale používáš wrapper objekt nad elementem a ten můžeš rozšiřovat dle libosti (v terminologii jQuery se jedná o plugin) • MooTools nebo Protptype – tyto frameworky jdou cestou rozšiřování HTMLElementu. Ta implementace je poměrně složitá, právě aby to fungovalo ve všech současných prohlížečích. Ty se tím už, ale nemusíš trápit a používáš přímo jejich API. |
||
|
Časová prodleva: 4 dny
|
|||
| Witiko Profil |
#4 · Zasláno: 16. 5. 2010, 17:15:32 · Upravil/a: Witiko
V posledním příspěvku tématu zmíněného Chamurappim rozepisuji řešení, které funguje jak ve všech prohlížečích podporujících globální objekt Element přes jehož prototype lze přistupovat k modelu všech elementů, tak v MSIE přes jeho systém behaviours. Nicméně nedoporučuji, zůstaň radši u funkce první. Zjistil jsem totiž, že behaviours od Microsoftu se chovají podivně.
Například jsem pomocí nich definoval všem elementům funkci show. Pokusy o přístup k document.getElementById(...).show končily výjimkou a jediné, co se s funkcí dalo dělat bylo její volání, ukázka nedokonalého propojení s javascriptem. Navíc ačkoliv jsem přiřadil behaviours všem elementům, často došlo u různých elementů k vyvolání výjimky při pokusu o volání dané funkce - většinou šlo o tabulky - bez jakéhokoliv důvodu. Nakonec jsem se vrátil k původní formě, protože jde celkově o kosmetickou záležitost a dané řešení bylo nespolehlivé. |
||
| Chamurappi Profil |
#5 · Zasláno: 17. 5. 2010, 14:53:30
Reaguji na Witika:
„Pokusy o přístup k […] končily výjimkou a jediné, co se s funkcí dalo dělat bylo její volání, ukázka nedokonalého propojení s javascriptem“ Můžu poprosit o ukázku? „často došlo u různých elementů k vyvolání výjimky při pokusu o volání dané funkce - většinou šlo o tabulky - bez jakéhokoliv důvodu“ Jestli jsi v té své funkci show nastavoval style.display u tabulek na table, table-row či table-cell, tak je důvod výjimky docela zjevný a nesouvisí nijak s behaviory.
|
||
| Witiko Profil |
#6 · Zasláno: 17. 5. 2010, 18:28:49 · Upravil/a: Witiko
Chamurappi:
„Jestli jsi v té své funkci show nastavoval style.display u tabulek na table, table-row či table-cell, tak je důvod výjimky docela zjevný a nesouvisí nijak s behaviory.“ Testování existence a objektové podstaty element.style je ve funkci obsažené, problém byl v tom, že k některým elementům daná funkce vůbec nebyla připojena a volání vyvolávalo chybu. Test existence nebyl možný díky výše zmíněnému problému, kdy se MSIE při všem kromě volání dané funkce choval, jako by neexistovala. Chamurappi: „Můžu poprosit o ukázku?“ opacity.htc <PUBLIC:COMPONENT NAME="ElementReplacement">
<PUBLIC:METHOD NAME="setOpacity" />
<script type = "text/javascript">
function setOpacity(opacity)
{
if(typeof element != "object" || typeof opacity != "number" || opacity < 0 || opacity > 100) return false;
if(typeof element.style != "object") return false;
element.style.opacity = opacity / 100;
element.style.filter = "alpha(opacity = " + String(opacity) + ")";
return true;
}
</script>
<PUBLIC:METHOD NAME="getOpacity" />
<script type = "text/javascript">
function getOpacity()
{
if(typeof element != "object" || typeof element.style != "object") return 100;
if(typeof element.style != "object") return 100;
if(element.style.opacity) return element.style.opacity*100;
else if(element.style.alpha) return parseInt(element.style.alpha.substr(element.style.alpha.indexOf("=")+1));
else return 100;
}
</script>
<PUBLIC:METHOD NAME="show" />
<script type = "text/javascript">
function show()
{
if(typeof element != "object" || typeof element.style != "object") return false;
if(typeof element.style != "object") return false;
element.style.display = "";
return true;
}
</script>
<PUBLIC:METHOD NAME="hide" />
<script type = "text/javascript">
function hide()
{
if(typeof element != "object" || typeof element.style != "object") return false;
if(typeof element.style != "object") return false;
element.style.display = "none";
return true;
}
</script>
<PUBLIC:METHOD NAME="isShown" />
<script type = "text/javascript">
function isShown() {
if(typeof element != "object" || typeof element.style != "object") return false;
return element.style.display == "none";
}
</script>
<PUBLIC:METHOD NAME="isHidden" />
<script type = "text/javascript">
function isHidden() {
if(typeof element != "object" || typeof element.style != "object") return false;
return element.style.display == "none";
}
</script>
</PUBLIC:COMPONENT>opacity.js if(typeof window.Element == "object" || typeof window.Element == "function") {
var setOpacity = function(opacity) {
if(typeof this != "object" || typeof opacity != "number" || opacity < 0 || opacity > 100) return false;
if(typeof this.style != "object") return false;
this.style.opacity = opacity / 100;
this.style.filter = "alpha(opacity = " + String(opacity) + ")";
return true;
}
var getOpacity = function() {
if(typeof this != "object") return 100;
if(typeof this.style != "object") return 100;
if(this.style.opacity) return this.style.opacity*100;
else if(this.style.alpha) return parseInt(this.style.alpha.substr(this.style.alpha.indexOf("=")+1));
else return 100;
}
var show = function() {
if(typeof this != "object") return false;
if(typeof this.style != "object") return false;
this.style.display = "";
return true;
}
var hide = function() {
if(typeof this != "object") return false;
if(typeof this.style != "object") return false;
this.style.display = "none";
return true;
}
var isShown = function() {
if(typeof this != "object") return false;
if(typeof this.style != "object") return false;
return this.style.display == "none";
}
var isHidden = function() {
if(typeof this != "object") return false;
if(typeof this.style != "object") return false;
return this.style.display == "none";
}
window.Element.prototype.setOpacity = setOpacity;
window.Element.prototype.getOpacity = getOpacity;
window.Element.prototype.show = show;
window.Element.prototype.hide = hide;
window.Element.prototype.isShown = isShown;
window.Element.prototype.isHidden = isHidden;
}opacity.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Transparency test</title>
<![if !IE]>
<script type="text/javascript" src="opacity.js"></script>
<![endif]>
<!--[if IE]>
<style type="text/css">
* {behavior: url(opacity.htc)}
</style>
<![endif]-->
</head>
<body>
<div align="left">(new Image()).id = "test";</div><br>
<img src = "opacity.gif" id = "test">
<br><br>
<button onclick="document.getElementById('test').setOpacity(Number(window.prompt('Enter opacity',100)));">
document.getElementById('test').setOpacity( prompt() );
</button><br>
<button onclick="window.alert(document.getElementById('test').getOpacity());">
document.getElementById('test').getOpacity();
</button><br>
<button onclick="document.getElementById('test').hide();">
document.getElementById('test').hide();
</button><br>
<button onclick="document.getElementById('test').show();">
document.getElementById('test').show();
</button><br>
<button onclick="alert(document.getElementById('test').show);">
alert(document.getElementById('test').show);
</button><br>
</body>
</html>Odkaz: http://upfile.hostuju.cz/opacity.html Důležité je alert(document.getElementById('test').show); které v MSIE vyvolá neošetřenou výjimku. |
||
|
Časová prodleva: 14 let
|
|||
0