Szerző Téma: xLoader v1.0 [Jquery + HTML + PHP]  (Megtekintve 1090 alkalommal)

Nem elérhető Xenius

  • 668
    • Profil megtekintése
xLoader v1.0 [Jquery + HTML + PHP]
« Dátum: 2014. Október 13. - 17:10:43 »
0 Show voters
Üdvözletem. Ezzel a \"pluginnal\" megvalósítható egy olyan weboldal felépítése, amely egyetlen újratöltés nélkül stabilan és GYORSAN működik.
Tehát ha az első példa linket (http://hl-rpg.eu/ucp/#pages/naptar.php\'>http://hl-rpg.eu/ucp/#pages/naptar.php) nyitom meg akkor a naptárat tölti be, ha a másik példa linket (http://hl-rpg.eu/ucp/#pages/hirdetes.php\'>http://hl-rpg.eu/ucp/#pages/hirdetes.php) akkor a hírdetéseket.  Ha pedig nincs paraméter akkor a főoldalt.
Kezdjük is el magával a JS-el
 
/*
Please dont remove this license
Copyright © 2014 XeniusDev
Writed by Xenius | Komjati Janos
Please contact [email protected] with your questions, comments, and suggestions.
*/
var indexPage = \"index.php\";
var plusString = \"\";
var loaderShow = \"\";
var pageName = \"HL-RPG\";
// Nem gyorsítótáraz
function randomIntFromInterval(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}
function getTimestamp() {
return randomIntFromInterval(1,999999999);
}
function loginScript(){
var username = document.getElementById(\'username\').value;
var password = document.getElementById(\'password\').value;
showLoader()
$.post( \"login.php\", { uname: username, pwd: password })
.done(function( data ) {
$( \"#loginbox\" ).html( data );
hideLoader()
});
}
function registerScript(){
var username = document.getElementById(\'username\').value;
var password = document.getElementById(\'password\').value;
var password2 = document.getElementById(\'password2\').value;
var captcha = document.getElementById(\'captcha\').value;
showLoader()
$.post( \"regisztracio.php\", { uname: username, pwd: password, pwd2: password2, code: captcha })
.done(function( data ) {
$( \"#registerbox\" ).html( data );
hideLoader()
});
}
function showLoader(){
document.getElementById(\"loader\").style.display=\"block\";
}
function hideLoader(){
document.getElementById(\"loader\").style.display=\"none\";
}
function loginResponse(){
setTimeout(function(){
document.getElementById(\'loginbox\').innerHTML=\"3 másodpercel a bejelentkezés után javascript felülírja ezt a szöveget.\";
}, 3000)
}
function onClickPost(){
var nev = document.getElementById(\'nev\').value;
var textt = document.getElementById(\'uzenet\').value;
var elem = document.getElementById(\"uzenet\");
$.post( \"chatsend.php\", { text: textt, name: nev })
.done(function( data ) {
$( \"#loadToChat\" ).load( \"chatsend.php\" );
elem.value = \"\";
});
}
function getPageTitle(location){
if (location.search(\"letoltesek\") > 0) {
return \" - Letöltések\";
}else if (location.search(\"index\") > 0) {
return \" - Kezdőlap\";
}else if (location.search(\"beallitasok\") > 0) {
return \" - Beállítások\";
}else if (location.search(\"regisztracio\") > 0) {
return \" - Regisztráció\";
}
return \"\";
}
function changeRadio(id){
document.getElementById(\"radio2\").style.display=\"block\";
document.getElementById(\"radio\").innerHTML=\'<iframe width=220 height=28 scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" src=\"radioframe.php?station=\'+ id +\'&type=radio\"></iframe>\';
document.getElementById(\"radioInfo\").innerHTML=\'<iframe width=500 height=28 scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" src=\"radioframe.php?station=\'+ id +\'&type=radioinfo\"></iframe>\';
}
function newCode(){
$(\'#captchaimg\').attr(\'src\', \"captcha.php?\" + getTimestamp());
}
var loadString = false;
function xLoad(location, onload){
var page = document.getElementById(\"page\");
if (onload){
if (document.location.hash) {
   var string = document.location.hash;
   string = string.toString().replace(\"#\", \'\');
   location = string;
}
}
var loadedWithoutXTMP = location;
document.title = pageName + getPageTitle(location);
showLoader();
// nem gyorsítórázaz innen
var strXTMP = location.search(\"xtmp\");
if (strXTMP < 0) {
var strF = location.search(\"\\\\?\");
if (strF < 0) {
   plusString = \"?\";
}else{
   plusString = \"&\";
}
location = location + plusString + \"xtmp=\" +getTimestamp();
}
// nem gyorsítórázaz innen eddig
document.location.hash = location;
if (loadString) {
loadString.abort();
}
loadString = $( \"#page\" ).load( location, function( response, status, xhr ) {
if ( status == \"error\" ) {
   $( \"#page\" ).load(\"pages/index.php?lap=nem\");
}
loadString = false
hideLoader();
});
}
$(window).on(\'hashchange\',function(){
    var load = window.location.hash.substring(1);
var str = load.search(\"pages\");
if (str < 0) {
alert(\"Érvénytelen betölteni kívánt tartalom.\");
return;
}
xLoad(load);
});
$( document ).ready(function() {
    var load = window.location.hash.substring(1);
var str = load.search(\"pages\");
if (str < 0) {
xLoad(\"pages/index.php\");
return;
}
xLoad(load);
});

 
Ebben a fájlban megtalálhatóak példák is a bejelentkezésre, regisztrációra (űrlapküldésre) de minket most ebből semmi nem érdekel, csak a beállítások. (ott az elején illetve a getPageTitle nevű funkció!)
Ez már lényegében működik is, de szükségünk van egy pages nevű mappára az ftp szerveren. Illetve szükségünk van magában a html-ben egy page nevű div-re és egy loader nevű div-re.
Ahhoz hogy működésre bírjuk nézzünk egy egyszerű linket:
 
<a href=\"#pages/index.php\" class=\"ico1\"><span>Kezelőfelület</span></a>

 
Így már működik is minden, sok sikert a weboldalakhoz.
Működő példa: http://hl-rpg.eu/ucp/
FONTOS HOGY KELL A JQUERY LEGFRISSEBB VERZIÓJA!
« Utoljára szerkesztve: 2014. Október 13. - 17:13:45 írta Xenius »

Nem elérhető Legend

  • Adminisztrátor
  • 1830
    • Profil megtekintése
xLoader v1.0 [Jquery + HTML + PHP]
« Válasz #1 Dátum: 2014. Október 14. - 06:26:10 »
0 Show voters
Jó cucc. :D

Nem elérhető b1s

  • 2212
  • Faszidegbénulás
    • Profil megtekintése
xLoader v1.0 [Jquery + HTML + PHP]
« Válasz #2 Dátum: 2014. November 19. - 14:39:36 »
0 Show voters
write múltideje nem writed, hanem wrote, de azontúl jó.

 

SimplePortal 2.3.7 © 2008-2024, SimplePortal