قبل از پرداختن به ادامه آموزش یادآور می شویم که این کد توسط برنامه نویسان خارجی و در اصل سازگار با زبان انگلیسی نوشته شده که برای راحتی کاربران، متناسب با زبان فارسی بهینه سازی شده است تا به بهترین شکل و بدون نقص قابل استفاده باشد.
دانلود اسکریپت نمایش داینامیک مطالب با آژاکس
قبل از هر چیز ابتدا بسته زیر را دریافت کنید، این بسته حاوی چند فایل با نام های ajax-pagetopage.js (فایل اصلی برنامه، کد نویسی شده به صورت آژاکس)، ajax-pagetopage.html (صفحه تست برنامه، جهت نمونه)، ajax-pagetopage.css (فایل css برای تنظیمات مربوط به شکل ظاهری)، loading.gif (تصویری برای نمایش در حالت بارگذاری محتوا) و یک پوشه حاوی چهار صفحه html ساده، جهت نمونه است.
دانلود اسکریپت بارگذاری داینامیک مطالب با آژاکس - حجم: کمتر از 10 کیلوبایت
نحوه استفاده از اسکریپت بارگذاری و نمایش داینامیک مطالب با آژاکس
استفاده از این برنامه بسیار آسان و سریع است، کافی است صفحات مورد نظر خود را در پوشه ای در لوکال هاست یا سرور قرار دهید و سپس مطابق فایل نمونه (که در بسته بالا قرار داده شده است)، آنها را جایگزین کرده و فراخوانی کنید؛ با این وجود برای آشنایی بیشتر با نحوه کارکرد کدها و مشاهده پیش نمایش، مطالب زیر را مطالعه نمائید.
فایل ajax-pagetopage.js، کدنویسی شده با آژاکس
این فایل حاوی ترکیبی از کدهایی به زبان جاوا اسکریپت و xml است که در مجموع آژاکس را تشکیل می دهند، به اختصار می توان گفت که این فایل با توجه به صفحه درخواستی کاربر، تقاضایی به سرور ارسال می کند و در مقابل محتوای فایل html مقصد را در بلاک های div خروجی می دهد، این فایل را باید در قسمت head صفحه به صورت زیر ایمپورت کنید.
<script type="text/javascript" src="ajax-pagetopage.js"></script>
محتویات فایل ajax-pagetopage.js، کد اصلی برنامه:
var ajaxpageclass=new Object()
ajaxpageclass.loadstatustext="<img src=\"loading.gif\" alt=\"loading\" height=\"16\" width=\"16\" />چند لحظه صبر کنید..." // HTML to show while requested page is being fetched:
ajaxpageclass.ajaxbustcache=false // Bust cache when fetching pages?
ajaxpageclass.pagetopagepersist=true //enable persistence of last viewed pagetopaging link (so reloading page doesnt reset page to 1)?
ajaxpageclass.pagerange=4 // Limit page links displayed to a specific number (useful if you have many pages in your ajax)?
ajaxpageclass.ellipse="..." // Ellipse text (no HTML allowed)
/////////////// No need to edit beyond here /////////////////////////
ajaxpageclass.connect=function(pageurl, divId){
var page_request = false
var bustcacheparameter=""
if (window.XMLHttpRequest && !document.all) // if Mozilla, Safari etc (skip IE7, as object is buggy in that browser)
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE6 or below
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(divId).innerHTML=this.loadstatustext //Display "fetching page message"
page_request.onreadystatechange=function(){ajaxpageclass.loadpage(page_request, divId)}
if (this.ajaxbustcache) //if bust caching of external page
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open(GET, pageurl+bustcacheparameter, true)
page_request.send(null)
}
ajaxpageclass.loadpage=function(page_request, divId){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divId).innerHTML=page_request.responseText
}
}
ajaxpageclass.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}
ajaxpageclass.setCookie=function(name, value){
document.cookie = name+"="+value
}
ajaxpageclass.getInitialPage=function(divId, pageinfo){
var persistedpage=this.getCookie(divId)
var selectedpage=(this.pagetopagepersist && this.getCookie(divId)!=null)? parseInt(this.getCookie(divId)) : pageinfo.selectedpage
return (selectedpage>pageinfo.pages.length-1)? 0 : selectedpage //check that selectedpage isnt out of range
}
ajaxpageclass.createajax=function(pageinfo, divId, pagetopageIds){ //MAIN CONSTRUCTOR FUNCTION
this.pageinfo=pageinfo //store object containing URLs of pages to fetch, selected page number etc
this.divId=divId
this.pagetopageIds=pagetopageIds //array of ids corresponding to the pagetopaging DIVs defined for this pageinstance
//NOTE: this.pagetopageInfo stores references to various components of each pagetopaging DIV defined for this pageinstance
//NOTE: Eg: divs[0] = 1st pagetopage div, pagelinks[0][0] = 1st page link within 1st pagetopage DIV, prevlink[0] = previous link within pagetopage DIV etc
this.pagetopageInfo={divs:[], pagelinks:[[]], prevlink:[], nextlink:[], previouspage:null, previousrange:[null,null], leftellipse:[], rightellipse:[]}
this.dopagerange=false
this.pagerangestyle=
this.ellipse=<span style="display:none">+ajaxpageclass.ellipse+</span> //construct HTML for ellipse
var initialpage=ajaxpageclass.getInitialPage(divId, pageinfo)
this.buildpagetopaging(initialpage)
this.selectpage(initialpage)
}
ajaxpageclass.createajax.prototype={
buildpagetopaging:function(selectedpage){ //build pagetopaging links based on length of this.pageinfo.pages[]
this.dopagerange=(this.pageinfo.pages.length>ajaxpageclass.pagerange) //Bool: enable limitpagerange if pagerange value is less than total pages available
this.pagerangestyle=this.dopagerange? style="display:none" : //if limitpagerange enabled, hide pagetopaging links when building them
this.pagetopageInfo.previousrange=null //Set previousrange[start, finish] to null to start
if (this.pageinfo.pages.length<=1){ //no 0 or just 1 page
document.getElementById(this.pagetopageIds[0]).innerHTML=(this.pageinfo.pages.length==1)? "Page 1 of 1" : ""
return
}
else{ //construct pagetopage interface
var pagetopageHTML=<div class="pagetopaging"><ul>\n
pagetopageHTML+=<li><a href="#previous" rel="+(selectedpage-1)+">«</a></li>\n //previous link HTML
for (var i=0; i<this.pageinfo.pages.length; i++){
var ellipses={left: (i==0? this.ellipse : ), right: (i==this.pageinfo.pages.length-1? this.ellipse : )} //if this is 1st or last page link, add ellipse next to them, hidden by default
pagetopageHTML+=<li>+ellipses.right+<a href="#page+(i+1)+" rel="+i+" +this.pagerangestyle+>+(i+1)+</a>+ellipses.left+</li>\n
}
pagetopageHTML+=<li><a href="#next" rel="+(selectedpage+1)+">بعدی »</a></li>\n //next link HTML
pagetopageHTML+=</ul></div>
}// end construction
this.pagetopageInfo.previouspage=selectedpage //remember last viewed page
for (var i=0; i<this.pagetopageIds.length; i++){ //loop through # of pagetopaging DIVs specified
var pagetopagediv=document.getElementById(this.pagetopageIds[i]) //reference pagetopaging DIV
this.pagetopageInfo.divs[i]=pagetopagediv //store ref to this pagetopage DIV
pagetopagediv.innerHTML=pagetopageHTML
var pagetopagelinks=pagetopagediv.getElementsByTagName("a")
var ellipsespans=pagetopagediv.getElementsByTagName("span")
this.pagetopageInfo.prevlink[i]=pagetopagelinks[0]
if (pagetopagelinks.length>0)
this.pagetopageInfo.nextlink[i]=pagetopagelinks[pagetopagelinks.length-1]
this.pagetopageInfo.leftellipse[i]=ellipsespans[0]
this.pagetopageInfo.rightellipse[i]=ellipsespans[1]
this.pagetopageInfo.pagelinks[i]=[] //array to store the page links of pagetopaging DIV
for (var p=1; p<pagetopagelinks.length-1; p++){
this.pagetopageInfo.pagelinks[i][p-1]=pagetopagelinks[p]
}
var pageinstance=this
pagetopagediv.onclick=function(e){
var targetobj=window.event? window.event.srcElement : e.target
if (targetobj.tagName=="A" && targetobj.getAttribute("rel")!=""){
if (!/disabled/i.test(targetobj.className)){ //if this pagetopaging link isnt disabled (CSS classname "disabled")
pageinstance.selectpage(parseInt(targetobj.getAttribute("rel")))
}
}
return false
}
}
},
selectpage:function(selectedpage){
//replace URLs root domain with dynamic root domain (with or without "www"), for ajax security sake:
if (this.pageinfo.pages.length>0){
var ajaxfriendlyurl=this.pageinfo.pages[selectedpage].replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ajaxpageclass.connect(ajaxfriendlyurl, this.divId) //fetch requested page and display it inside DIV
}
if (this.pageinfo.pages.length<=1) //if this ajax only contains only 1 page (or 0)
return //stop here
var pagetopageInfo=this.pagetopageInfo
for (var i=0; i<pagetopageInfo.divs.length; i++){ //loop through # of pagetopaging DIVs specified
//var pagetopagediv=document.getElementById(this.pagetopageIds[i])
pagetopageInfo.prevlink[i].className=(selectedpage==0)? "prevnext disabled" : "prevnext" //if current page is 1st page, disable "prev" button
pagetopageInfo.prevlink[i].setAttribute("rel", selectedpage-1) //update rel attr of "prev" button with page # to go to when clicked on
pagetopageInfo.nextlink[i].className=(selectedpage==this.pageinfo.pages.length-1)? "prevnext disabled" : "prevnext"
pagetopageInfo.nextlink[i].setAttribute("rel", selectedpage+1)
pagetopageInfo.pagelinks[i][pagetopageInfo.previouspage].className="" //deselect last clicked on pagetopaging link (previous)
pagetopageInfo.pagelinks[i][selectedpage].className="currentpage" //select current pagetopaging link
}
pagetopageInfo.previouspage=selectedpage //Update last viewed page info
ajaxpageclass.setCookie(this.divId, selectedpage)
this.limitpagerange(selectedpage) //limit range of page links displayed (if applicable)
},
limitpagerange:function(selectedpage){
//reminder: selectedpage count starts at 0 (0=1st page)
var pagetopageInfo=this.pagetopageInfo
if (this.dopagerange){
var visiblelinks=ajaxpageclass.pagerange-1 //# of visible page links other than currently selected link
var visibleleftlinks=Math.floor(visiblelinks/2) //calculate # of visible links to the left of the selected page
var visiblerightlinks=visibleleftlinks+(visiblelinks%2==1? 1 : 0) //calculate # of visible links to the right of the selected page
if (selectedpage<visibleleftlinks){ //if not enough room to the left to accomodate all visible left links
var overage=visibleleftlinks-selectedpage
visibleleftlinks-=overage //remove overage links from visible left links
visiblerightlinks+=overage //add overage links to the visible right links
}
else if ((this.pageinfo.pages.length-selectedpage-1)<visiblerightlinks){ //else if not enough room to the left to accomodate all visible right links
var overage=visiblerightlinks-(this.pageinfo.pages.length-selectedpage-1)
visiblerightlinks-=overage //remove overage links from visible right links
visibleleftlinks+=overage //add overage links to the visible left links
}
var currentrange=[selectedpage-visibleleftlinks, selectedpage+visiblerightlinks] //calculate indices of visible pages to show: [startindex, endindex]
var previousrange=pagetopageInfo.previousrange //retrieve previous page range
for (var i=0; i<pagetopageInfo.divs.length; i++){ //loop through pagetopage divs
if (previousrange){ //if previous range is available (not null)
for (var p=previousrange[0]; p<=previousrange[1]; p++){ //hide all page links
pagetopageInfo.pagelinks[i][p].style.display="none"
}
}
for (var p=currentrange[0]; p<=currentrange[1]; p++){ //reveal all active page links
pagetopageInfo.pagelinks[i][p].style.display="inline"
}
pagetopageInfo.pagelinks[i][0].style.display="inline" //always show 1st page link
pagetopageInfo.pagelinks[i][this.pageinfo.pages.length-1].style.display="inline" //always show last page link
pagetopageInfo.leftellipse[i].style.display=(currentrange[0]>1)? "inline" : "none" //if starting page is page3 or higher, show ellipse to page1
pagetopageInfo.rightellipse[i].style.display=(currentrange[1]<this.pageinfo.pages.length-2)? "inline" : "none" //if end page is 2 pages before last page or less, show ellipse to last page
}
}
pagetopageInfo.previousrange=currentrange
},
refresh:function(pageinfo){
this.pageinfo=pageinfo
var initialpage=ajaxpageclass.getInitialPage(this.divId, pageinfo)
this.buildpagetopaging(initialpage)
this.selectpage(initialpage)
}
}
توضیح:
- مواردی که در این کد قابل تغییر هستند، مقادیر ajaxpageclass.loadstatustext مربوط به پیام درحال بارگذاری، قسمت ajaxpageclass.ajaxbustcache=false مربوط به تنظیمات حافظه یا به اصطلاح کش شدن صفحات، قسمت ajaxpageclass.pagetopagepersist=true مربوط به ذخیره شدن صفحات انتخابی کاربر (مثلا اگر کاربر در صفحه 2، دکمه رفرش را کلیک کند، پس از بارگذاری مجدد صفحه، اسلاید از صفحه دوم شروع می شود نه از صفحه اول) این قابلیت توسط کوکی (Cookie) میسر می شود و عنصر ajaxpageclass.pagerange برای مشخص کردن حداکثر تعداد لینک ها برای حالت صفحه به صفحه.
فایل ajax-pagetopage.html جهت نمونه
این فایل حاوی کدهایی جهت نمونه است که با پیروی از آن، به راحتی می توانید صفحات مورد نظر خود را جایگزین کنید، قسمت اصلی بخش کاربری اسکریپت، تکه کد زیر است که در آن نام و آدرس صفحات تنظیم می شود.
<script type="text/javascript">
var ajaxonpages={
pages: ["pages/example.html", "pages/example2.html", "pages/example3.html", "pages/example4.html"],
selectedpage: 0 //set page shown by default (0=1st page)
}
var myajaxinstance=new ajaxpageclass.createajax(ajaxonpages, "ajaxcontent", ["pagetopage-top", "pagetopage-bottom"])
</script>
خروجی این قسمت به صورت سه بلاک div نمایان می شود.
<div id="pagetopage-top"></div>
<div id="ajaxcontent"></div>
<div id="pagetopage-bottom"></div>
توضیح:
- دقت کنید که حتما بلاک های div، بالاتر از کد جاوا اسکریپتی قرار داده شوند، در غیر اینصورت ممکن است موجب از کار افتادن برنامه شود.
- بلاک های بالا با آی دی مشخص، به ترتیب برای نمایش دکمه های بالایی، محتوای صفحات و دکمه های پائینی مورد استفاده قرار می گیرند که می توانید آن را باب سلیقه خود تنظیم کنید.
فایل ajax-pagetopage.css برای اعمال تنظیمات ظاهری
این فایل برای ایجاد جلوه های بصری از جمله رنگ، پس زمینه و ... کاربرد دارد، اگر شکل فعلی برنامه را نمی پسندید، با داشتن تسلط نسبی روی css می توانید مقادیر را به صورت دلخواه ویرایش کنید.
.pagetopaging{
padding: 2px;
margin: 1em 0;
clear: both;
}
.pagetopaging ul{
margin: 0;
padding: 0;
text-align: right; /*Set to "left" or "right" to left/right align pagetopaging interface*/
font-size: 100%;
}
.pagetopaging li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
*:first-child+html .pagetopaging li a{ /*IE7 only CSS hack*/
margin-right: 4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE7 */
}
* html .pagetopaging li a{ /*IE6 and below CSS hack*/
margin-right: 4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE6 and below browsers*/
}
.pagetopaging a, .pagetopaging a:visited, .pagetopaging a:active{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagetopaging a:hover{
border: 1px solid #2b66a5;
color: #000;
background-color:#f9f9f9;
}
.pagetopaging a.currentpage{ /*Style for currently selected page link*/
background-color: #2e6ab1;
color: #FFF !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}
.pagetopaging a.disabled, .pagetopaging a.disabled:hover{ /*Style for "disabled" previous or next link*/
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}
.pagetopaging a.prevnext{ /*Style for previous and next link*/
font-weight: bold;
}
پیش نمایش بارگذاری داینامیک مطالب با آژاکس
در زیر کد و پیش نمایش آنلاین این اسکریپت را جهت تست و بررسی قرار داده ایم که می توانید از آن استفاده کنید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش صفحه به صفحه با آژاکس</title>
<!--http://webgoo.ir-->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
</style>
<link rel="stylesheet" type="text/css" href="ajax-pagetopage.css" />
<script type="text/javascript" src="ajax-pagetopage.js"></script>
</head>
<body>
<div id="pagetopage-top"></div>
<div id="ajaxcontent"></div>
<div id="pagetopage-bottom"></div>
<script type="text/javascript">
var ajaxonpages={
pages: ["pages/example.html", "pages/example2.html", "pages/example3.html", "pages/example4.html"],
selectedpage: 0 //set page shown by default (0=1st page)
}
var myajaxinstance=new ajaxpageclass.createajax(ajaxonpages, "ajaxcontent", ["pagetopage-top", "pagetopage-bottom"])
</script>
</body>
</html>