Óïðàâëåíèå ñòèëÿìè
|
Àâòîð: Àðòåìüåâ Ñåðãåé Èãîðåâè÷ ICQ: 438856621 email: _spin_@bk.ru |
ßçûê JavaScript ïðåäîñòàâëÿåò ñðåäñòâà äëÿ óïðàâëåíèÿ ñòèëÿìè ýëåìåíòîâ "íà ëåòó". Ïîä ñòèëåì â äàííîì ñëó÷àå ïîíèìàåòñÿ íàáîð ïàðàìåòðîâ ýëåìåíòà, îïðåäåëÿþùèé åãî âíåøíèé âèä è îñîáåííîñòè ïîâåäåíèÿ íà ñòðàíèöå.
Âîçìîæíî äâà ñïîñîáà óïðàâëåíèÿ ñòèëåì - íåïîñðåäñòâåííîå ïðîãðàììíîå èçìåíåíèå ýëåìåíòîâ ñòèëÿ è ïåðåîïðåäåëåíèå ñòèëÿ ñ èñïîëüçîâàíèåì êëàññîâ CSS.
Ðàññìîòðèì ïåðâûé ñïîñîá. Ìû óæå ïðèìåíÿëè åãî, êîãäà ðàññìàòðèâàëè âîçìîæíîñòè ïåðåõâàòà ñîáûòèé êëàâèàòóðû. Ñìûñë äàííîãî ìåòîäà ñîñòîèò â òîì, ÷òî íåîáõîäèìûé âíåøíèé âèä è ïîâåäåíèå ýëåìåíòà äîñòèãàåòñÿ ïîñëåäîâàòåëüíûì èçìåíåíèåì ñâîéñòâ åãî ñòèëÿ. Íàïðèìåð:
Ýòîò ñêðèïò ïî êëèêó íà ñòðàíèöå ìåíÿåò ñòèëü äîêóìåíòà, ìåíÿÿ øðèôò ñ ïîëóæèðíîãî êðàñíîãî íà îáû÷íûé ÷¸ðíûé. Åñëè íåìíîãî èçìåíèòü ñêðèïò è äîáàâèòü òàéìåð, òî ïîëó÷èòñÿ âîò òàêîé ìèãàþùèé òåêñò:
Òåñòîâàÿ ñòðîêà
À èçìåíèòü ñêðèïò íàäî òàê:
<script type="text/javascript" language="javascript">
function doMouseEvt()
{
var elm = document.getElementById("styler");
if(elm)
{
if(elm.style.fontWeight == "bold")
{
elm.style.fontWeight = "normal";
elm.style.color = "black";
}
else
{
elm.style.fontWeight = "bold";
elm.style.color = "red";
}
}
}
window.setInterval("doMouseEvt();", 1000);
</script>
... <span id="styler">Òåñòîâàÿ ñòðîêà</span>
Âòîðîé ñïîñîá çàêëþ÷àåòñÿ â òîì, ÷òî äèíàìè÷åñêì ìåíÿåòñÿ íå êàæäûé ýëåìåíò ñòèëÿ â îòäåëüíîñòè, à ñðàçó óñòàíàâëèâàåòñÿ çíà÷åíèå êëàññà ýëåìåíòà.  ñâîþ î÷åðåäü, ñòèëü êëàññà îïèñûâàåòñÿ îòäåëüíî â ôîðìàòå CSS.
Äîáàâèì â ýëåìåíò head îïèñàíèå ñòèëåé íåîáõîäèìûõ êëàññîâ è êîä ñêðèïòà:
<style type="text/css">
.gray_green{
font-size: 16px;
font-weight: bolder;
color: #C00;
background-color: #FFFF33;
border: 1px solid gray;
padding: 5px;
display:block;
width: 150px;
text-align:center;
}
.yellow_red{
font-size: 16px;
font-weight: normal;
color: #009900;
background-color:#CCCCCC;
border: 1px solid #009900;
padding: 5px;
display:block;
width: 150px;
text-align:center;
}
</style>
<script type="text/javascript" language="javascript">
function doBlinkClass()
{
var elm = document.getElementById("styler_class");
if(elm)
{
if(elm.className == "gray_green")
elm.className = "yellow_red";
else
elm.className = "gray_green";
}
}
window.setInterval("doBlinkClass();", 1000);
</script>
 ýëåìåíò body äîáàâèì ñîîòâåòñòâóþùèé òåã ñ òåêñòîì:
<span class="gray_green" id="styler_class">Òåñòîâàÿ ñòðîêà</span>
 ðåçóëüòàòå ïîëó÷èì ñëåäóþùåå:
|
Òåñòîâàÿ ñòðîêà
|
Íà ïåðâûé âçãëàä ìîæåò ïîêàçàòüñÿ, ÷òî âòîðîé ìåòîä çíà÷èòåëüíî áîëåå ãðîìîçäêèé è íåóäîáíûé, íî ñìåþ âàñ çàâåðèò - ýòî íå òàê. Ïëþñîâ òàêîãî ïîäõîäà âñåãî òðè, íî îíè ïîëíîñòüþ êîìïåíñèðóþò âñå ìèíóñû.
Âî-ïåðâûõ, èñïîëüçîâàíèå êëàññîâ óìåíüøàåò îáú¸ì êîäà JavaScript è ïîâûøàåò åãî ÷èòàåìîñòü. Êðîìå òîãî, ïðîãðàììèñòó äîñòàòî÷íî ëèøü îïèñàòü êàðêàñû ñòèëåé, çàäóìûâàÿñü â ïðîöåññå ðàçðàáîòêè íå î âíåøíåì âèäå ñêðèïòà, à î åãî ôóíêöèîíàëüíîñòè. Ñëåäñòâèå âñåãî ýòîãî - âîçðàñòàåò ñêîðîñòü è êà÷åñòâî ðàçðàáîòêè ñêðèïòà, ñíèæàåòñÿ êîëè÷åñòâî îøèáîê è óïðîùàåòñÿ îòëàäêà.
Âòîðàÿ ïðè÷èíà íåñêîëüêî ãëîáàëüíåå. Òàê óæ ïîëó÷àåòñÿ, ñïåöèàëèñò, ñîâìåùàþùèé â ñåáå òàëàíòû ïðîãðàììèñòà è õóäîæíèêà - íå÷àñòîå ÿâëåíèå. Êàê ïðàâèëî ÷åëîâåê ÿâëÿåòñÿ ñïåöèàëèñòîì è ãóðó â ÷¸ì-òî îäíîì. Ïîýòîìó ïðîãðàììèðîâàíèå ñàéòîâ è èõ äèçàéí äåëàþò ÷àùå âñåãî ðàçíûå ëþäè. "Êëàññîâûé" ïîäõîä ê óïðàâëåíèþ ñòèëÿìè èç JavaScript ïîçâîëÿåò ïîëíîñòüþ ðàçäåëèòü ðàáîòó ïðîãðàììèñòà è äèçàéíåðà. À êðîìå òîãî - ïîçâîëÿåò ìåíÿòü âíåøíèé âèä ñêðèïòà ïî ñâîåìó óñìîòðåíèþ íå ìåíÿÿ êîä JavaScript, ò.å. áåç ïîâòîðíîãî ïðèâëå÷åíèÿ ïðîãðàììèñòà.
Òðåòüÿ ïðè÷èíà áîëåå âñåãî âàæíà äëÿ ðàçðàáîò÷èêîâ. Ðàçäåëèâ êîä è îïèñàíèå ñòèëåé, ìîæíî ñïîêîéíî çàøèôðîâàòü èëè êàê-òî åù¸ çàêðûòü êîä, çàùèùàÿ òåì ñàìûì ñâîé òðóä îò áàíàëüíîãî âîðîâñòâà è ïëàãèàòà. Ýòî îñîáåííî àêòóàëüíî, åñëè âû ðàñïðîñòðàíÿåòå ñâîè ñêðèïòû çà äåíüãè.
Òàêèì îáðàçîì , ñîâìåùåíèå JavaScript è CSS ïîçâîëÿåò äîáèòüñÿ âïå÷àòëÿþùèõ âèçóàëüíûõ ýôôåêòîâ. Îäèí èç õîðîøèõ ïðèìåðîâ àêêóðàòíî è êà÷åñòâåííî íàïèñàíîãî ïîäóêòà - ïàêåò highslide (http://highslide.com/). Ýòîò ïàêåò áåñïëàòåí äëÿ ÷àñòíîãî èñïîëüçîâàíèÿ è ðàñïðîñòðàíÿåòñÿ ñ îòêðûòûì èñõîäíûì êîäîì, ñíàáæåí ïðèìåíàìè è êîììåíòàðèÿìè.
