Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [skrypt][JS] Loader stron, System oparty na ajaxie
SHiP
post 8.01.2006, 17:00:08
Post #1





Grupa: Zarejestrowani
Postów: 697
Pomógł: 47
Dołączył: 19.12.2003
Skąd: Lublin

Ostrzeżenie: (0%)
-----

No cóż tworzę grę i chciałbym zobaczyc co myślicie na temat moich skryptów.
Link: http://ehand.muminski.be/ajax/

Skrypt pełną moca winksmiley.jpg http://ehand.mumin.tdt.org.pl Login: root hasło: qwerty

Chodzi o loader który wczytuje odpowiedni plik. W zależności od zastosowania wykonuje go jako eval lub dołacza jako text do podanego diva(domyslnie do M_text).

użyję Znacznika \[php\] aby pokolorowalo ładnie kod winksmiley.jpg
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. //Autor skryptu Michał "Meetal" Środek - eHand Team
  4. // Skrypt może być wykożystywany z zachowaniem kilku pierwszych linijek informując
    ych o autorze
  5. // Strona eHand Teamu: http://ehand.ahh.pl
  6.  
  7. // B_  = bool
  8. var onload=Array(); // czy dany plik zostal zaladowany
  9. var onsubmitpost=Array(); // funkcje modulów wykonywana w momecie zainicjowania wysylania zapytan metoda POS
    T
  10. var onsubmitpost_ok=Array(); // funkcje modułów wykonywane w momencie zakonczenia zaptania POST
  11.  
  12. var http_request = false; // obiekt ajax
  13. var B_wait = 0; // czy skrypt ma czekać z wysylaniem zapytan
  14. var files = Array();
  15. var E_url=null; // aktualna nazwa wczytywanego pliku (E od error mialo to byc do generowania bledow)
  16. var TEMP_counter=0; // licznik zliczający ilosc stron do zaladowania
  17. var MY_counter=0; // licznik zliczający ilosć stron zaladowanych
  18. var types=Array(); // tablica zawierająca rodzaje plikow(czy to jest plik *.php/html itp czy *.js(zawuierający kod js)
  19. var div = Array(); // tablica przechowująca nazwy DIVow ktorych innerHTML zostanie zastapiony prze tr
    esc ladowanego pliku
  20. var B_post=false; // czy do aktualnego pliku ma byc uzyta metoda POST
  21. var CODE_counter=0; // licznik zaladowanych plikow (uzywany jako &code= w adresie aby wymusic pobranie strony a nie odczatanie jej z pamieci c
    ache)
  22.  
  23. function makeRequest(method,url,post) // podajemy modote, adres pliku oraz ewentualnie kod post np zonk=zonk&knoz=knoz&qwerty=uiop
  24. {
  25.  
  26. if(method=='POST') {E_url=url; B_post=true;}
  27. else
  28. {
  29. //----------------------------------
  30.     B_wait++;
  31.     E_url=url;
  32. //----------------------------------
  33. }
  34.         http_request = false;
  35.  
  36.         if (window.XMLHttpRequest) { // Mozilla, Safari,...
  37.             http_request = new XMLHttpRequest();
  38.             if (http_request.overrideMimeType) {
  39.                 http_request.overrideMimeType('text/xml');
  40.             }
  41.         } else if (window.ActiveXObject) { // IE
  42.             try {
  43.                 http_request = new ActiveXObject("Msxml2.XMLHTTP");
  44.             } catch (e) {
  45.                 try {
  46.                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
  47.                 } catch (e) {}
  48.             }
  49.         }
  50.  
  51.         if (!http_request) {
  52.             alert('Nie moża stworzyć instancji obiektu XMLHTTP.');
  53.             return false;
  54.         }
  55.         http_request.onreadystatechange = alertContents;
  56. //        var code=Math.round(Math.random()*4)*Math.round(Math.random()*8)*Math.round(Math.random()*15);
  57. //        if(url.match("[?]")=="?") code='&code='+code; else code='?code='+code;
  58.         CODE_counter++;
  59. //najpierw byla metoda losująca kod teraz po prostu za każdym razem jest to o 1 wi
    ększa wartość
  60. // jesli w nazwie pliku jest uzyty znak '?' dodajemy kod po przez &
  61.         if(url.match("[?]")=="?") var code='&code='+CODE_counter; else var code='?code='+CODE_counter;
  62.         http_request.open(method, url+code, true); // wykonujemy zapytanie
  63.  
  64.         if(B_post) // jeśli jest to zapytanie POST wysylamy naglowki
  65.         {
  66.             http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  67.             //http_request.setRequestHeader("Content-length", post.length);
  68.             //http_request.setRequestHeader("Connection", "close");
  69.         }
  70.         http_request.send(post);
  71.  
  72. }
  73. var B_loadUrl=false; // czy teraz jest ladowany plik URL
  74. var B_loadJS=false; // czy teraz jest ladowany plik JS
  75.  
  76. function alertContents()
  77. {
  78.     if (http_request.readyState == 4)
  79.     {
  80.         if (http_request.status == 200)
  81.         {
  82.             if(B_post) // jesli jest wykonane zapytanie POST
  83.             {
  84.                 B_post=false;
  85.                 //alert("return: "+http_request.responseText);
  86.                 if(onsubmitpost_ok[E_url]) onsubmitpost_ok[E_url](); // jesli modul posiada funkcje onsubmitpost_ok to wywolujemy ja
  87.  
  88.             }
  89.             else
  90.             {
  91.                 if(types[MY_counter]=='JS') // jesli plik jest kodem JavaScript
  92.                 {
  93.                     //alert("return: "+http_request.responseText);
  94.                     eval(http_request.responseText); // wykonujemy kod
  95.                     if(onload[E_url]) onload[E_url](); // jesli modul posiada konstruktor to wywolujemy go
  96.                     B_loadJS=false;
  97.                 }
  98.                 else if(types[MY_counter]=='URL')
  99.                 {
  100.                     document.getElementById(div[MY_counter]).innerHTML = http_request.responseText; // dodajemy kod do odpowiedniego diva
  101.                     if(onload[E_url]) onload[E_url](); // jesli modul posiada konstruktor to wywolujemy go
  102.                     B_loadUrl=false;
  103.                 }
  104.                 MY_counter++;
  105.             }
  106.  
  107.         } else alert(E_url+': Connection Error.');
  108.  
  109.  
  110.         if(TEMP_counter==MY_counter) // jesli wszystkie pliki zostaly zaladowane
  111.         {
  112.           TEMP_counter=0;
  113.           MY_counter=0;
  114.           document.getElementById('M_loading').style.visibility='hidden'; //  tabelka LOADING
  115.         }
  116.  
  117.     }
  118.     else document.getElementById('M_loading').style.visibility='visible'; //  tabelka LOADING
  119. }
  120. var Timeout=Array();
  121. var myURL='';
  122. function loadUrl(url)
  123. {
  124.     if(files[MY_counter]!=url || B_post) Timeout[url] = window.setTimeout('loadUrl("'+url+'")', 500); // jesli nie jest kolej tego pliku nastepuje rekurencja
  125.     else
  126.     {
  127.         if (Timeout[url])
  128.         {
  129.             window.clearTimeout(Timeout[url]);
  130.         }
  131.  
  132.         if(url==myURL)
  133.         {
  134.             x=confirm("Wybrana strona jest wlasnie zaladowana. Czy chcesz ją odświerzyc?");
  135.             if(x)
  136.             {
  137.               myURL=null;
  138.               loadUrl(url);
  139.             }
  140.             else TEMP_counter--;
  141.         }
  142.         else
  143.         {
  144.             myURL=url;
  145.             B_loadUrl=true;
  146.             makeRequest('GET', url,null);
  147.         }
  148.     }
  149. }
  150. var myJS = Array();
  151.  
  152. function loadJS(url,load) // ladujemy plik
  153. {
  154.     if(files[MY_counter]!=url || B_post)  Timeout[url] = window.setTimeout('loadJS("'+url+'",'+load+')', 500); // jesli nie jest kolej tego pliku nastepuje rekurencja
  155.     else
  156.     {
  157.         if (Timeout[url])
  158.         {
  159.             window.clearTimeout(Timeout[url]); // resetujemy timer
  160.         }
  161.         if(myJS[url]==true && !load) // jesli nie zostal zaladowany
  162.         {
  163.             TEMP_counter--; // zmniejszamy liczbe plikow do zaladowania
  164.             if(TEMP_counter==MY_counter) // jesli wszystkie pliki sa zaladowane zerujemy licznik
  165.             {
  166.               TEMP_counter=0;
  167.               MY_counter=0;
  168.               document.getElementById('M_loading').style.visibility='hidden'; // ukrywamy tabelke z napisem LOADING
  169.             }
  170.         }
  171.         else
  172.         {
  173.             myJS[url]=true;
  174.             B_loadJS=true;
  175.             B_loadUrl=false;
  176.             makeRequest('GET', url,null);
  177.         }
  178.     }
  179. }
  180.  
  181. function setJS(url,load) // ustalamy jakis skrypt do zaladowania
  182. {
  183.     if(myJS[url]!=true || load)
  184.     {
  185.     files[TEMP_counter]=url;
  186.     types[TEMP_counter]='JS';
  187.     TEMP_counter++;
  188.     loadJS(url,load);
  189.     }
  190. }
  191.  
  192. function setUrl(url,divname) // ustalamy jakas strone do zaladowania
  193. {
  194.     files[TEMP_counter]=url;
  195.     types[TEMP_counter]='URL';
  196.     if(divname) div[TEMP_counter]=divname; else div[TEMP_counter]='M_text'; // jesli zostal podany DIV do ktorego mamy dodać text to zmienna div[id pliku] prz
    yjmuje jego wartosc. Domyslny div to M_text
  197.     TEMP_counter++;
  198.     loadUrl(url);
  199. }
  200.  
  201.  
  202.  
  203.  
  204. ?>
[PHP] pobierz, plaintext


Aby całość dzialała niezbędny jest DIV o id = M_text oraz okienko preloadera

Kod
<!--LOADING FORM-->
<div id="M_loading">
<table id="preloaderTable">
<tr><td align="center">
   <table width="200" height="50" bgcolor="#de5522" style="vertical-align: middle; border:1px solid white; font-weight:bold; font-size :15px;"><tr><td align="center">Loading...<br/>
   <br/><a href="javascript:hideLoading();" style="color:black; font-weight:normal;">Close Preloader</a>
   </td></tr></table>
<br/><br/><br/>
</td></tr>
</table>
</div>
<!--LOADING FORM-->
<script language="javascript" type="text/javascript">
<!--
/*
SKRYPT pobiera szerokość i wysokosc okna
ustawia je jako szerokosc i wysokosc niewidzialnej tabelki ktora blokuje całego layouta(z malymi wyjatkami z-index) abypodczas ladowania nie dało sie w nic kliknać...
*/
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
}

document.getElementById('preloaderTable').style.height=winH-10; // odejmujemy 10 aby na IE nie pokazywaly sie scrolle;]
document.getElementById('preloaderTable').style.width=winW-10;
window.hideLoading = function()
{
   document.getElementById('M_loading').style.visibility='hidden';
}
//-->
</script>


No i krótki plik css zawierający style preloadera aby byl jako wycentrowany fixed winksmiley.jpg na wszystkich przegladarkach...
Kod
div#M_loading
  {
  position: absolute;
     padding:0;
     margin:0;
  top: 0;
  left: 0;
  }

@media screen
{
   div#M_loading
   {
    position: fixed;

   }

   * html
    {
    overflow-y: hidden;
   }
   * html body
   {
   overflow-y: auto;
    height: 100%;
   padding: 0;
   font-size: 100%;
   }
   * html div#M_loading
   {
   position: absolute;
   }
}


System zamykający preloader (nalezy dodać pod koniec strony)
Kod
<script language="javascript" type="text/javascript">
<!--
hideLoading();
//-->
</script>


Ten post edytował SHiP 8.01.2006, 17:02:53


--------------------
Warsztat: Kubuntu, PhpStorm, Opera
Go to the top of the page
+Quote Post
« Następny starszy · Oceny · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 6.07.2025 - 00:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn