Przedstawiam system skalowania tła Silverlight Intelligent Background® do zastosowań w kompozycjach wizualnych. Co on takiego ciekawego oferuje? Oferuje skalowanie dowolnego tła z zachowaniem jego proporcji. W zależności od proporcji okna tło jest skalowane pionowo (wtedy wysokość to wysokość okna, a szerokość jest dynamiczna) lub poziomo (wtedy szerokość to szerokość okna, a wysokość jest dynamiczna). Widocznym fragmentem tła jest zawsze jego centralny obszar. Dynamiczna szerokość i wysokość mogą być mniejsze od szerokości/wysokości okna, wówczas fragment tła, który nie mieści się, jest po prostu wyciągany poza krawędzie okna. Dodatkowo tło na zakładkach SMS i Powiadomienia jest dostosowane względem tła listy kontaktów (efekt nieruchomego tła, przy przechodzeniu między zakładkami sprawia to wrażenie jakby tło w ogóle nie uległo zmianie, wydaje się wręcz, że forma SMS/forma CP/zakładki CP zostały absolutnie naniesione na nie nie powodując jego przesunięć.
Jak to działa będziecie mogli zobaczyć jeszcze dzisiaj w kompozycji wizualnej Silverlight Dark Amber v1.2 lub prawdopodobnie w Guild Wars autorstwa vBz, ponieważ prywatnie wyraził zainteresowanie skorzystaniem z omawianego fjuczera.
Wymagania: kompozycja wizualna, oparta na !DOCTYPE (ponieważ wymagana jest obsługa position:fixed); obecność DIV#list_content w każdym oknie, w którym system skalowania jest wykorzystywany (np. w oknie rozmowy w trochę ułomnej wersji pod postacią DIV#window_dimensions, ale spokojnie, wszystko jest w porządku ); AQQ 2.4.1.10 lub nowsze.
Instrukcja obsługi (w sensie jak zastosować to w swojej kompozycji):
Sprawdzamy, czy w każdym oknie mamy dodany DIV#list_content. Jeżeli nie, dodajemy luzem nad wszystkimi innymi DIV#window_dimensions (on będzie służył tylko zwracaniu prawidłowych wartości wymiarów okna, niestety clientHeight zawodzi w oknie rozmowy dlatego nie mogę korzystać z takich ogólników i ten DIV jest koniecznością). Przykładowo w oknie rozmowy powinno to wyglądać tak:
<BODY onDragStart="return false"> <DIV id="window_dimensions"></DIV> <DIV id="0"></DIV> </BODY>
Teraz dodajemy linijkę, która wywołuje funkcję preparującą tło:
<BODY onDragStart="return false"> <DIV id="window_dimensions"></DIV> <DIV id="0"></DIV> <SCRIPT type="text/javascript">preparebg();</SCRIPT> </BODY>
Dla naszego świeżo dodanego DIV#window_dimensions nadajemy następujące style (przypominam, że jeżeli DIV#list_content występuje w oknie, np. na liście kontaktów, to nie zmieniasz żadnych styli ani w ogóle nie dodajesz DIV#window_dimensions, wszystko zostaje tak, jak jest):
#window_dimensions { position: fixed; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; }
A teraz przechodzimy do umieszczenia tła. Tło będzie miało klasę .background_image, zatem ją stylujemy. Dodajemy sobie w stylach pozycjonowanie ustalone i jakiś ujemny zIndex tak, aby tło się znalazło pod wszystkim. Proponuję tak:
.background_image { position: fixed; z-index: -1; }
A teraz specyficznie dla każdego okna trochę inny skrypt dodajemy w sekcji <HEAD> naszego dokumentu HTML:
Lista kontaktów:
<SCRIPT type="text/javascript"> var bgobj, ratio_horiz, ratio_vert; function preparebg() { var calculateratios=function () { bgobj.className="background_image"; ratio_horiz=bgobj.width/bgobj.height; ratio_vert=1/ratio_horiz; bgscale(); document.body.appendChild(bgobj); document.body.onresize=bgscale; } bgobj=document.createElement("img"); bgobj.src="background_image_opacity.png"; if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;} else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();} } function bgscale() { var list_width=document.body.clientWidth, list_height=document.getElementById("list_content").offsetHeight; if(ratio_horiz*list_height>list_width) { bgobj.style.top="22px"; bgobj.style.left=0.5*(list_width-ratio_horiz*list_height); bgobj.style.width=ratio_horiz*list_height; bgobj.style.height=list_height; } else { bgobj.style.top=0.5*(list_height-ratio_vert*list_width)+22; bgobj.style.left="0"; bgobj.style.width=list_width; bgobj.style.height=ratio_vert*list_width; } } </SCRIPT>
!! W linijce bgobj.src="background_image_opacity.png"; podajemy zamiast background_image_opacity.png ścieżkę do obrazka!
Zakładka SMS:
<SCRIPT type="text/javascript"> var bgobj, ratio_horiz, ratio_vert; function preparebg() { var calculateratios=function () { bgobj.className="background_image"; ratio_horiz=bgobj.width/bgobj.height; ratio_vert=1/ratio_horiz; bgscale(); document.body.appendChild(bgobj); document.body.onresize=bgscale; } bgobj=document.createElement("img"); bgobj.src="../Contacts/background_image_opacity.png"; if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;} else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();} } function bgscale() { var list_width=document.body.clientWidth, list_height=document.getElementById("window_dimensions").offsetHeight+225; if(ratio_horiz*list_height>list_width) { bgobj.style.top="-225px"; bgobj.style.left=0.5*(list_width-ratio_horiz*list_height); bgobj.style.width=ratio_horiz*list_height; bgobj.style.height=list_height; } else { bgobj.style.top=0.5*(list_height-ratio_vert*list_width)-225; bgobj.style.left="0"; bgobj.style.width=list_width; bgobj.style.height=ratio_vert*list_width; } } </SCRIPT>
!! W linijce bgobj.src="background_image_opacity.png"; podajemy zamiast background_image_opacity.png ścieżkę do obrazka! Jeżeli w SMS-ach miałeś DIV-a list_content, to zamień w powyższym skrypcie window_dimensions na list_content!
Zakładka Powiadomienia:
Tu jest troszeczkę inna sprawa, bo musimy dodać trochę więcej elementów
Po pierwsze na sam spód (ale przed <SCRIPT>, o którym mowa była na samym początku tego tematu!) dwa dodatkowe DIV-y:
<DIV id="AQQ_HideSocialTabs" onClick="sthidden();"></DIV> <DIV id="AQQ_ShowSocialTabs" onClick="stshowed();"></DIV>
I te DIV-y sobie pięknie chowamy żeby nam czasem w czymś nie przeszkodziły:
#AQQ_HideSocialTabs, #AQQ_ShowSocialTabs {display: none;}
No i skrypt do <HEAD>:
<SCRIPT type="text/javascript"> function stshowed() { stshift=40; preparebg(); } function sthidden() { stshift=0; preparebg(); } var bgobj, ratio_horiz, ratio_vert; function preparebg() { var calculateratios=function () { bgobj.className="background_image"; ratio_horiz=bgobj.width/bgobj.height; ratio_vert=1/ratio_horiz; bgscale(); document.body.appendChild(bgobj); document.body.onresize=bgscale; } bgobj=document.createElement("img"); bgobj.src="../Contacts/background_image_opacity.png"; if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;} else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();} } function bgscale() { var list_width=document.body.clientWidth, list_height=document.getElementById("window_dimensions").offsetHeight+65+stshift; if(ratio_horiz*list_height>list_width) { bgobj.style.top="-65px"; bgobj.style.left=0.5*(list_width-ratio_horiz*list_height); bgobj.style.width=ratio_horiz*list_height; bgobj.style.height=list_height; } else { bgobj.style.top=0.5*(list_height-ratio_vert*list_width)-65; bgobj.style.left="0"; bgobj.style.width=list_width; bgobj.style.height=ratio_vert*list_width; } } </SCRIPT>
I jeszcze do tego dwa DIV-y za wszystkimi innymi:
<BODY onDragStart="return false" onSelectStart="return false"> <DIV id="list_content"> <DIV id="0"></DIV> </DIV> <DIV id="background_image"></DIV> <DIV id="AQQ_HideSocialTabs" onClick="AQQ_HideSocialTabs()"></DIV> <DIV id="AQQ_ShowSocialTabs" onClick="AQQ_ShowSocialTabs()"></DIV> </BODY>
!! W linijce bgobj.src="background_image_opacity.png"; podajemy zamiast background_image_opacity.png ścieżkę do obrazka! Jeżeli w SMS-ach miałeś DIV-a list_content, to zamień w powyższym skrypcie window_dimensions na list_content!
Okno rozmowy, historii i okna: Windows/emots.htm oraz Windows/avatars.htm:
<SCRIPT type="text/javascript"> var bgobj, ratio_horiz, ratio_vert; function preparebg() { var calculateratios=function () { bgobj.className="background_image"; ratio_horiz=bgobj.width/bgobj.height; ratio_vert=1/ratio_horiz; bgscale(); document.body.appendChild(bgobj); document.body.onresize=bgscale; } bgobj=document.createElement("img"); bgobj.src="background_image_opacity.png"; if((bgobj.width===0) || (bgobj.height===0)) {bgobj.onload=calculateratios;} else if((bgobj.width>0) && (bgobj.height>0)) {calculateratios();} } function bgscale() { var window_width=document.body.clientWidth, window_height=document.getElementById("window_dimensions").offsetHeight; if(ratio_horiz*window_height>window_width) { bgobj.style.top="0"; bgobj.style.left=0.5*(window_width-ratio_horiz*window_height); bgobj.style.width=ratio_horiz*window_height; bgobj.style.height=window_height; } else { bgobj.style.top=0.5*(window_height-ratio_vert*window_width); bgobj.style.left="0"; bgobj.style.width=window_width; bgobj.style.height=ratio_vert*window_width; } } </SCRIPT>
Życzę przyjemności!
Użytkownik Silverlight edytował ten post 2012.05.06, 23:02