ساخت لود محتوی همراه با تغییر آدرس

[tarhaneh]

سلام

بهتره اول این سایت رو نگاه کنین تا بهتر توضیحاتمو متوجه بشین
http://livedemo00.template-help.com/wt_39905/#!/pagePrices

چطوری میتونم با جیکویری یه چیزی مثل اسلایدر درست کنم، به این صورت که وقتی روی یه دکمه ای کلیک میشه مطالبی رو که مخفی شده با انیمیشن دلخواه نشون بده (و قبلی رو مخفی کنه) و وقتی روی دکمه ی دیگه ای کلیک میشه باز به همین ترتیب عمل کنه (یعنی محتوی مربوط به هر دکمه مخصوص خودشه)
تا اینجا کار زیاد مشکل نیست و خودم درستش کردم اما مسله ای که هست اینه که میخوام وقتی روی دکمه کلیک میشه و... آدرس هم تغییر کنه ، مثلا به انتهای آدرس /#about اضافه بشه بدون اینکه صفحه رفرش بشه
اصل قضیه هم اینجاس که وقتی آدرس صفحه مثل www.mysite.com/#about رو مستقیم وارد کنی محتوی مربوط به اونو نشون بده
درضمن نمیخوام محتوی بصورت آجاکس لود بشه میخوام همه ی محتوی تو فایل اصلیم باشه فقط به صورت مخفی بمونه و موقع نیاز فعال بشه

توضیحاتم یه خورده گیج کننده شد ولی اگه صفحه ی زیر رو نگاه کنین متوجه میشین چون دقیقا مثل چیزیه که من میخوام
http://livedemo00.template-help.com/wt_39905/#!/pageHome
تو این سایت وقتی رو دکمه های منوی پایینی کلیک میشه محتوی مربوطش نشون داده میشه و آدرس هم تغییر میکنه (بدون رفرش) و همچنین وقتی آدرس رو مستقیم میزنی (مثل زیر)
http://livedemo00.template-help.com/wt_39905/#!/pagePrices
محتوی مربوطش میاد

[jalil_gh]

وقتی صفحه لود شد مقدار location.hash رو بگیر و متناسب با اون کارتو انجام بده

$(function () {
// first hide all the things that should be hidden

// now get the hash and do some proccessing if necessary
var loc = location.hash;
// and now show the specific part of your page
$(loc).show();
});

وقتی هم که یه لینکی کلیک شد اول متد preventDefault شی event رو فراخوانی کن و با توجه به href لینک کلیک شده قسمت مورد نظر رو نشون بده

[tarhaneh]

لطفا بیشتر توضیح بدید من زیاد متوجه نشدم

ببینید این کدیه که من نوشتم (البته بدون اون قابلیتی که میخوام) اگه میشه شما این قابلیت رو بهش اضافه کنین و یه توضیحی هم بدین که بدونم چیکار کردین

$(document).ready(function(){
$(".contact, .about, .sample").click(function(){
var tanimate = '#' + $(this).attr('class') ;
$('#header').animate({top:'-350px',opacity:'0'},300,function(){$(this).css('di splay','none')});
$('#navigation').animate({bottom:'-220px',opacity:'0'},300,function(){$(this).css('di splay','none')});
$(tanimate).delay(180).css('display','block').anim ate({opacity:'1'},300);
});
$('.back').click(function(){
$("#contact, #about, #sample").animate({opacity:'0'},300,function(){$(this).css ('display','none')});
$('#header').css('display','block').animate({top:' 0px',opacity:'1'},300);
$('#navigation').css('display','block').animate({b ottom:'0px',opacity:'1'},300);
});
});

[tarhaneh]

یه همچین چیزی ساختم کار کرد:

$(document).ready(function(){
var hash = window.location.hash;
if (hash=="#about") {
$('#header').animate({top:'-350px',opacity:'0'},300,function(){$(this).css('di splay','none')});
$('#navigation').animate({bottom:'-220px',opacity:'0'},300,function(){$(this).css('di splay','none')});
$('#about').delay(180).css('display','block').anim ate({opacity:'1'},300);
}
$(".contact, .about, .sample").click(function(){
var tanimate = '#' + $(this).attr('class') ;
$('#header').animate({top:'-350px',opacity:'0'},300,function(){$(this).css('di splay','none')});
$('#navigation').animate({bottom:'-220px',opacity:'0'},300,function(){$(this).css('di splay','none')});
$(tanimate).delay(180).css('display','block').anim ate({opacity:'1'},300);
});
$('.back').click(function(){
$("#contact, #about, #sample").animate({opacity:'0'},300,function(){$(this).css ('display','none')});
$('#header').css('display','block').animate({top:' 0px',opacity:'1'},300);
$('#navigation').css('display','block').animate({b ottom:'0px',opacity:'1'},300);
});
});

منتهی الان میخوام وقتی روی دکمه ای با کلاس back کلیک میشه آدرس به حالت اولیه برگرده (یعنی هش پاک بشه) و بره تو صفحه ی اول، برای این باید چیکار کنم ؟

[SlowCode]

از متد attr استفاده کن.

$('.someElement').attr('href', '#');
//OR
$('.someElement').attr('href', 'index.php');

[tarhaneh]

از متد attr استفاده کن.

$('.someElement').attr('href', '#');
//OR
$('.someElement').attr('href', 'index.php');


خب این به چه دردی میخوره ؟!!!
راهی نیست که کلا هش رو حذف کرد از آدرس ؟ یعنی وقتی دکمه ی .back زده میشه # و مقدار جلوی اون پاک بشه ؟

بعدشم راهی هست که این کارو بدون هش انجام داد ؟ یعنی آدرس به این شکل بشه www.mysite.com/about بدون اینکه صفحه رفرش بشه
مثل این سایت http://trevordavis.net/blog
البته این سایت محتویاتش رو با آجاکس لود میکنه اما به هرحال آدرسش به شکلی که گفتم عوض میشه بدون اینکه صفحه رفرش بشه

[jalil_gh]

میتونی از history.pushState استفاده کنی به این صورت

$('a').click(function (e) {
e.preventDefault();

// load new page with ajax and insert it

// now change
if (window.history) {
history.pushState(null, null, $(this).attr('href'));
}
});

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

[SlowCode]

خب این به چه دردی میخوره ؟!!!
راهی نیست که کلا هش رو حذف کرد از آدرس ؟ یعنی وقتی دکمه ی .back زده میشه # و مقدار جلوی اون پاک بشه ؟

خب تو میخوای هش رو حذف کنی پس میای خاصیت href رو تغییر میدی، حالا یا برابر با # میکنی یا اسم همون صفحه جاری میکنی.
تو یکی از کدهای بالا رو بنویس و امتحان کن.(هر دوتا رو ننویسیا)
آقا جلیل تو پست دوم جواب رو گفت:

وقتی هم که یه لینکی کلیک شد اول متد preventDefault شی event رو فراخوانی کن و با توجه به href لینک کلیک شده قسمت مورد نظر رو نشون بده

[tarhaneh]

میتونی از history.pushState استفاده کنی به این صورت

$('a').click(function (e) {
e.preventDefault();

// load new page with ajax and insert it

// now change
if (window.history) {
history.pushState(null, null, $(this).attr('href'));
}
});

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

چطوری باید ازش استفاده کنم ؟

[tarhaneh]

میتونی از history.pushState استفاده کنی به این صورت

$('a').click(function (e) {
e.preventDefault();

// load new page with ajax and insert it

// now change
if (window.history) {
history.pushState(null, null, $(this).attr('href'));
}
});

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

چطوری باید ازش استفاده کنم ؟