Ajax Side Panel script - strona z pnelem

Side Ajax - to skrypt strony z panelem, który pobiera stronę w witrynie przy użyciu Ajax-a i wyświetla ją jako część bieżącej strony, przy użyciu slajdów z panelu jako podstronę. Skrypt jest idealny do wyświetlania krótkich stron i podstron, takich jak np. "Kontakt" lub "Warunki korzystania z usługi" lub tym podobne. Strona z użyciem ajaxa sprawia iż użytkownik nie czeka na otwarcie nowego okna i nie powoduje niepotrzebnych opóźnień i dezorientacji dla użytkownika. W Panelu Ajax Side, użytkownik pozostaje na tej samej stronie, podczas gdy następne strony lub podstrony są ładowane jednocześnie i asynchronicznie. Skrypt obsługuje ładowania strony albo za pośrednictwem Ajax lub "iframe". Później może być używany do ładowania bardziej skomplikowanych stron internetowych na swojej stronie lub z zewnętrznych domen (Ajax jest jednak ograniczony w tym zakresie przez samą politykę pochodzenia domeny).

Jak to działa już widać a TUTAJ przytkład ze strony autorów.

Oto zawartość HEAD:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/ddajaxsidepanel.css" />
<script src="/ddajaxsidepanel.js">

/***********************************************
* Ajax Side Panel script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

Oto pliki do umieszczenia w folderze strony:

ddajaxsidepanel.css
ddajaxsidepanel.js
i obraz ładowania oczywiście pliki .css i .js musimy poprawić pod własne potrzeby.

Wywłonie skryptu w kodzie strony sekcji BODY:

<ul>
<li><a href="http://www.dynamicdrive.com" rel="ajaxpanel">Dynamic Drive</a> (external link, auto loads in IFRAME)</li>
<li><a href="http://www.cssdrive.com" rel="ajaxpanel">CSS Drive</a> (external link, auto loads in IFRAME)</li>
<li><a href="/index.html" rel="ajaxpanel">My Home Page</a> (internal link, auto loads using Ajax)</li>
<li><a href="http://www.mysite.com/index.html" rel="ajaxpanel">My Home Page</a> (still internal link, assuming mysite.com is your site's domain, auto loads using Ajax)</li>
<li><a href="http://www.mysite.com/index.html" rel="ajaxpanel" data-loadtype="iframe">My Home Page</a> (internal link, but explicitly load in iframe due to data attribute)</li>
</ul>

 

Projekt © 2009 - INFOPROG 67905 odwiedzin