وب سایت شخصی رحمت حاجی سعدین

می نویسم تا شاید جاودانه شود ...

در اینجا می توانید به آموزش های مفیدی در زمینه های وبلاگ نویسی و برنامه نویسی دسته پیدا کنید

به همراه دست نوشته ها و روزمرگی های خودم:)

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

زیر مجموعه گروه راشنو

صفحه بندی مطالب با استفاده از ajax

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

اول از هرچیز باید قابلیت javascript رو اگه می خواید از سوریس بیان بلاگ استفاده کنید از قسمت امکانات اختیاری فعال کنید و سپس تکه کد زیر رو در قسمت <head:script></head:script>  قرار دهید

<script src="https://code.jquery.com/jquery-1.8.0.js" integrity="sha256-00Fh8tkPAe+EmVaHFpD+HovxWk7b97qwqVi7nLvjdgs=" crossorigin="anonymous"></script>
	<script type="text/javascript" charset="utf-8">
		jQuery(document).ready(function(){
	
			jQuery('#postPagination a').live('click', function(e){
				e.preventDefault();
				var link = jQuery(this).attr('href');
				jQuery('#content').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#content').fadeIn(500); });
					
			});
	
		});
	</script>
	<!-- End the jQuery ajax pagination -->

سپس تکه کد زیر رو در هر قسمتی که دوس دارین ajax بشه قرار دهید مثلا بهتره دنبال تگ     <div class="header"> بگردید و تکه کد زیر رو قبل از اون قرار دهید

<div id='content'>
    <div id='contentInner'>

و در پایان باید 2 تا تگ </div>  اضافه کنید اما در کجا؟؟؟

بهتره دنبال </body> بگردین و بالاتر از اون قطعه کد زیر را قرار بدهید

</div>
</div>

تبریک میگم شما توانستید با استفاده از فناوری آژاکسی صفحه بندی خود رو درست کنین

یه نکته رو بزارین بگم اونم اینه که در آژاکس ما از id ها استفاده می کنیم و شما میتونید id هایی ک گذاشتم رو به دلخواه تغیر بدین

 

نمونه نهایی کار رو در اینجا مشاهده کنید imobook.ir

چاکرم_تا آموزش بعدی wink

تعداد نظرات:(۳)

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
  1. امیر مهدی جبرئیلی۱۰ ارديبهشت ۹۹

    درسته

    من خودم آژاکس رو بلدم و لحنم هم تند نبود

    پیشنهاد می کنم بگردید و مطلبی راجع به مثلا همین آژاکس پیدا کنید کهن کلیتی رو از آژاکس بگه و بعد لینکشو اول مطلب قرار بدهید تا مردم اول اونو بخونن و بعد برن سراغ بقیهش

    • رحمت حاجی سعدین۱۰ ارديبهشت ۹۹

      ممنون

  2. امیر مهدی جبرئیلی۰۸ ارديبهشت ۹۹

    خب

    واقعا عالی

    فقط آموزشی که دادید کامل نبود

    اول بگویید که AJAX چیست

    بعد بیایید از کاربرد آن صحبت کنی

    تازه این هم از کاربردای اصلی Ajax نیست

    • رحمت حاجی سعدین۰۸ ارديبهشت ۹۹

      سلام . خب من هدفم این نیس بیام از بیخو بن یه چیزی رو بگم . هدف از ایحاد فناوریajax  ارسال اطلاعات بدون لود صفحه می باشد . برای استفاده از فناوری ajax روشهای متعددی وجود داره . یکی از اسونترین روش ها استفاده از کتابخانه jquery می باشد . برای آموزش هایی که میزارم باید به بحث مربوطه اشنایی داشته باشین . در مورد اینکه گفتین آموزش کامل نیس به خاطر اینه که گفتم باید با مبحث آشنایی داشت هباشین. در دستورات جاوا اسکریپت گفتم وقتی رو تگ A داخل ایدی #postPagination کلیک میشه بیا تغرات ااعمال کن که شما باید تو قسمت مربوط به صفحه بندی بیاین و id

      #postPagination
      رو ایجاد کنین . موفق باشین


  3. علی۰۳ فروردين ۹۹

    عالیه