parsgreen.com
article

نمایش داینامیک و صفحه به صفحه مطالب با آژاکس

ajax-dynamic-page-to-page

استفاده از آژاکس (ajax) به عنوان فناوری نوین در عرصه وب، خیلی از مواقع گزینه مناسبی است برای نمایش محتوا به صورت حرفه ای تر، صرفه جویی در استفاده از امکانات سرور و همچنین کمک به بارگذاری سریع تر صفحات، مخصوصا برای کاربرانی که از سرعت اینترنت پائینی استفاده می کنند؛ با این وجود اگر بخواهیم از فِریم وُرک های (Framework) آژاکسی که بعضا حجمی فراتر از 75 کیلوبایت دارند، برای پروژه ها و صفحات معمولی خود استفاده کنیم، لااقل با وضعیت کیفیت اینترنت در کشورمان جور در نمی آید، پس بهتر است کدهای سبک و ساده اما با قدرتمندی و کاربری مشابه را جایگزین آنها کنیم، ارزش این کار در استفاده های آموزشی و قابل فهم تر بودن این شیوه است، به همین منظور در این مطلب، اسکریپتی کاربردی را قرار داده ایم که به کمک آن می توانید محتوای html را به صورت صفحه به صفحه و به شکلی حرفه ای بارگذاری کنید و نمایش دهید.

قبل از پرداختن به ادامه آموزش یادآور می شویم که این کد توسط برنامه نویسان خارجی و در اصل سازگار با زبان انگلیسی نوشته شده که برای راحتی کاربران، متناسب با زبان فارسی بهینه سازی شده است تا به بهترین شکل و بدون نقص قابل استفاده باشد.

دانلود اسکریپت نمایش داینامیک مطالب با آژاکس


قبل از هر چیز ابتدا بسته زیر را دریافت کنید، این بسته حاوی چند فایل با نام های 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 doesn't 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 isn't 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 isn't disabled (CSS classname "disabled")
                        pageinstance.selectpage(parseInt(targetobj.getAttribute("rel")))
                    }
                }
                return false
            }
        }
    },

    selectpage:function(selectedpage){
        //replace URL's 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>
پیش نمایش
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» نمایش زنده آمار و اطلاعات با آژاکس (Ajax)
» آموزش نحوه آپلود فایل با php و آژاکس (ajax)
» نمایش نتایج پایگاه داده و فایل php با آژاکس (ajax)
» ارسال اطلاعات فرم با آژاکس (ajax) و نمایش پیام در حال پردازش (loading)
» اعتبار سنجی همزمان فرم با آژاکس (ajax) و php
commentنظرات (۱۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: یوشا
زمان: ۱۳:۵۹:۳۸ - تاریخ: ۱۳۹۱/۱۱/۲۰
سلام
آموزش خیلی خوبی بود...
حال داد!
نویسنده: Saeid
زمان: ۱۱:۰۵:۵۰ - تاریخ: ۱۳۹۱/۱۲/۲۲
سلام ، آموزش هاتون بیسته :-)
نویسنده: ابوالفضل
زمان: ۱۱:۵۱:۴۶ - تاریخ: ۱۳۹۱/۱۲/۲۸
سلام من میخام بجای صفحات html که بار گذاری میکنه
صفحات php بهش بدم اما وقتی فرمت رو تغییر میدم دیگه کار نمیکنه و روی لودینگ میمونه باید چیکار کنم
پاسخ: 
سلام
باید در دو قسمت فایل ها را مطابق با php تنظیم کنید، یک مورد نام خود فایل ها است که در فولدر pages قرار می گیرند، فرمت این فایل ها باید php باشد، مورد دیگر قسمت مربوط به تنظیم آدرس صفحات در کد است یعنی این تکه کد:
pages: ["pages/example.php", "pages/example2.php", "pages/example3.php", "pages/example4.php"]
که مطابق نمونه باید با نام فایل ها مطابقت کند، اگر این دو مرحله را درست انجام دهید نباید مشکل دیگری باشد.
نکته: نمایش پیام در حال بارگذاری و بارگذاری نشدن صفحات به این معنی است که فایل پیدا نشده است.
نویسنده: مازیار
زمان: ۲۳:۲۱:۳۹ - تاریخ: ۱۳۹۲/۰۲/۰۷
سلام
من یک سوال داشتم که گمان کنم به همین مطلب مربوط باشد در صفحه سرچ تصویر گوگل وقتی سرچ می کنیم به طور مثال 10 تصویر لود می کند وقتی اسکرول را پایین می اوریم 10 تصویر بعدی لود می شود به همین ترتیب هر چه قدر اسکرول پایین تر می اید تصاویر بیشتری لود می شود و کل تصاویر یکجا بارگذاری نمی شود لطفا در صورت امکان آموزش این مورد را در سایت قرار دهید ممنون
پاسخ: 
سلام
ممنون از پیشنهاد خوب شما، به دلیل حجم بالای آموزش های درخواستی کاربران و فرصت کم، مدتی زمان خواهد برد تا به این آموزش پرداخته شود، ضمن اینکه انجام این مورد نیازمند آشنایی با موارد پیچیده تری از جاوا اسکریپت و آژاکس است.
نویسنده: Abolfazl
زمان: ۲۲:۱۳:۰۶ - تاریخ: ۱۳۹۲/۰۳/۰۴
سلام
چطوری به جای شماره ی صفخات نام اونها رو قرار بدم مثلا ثبت نام، ورود،....؟
پاسخ: 
سلام
برای این کار باید فایل ajax-pagetopage.js را ویرایش و خط 87 قسمت مربوط به ایجاد لینک را که در حلقه for قرار دارد مطابق نیازتان تغییر دهید، در حالت پیش فرض i+1 به عنوان عبارت لینک قرار می گیرد.
نویسنده: masuod
زمان: ۱۶:۵۶:۰۹ - تاریخ: ۱۳۹۲/۰۵/۲۹
سلام من میخوام به جای این پیج ها عکس قرار بدم که با کلیک روی هر کدام صفحه مورد نظر باز بشه.
مثل یه گالری عکس باشه اما عکس رو برام بزرگ نکنه بلکه یه html یا swf را برام باز کنه و عکس ها هم بصورت کشوئی جا بجا بشه.
اینم با آژاکس حل میشه.
لطفا راهنمایی کنید؟
پاسخ: 
سلام
برای این کار باید به دنبال یک اسلایدر تصاویر باشید، توانایی کد حاضر در حدی است که ملاحظه می کنید، بیش از این نیاز به کدنویسی و تغییرات زیادی دارد، البته برای صرف نمایش عکس یا فلش می توانید کدها را در صفحات HTML حاضر درج کنید.
نویسنده: سعید
زمان: ۱۱:۴۹:۴۹ - تاریخ: ۱۳۹۲/۰۶/۲۶
سلام
ممنون از مطالب و آموزش های خوبتون.
من این آموزش رو پیاده کردم و به خوبی هم جواب داد. منتها من می خوام این رو توی چند جای مختلف سایتم استفاده کنم، که البته باز هم به درستی کار می کنه و تنها مشکلی که پیش میاد، بحث کش یا همون کوکی هاست.
میشه لطفاً راهی رو بگید تا بشه برای هر صفحه مختلفی که از این آموزش استفاده میشه، کوکی ها و کش متفاوتی ایجاد بشه؟
ممنون
پاسخ: 
سلام
قسمت cache به صورت غیر تکراری ایجاد می شود، لذا نیازی به نغییر آن نیست، تنها برای کوکی باید این کار را به روش زیر انجام دهید:
var myajaxinstance=new ajaxpageclass.createajax(ajaxonpages, "ajaxcontent", ["pagetopage-top", "pagetopage-bottom"])
در نمونه کد بالا، ajaxcontent نام کوکی است که توسط کد تولید می شود، می توانید یک نام مختلف برای هر صفحه انتخاب کنید، به فرض ajaxcontent1، ajaxcontent2 و...
نویسنده: رضا
زمان: ۱۲:۳۴:۱۵ - تاریخ: ۱۳۹۲/۰۸/۰۸
سلام، منمون از شما
من این آموزش رو پیدا کردم اما یک مشکل داره .
این صفحات باید برای اولین بار رفرش بشن مگر نه به صورت داینامیک تغییر نمی کنن.مثلا صفحه 1 اگه تغییر پیدا کنه باید یکبار رفرش بشه و از اون به بعد دیگه به صورت داینامیک اگه صفحه 1 رو تغییر بدیم تغییر می کنه این کار که فایده ای نداره؟؟؟
پاسخ: 
می توانید از متاتگ زیر در صفحات (جانبی) استفاده کنید تا از cache شدن آنها جلوگیری شود:
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
یک روش حرفه ای تر این است که با استفاده از PHP، در قسمت آدرس فایل یک عبارات رندوم به صورت متغیر GET ایجاد کنید، به فرض آدرس ها به این نحو باشد:
pages/example.html?rnd=xu73hd0e9dy6rhf5k
این عبارت رندوم باعث می شود تا مرورگر هر بار تصور کند که فایل شما یک فایل جدید است و آن را به صورت اولیه بارگذاری کند.
نویسنده: سیا
زمان: ۱۵:۰۵:۰۶ - تاریخ: ۱۳۹۲/۱۰/۲۵
دستت درد نکنه گلم :)
نویسنده: mostafa
زمان: ۱۰:۵۷:۵۱ - تاریخ: ۱۳۹۳/۰۶/۰۹
سلام
یه سوال داشتم، من پنج تا تب دارم که با جاوا اسکریپت کار میکنه این پنج تب هر کدوم یه قسمت داره، حالا من میخوام برای هر تب یه کد صفحه بندی با آژاکس بذارم، اگر راهنمایی کنید ممنون میشم.
راستی... واقعا سایت خوبی دارید...
پاسخ: 
سلام
سوالتان خیلی واضح نیست! نیاز به بررسی صفحه و ذکر دقیق جزئیات کاری است که می خواهید انجام دهید.
نویسنده: محمد
زمان: ۰۱:۱۵:۳۶ - تاریخ: ۱۳۹۳/۰۷/۰۶
سلام
ممنونم از آموزش خوبتون
یه سوال ضروری داشتم
اگه بخوام اینو در وبلاگ استفاده کنم چطوری میشه؟
به عنوان مثال آدرس صفحات وبلاگ من اینجوریه در بلاگفا
http://test.blogfa.com/?p=2
چطور میتونم فقط قسمت محتوای صفحه بالا رو نمایش بدم
پاسخ: 
سلام
امکان تفکیک محتوا از سایر بخش ها در صفحات وبلاگ ها وجود ندارد، لذا این کد برای هدف شما مناسب نیست!
نویسنده: محمد
زمان: ۱۲:۲۸:۰۰ - تاریخ: ۱۳۹۳/۰۷/۰۷
من خودم این کار انجام دادم
با استفاده از php و jquery فقط قسمت محتوای وبلاگ رو توی صفحه example.php بارگذاری کردم
نویسنده: رضا
زمان: ۱۲:۲۱:۲۸ - تاریخ: ۱۳۹۳/۰۷/۰۹
سلام و تشکر از آموزش خوبتون
چطوری میشه صفحات رو از یک url مثل http://webgoo.ir
بارگذاری کرد
پاسخ: 
سلام
تست نشده، اما به نظر این کد چنین قابلیتی ندارد، در Ajax به دلیل رعایت امنیت مرورگر کاربران، امکان ارسال درخواست به سرورهای دیگر وجود ندارد.
نویسنده: محسن یزدانی
زمان: ۲۱:۰۴:۵۸ - تاریخ: ۱۳۹۳/۰۷/۱۶
سلام می تونیم کاری کنیم که مقدار فایل بارگذاری شده رو به صورت درصد نشون بده؟
پاسخ: 
سلام
با این کد خیر، باید از جی کئوری و آموزش های جداگانه ای استفاده کنید.
نویسنده: مصطفی
زمان: ۱۴:۱۹:۵۴ - تاریخ: ۱۳۹۳/۰۹/۰۵
با سلام و تشکر
من می خواستم به جای شماره ها ، منوی خودم رو قرار بدم ولی هرکاری می کنم نمی شود.
لطفا در مثال توضیح دهید
با تشکر
پاسخ: 
سلام
اعداد این کد به صورت داینامیک (در حلقه for خط 85) ساخته می شوند و (حداقل به راحتی) قابل تغییر نیستند!
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

4 × 1
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...