رفتن به مطلب

لود شدن هر تب در هنگام کلیک بر روی آن


پست های پیشنهاد شده

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

شما کد آماده برای این کار سراغ ندارید؟!

اگه کد تب رو بزارم میشه آجاکس بزارین روش؟!

لینک به ارسال

خیلی ممنون که انقدر جواب میدین :P:D

عرض کنم که من یه تب درست کردم و فقط میخوام طوری باشه که هر تب فقط زمانی که روش کلیک میشه لود بشه و بقیه تب ها لود نشن تا سرعت سایت افت نکنه

اگه میشه کدی اضافه کرد بهش لطفا بگید تا من کد رو قرار بدم!!!!!!!!!!!

لینک به ارسال

خیلی ممنون که انقدر جواب میدین

شما تا به حال کم از این انجمن جواب گرفتید؟

در مورد آژاکس مطالعه کنید

لینک به ارسال

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

لینک به ارسال

یکی از راههاش اینه که یک قالب برگه بسازید برای لود محتوای تبها مثل


<?php
/*
template name: Ajax Tabs
*/
if(isset($_REQUEST['tab'])) :
$tab = $_REQUEST['tab'];
if($tab==4) {
//محتوای تب چهارم
}
elseif($tab==3) {
//محتوای تب سوم
}
elseif($tab==2) {
//محتوای تب دوم
}
else {
//محتوای تب اول
}
endif; ?>

بعد از ساخت قالب منتشرش می کنید و نشانیش را بر می دارید

باید تب بندیتون به این صورت باشه


<!-- نوار کلیدهای تب -->
<ul>
<li>
<a class="tab-button active" data-tab="1">تب اول </a>
</li>
<li>
<a class="tab-button" data-tab="2">تب دوم </a>
</li>
<li>
<a class="tab-button" data-tab="3">تب سوم </a>
</li>
<li>
<a class="tab-button" data-tab="4">تب چهارم </a>
</li>
</ul>
<!-- / نوار کلیدهای تب -->
<div class="tab-content">
<div id="tab-entry" style="display:none" data-load="1">
<!-- محل نمایش محتوای تبها -->
</div>
<div id="loading">Load ... </div>
</div>

و با این اسکریپت جی کوئری هم کار می کنه


$(document).ready(function() {
$("#tab-entry").load('http://domain.com/ajax-tab',{tab:1});
$("#tab-entry").promise().done(function() {
$("#loading").hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
$(".tab-button").click(function() {
var tab = $(this).attr("data-tab");
var dl = $("#tab-entry").attr("data-load");
if(tab !== dl) {
$(this).parent("li").parent("ul").find(".active").removeClass("active");
$(this).addClass("active");
$("#tab-entry").each(function() {
$(this).attr("data-load", tab).hide('normal').load('http://domain.com/ajax-tab',{tab:tab}).next("#loading").delay(500).show();
});
$("#tab-entry").promise().done(function() {
$("#loading").delay(500).hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
}
});
});

این نشانی


http://domain.com/ajax-tab

همون نشانی برگه منتشر شده است

لینک به ارسال

یکی از راههاش اینه که یک قالب برگه بسازید برای لود محتوای تبها مثل


<?php
/*
template name: Ajax Tabs
*/
if(isset($_REQUEST['tab'])) :
$tab = $_REQUEST['tab'];
if($tab==4) {
//محتوای تب چهارم
}
elseif($tab==3) {
//محتوای تب سوم
}
elseif($tab==2) {
//محتوای تب دوم
}
else {
//محتوای تب اول
}
endif; ?>

بعد از ساخت قالب منتشرش می کنید و نشانیش را بر می دارید

باید تب بندیتون به این صورت باشه


<!-- نوار کلیدهای تب -->
<ul>
<li>
<a class="tab-button active" data-tab="1">تب اول </a>
</li>
<li>
<a class="tab-button" data-tab="2">تب دوم </a>
</li>
<li>
<a class="tab-button" data-tab="3">تب سوم </a>
</li>
<li>
<a class="tab-button" data-tab="4">تب چهارم </a>
</li>
</ul>
<!-- / نوار کلیدهای تب -->
<div class="tab-content">
<div id="tab-entry" style="display:none" data-load="1">
<!-- محل نمایش محتوای تبها -->
</div>
<div id="loading">Load ... </div>
</div>

و با این اسکریپت جی کوئری هم کار می کنه


$(document).ready(function() {
$("#tab-entry").load('http://domain.com/ajax-tab',{tab:1});
$("#tab-entry").promise().done(function() {
$("#loading").hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
$(".tab-button").click(function() {
var tab = $(this).attr("data-tab");
var dl = $("#tab-entry").attr("data-load");
if(tab !== dl) {
$(this).parent("li").parent("ul").find(".active").removeClass("active");
$(this).addClass("active");
$("#tab-entry").each(function() {
$(this).attr("data-load", tab).hide('normal').load('http://domain.com/ajax-tab',{tab:tab}).next("#loading").delay(500).show();
});
$("#tab-entry").promise().done(function() {
$("#loading").delay(500).hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
}
});
});

این نشانی


http://domain.com/ajax-tab

همون نشانی برگه منتشر شده است

ممنون استاد

شرمنده بخدا منظور بدی نداشتم :)

خیلی زحمتت کشیدین

لینک به ارسال

بله هر کدی که الان در برگه ی موجود داره لود می شه رو می تونید در قالب تب بگذارید

لینک به ارسال

من این برگه رو درست کردم و منتشر کردم ولی اررور میده!!


<?php
/*
template name: left ajax
*/
if(isset($_REQUEST['tab'])) :
$tab = $_REQUEST['tab'];
if($tab==4) {
<div id="tab4" class="tabs-wrap">
<?php
$custom_query = new WP_Query(array(
'post_status' =>'published',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'cat' =>'854',
'posts_per_page' =>'7',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<ul>
<?php if($custom_query->have_posts()) :
while($custom_query->have_posts()) : $custom_query->the_post();?>
<li>
<div class="post-thumbnail">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php echo get_the_post_thumbnail(); ?><span class="overlay-icon"></span></a>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="date"><span class="tie-date"><?php
$days = round((date('U') - get_the_time('U')) / (60*60*24));
if ($days==0)
echo timeago();
else
echo " " . $days . " روز پیش";
?></span><br/>
</li>
<?php endwhile;endif; ?>
</ul>
<?php wp_reset_query(); ?>
</div>
}
elseif($tab==3) {
<div id="tab3" class="tabs-wrap">
<?php
$number=7; // number of recent comments desired
$comments = $wpdb->get_results("SELECT * FROM $wpdb->comments WHERE comment_approved = '1' ORDER BY comment_date_gmt DESC LIMIT $number");
?>
<ul id="recentcomments">
<?php
if ( $comments ) : foreach ( (array) $comments as $comment) :
echo '<li class="recentcomments" style="font-size:11px;">' . sprintf(__('%1$s در %2$s'), get_comment_author_link(), '<a href="'. get_comment_link($comment->comment_ID) . '">' . get_the_title($comment->comment_post_ID) . '</a>') . '</li>';
endforeach; endif;?></ul>
</div>
}
elseif($tab==2) {
<div id="tab2" class="tabs-wrap">
<ul>
<?php
query_posts('meta_key=post_views_count&orderby=meta_value_num&order=DESC&showposts=7');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<div class="post-thumbnail">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php echo get_the_post_thumbnail(); ?><span class="overlay-icon"></span></a>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="date"><span class="tie-date"><?php
$days = round((date('U') - get_the_time('U')) / (60*60*24));
if ($days==0)
echo timeago();
else
echo " " . $days . " روز پیش";
?></span><br/>
</span>
</li>
<?php
endwhile; endif;
wp_reset_query();
?>
</ul>
</div>
}
else {
<div id="tab1" class="tabs-wrap">
<?php
$custom_query1 = new WP_Query(array(
'post_status' =>'published',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'cat' =>'894,893,10,851,853,14,855,13,856,857,859,15',
'posts_per_page' =>'8',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<ul>
<?php if($custom_query1->have_posts()) :
while($custom_query1->have_posts()) : $custom_query1->the_post();?>
<li>
<div class="post-thumbnail">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"> <?php echo get_the_post_thumbnail(); ?> <span class="overlay-icon"></span></a>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="date"><span class="tie-date"><?php
$days = round((date('U') - get_the_time('U')) / (60*60*24));
if ($days==0)
echo timeago();
else
echo " " . $days . " روز پیش";
?></span><br/>
</li>
<?php endwhile;endif; ?>
</ul>
<?php wp_reset_query(); ?>
</div>
}
endif; ?>


Parse error: syntax error, unexpected '<' in /home/boursamo/public_html/wp-content/themes/Silver/left-ajax.php on line 8

لینک به ارسال

یه سوال دیگه هم بپرسم.آیا این چیزی که شما دادین فقط تبی که روش کلیک میشه لود میشه؟بقیه تب ها لود نمیشه؟منظورم اینه که این کدها باعث افزایش سرعت لود سایت میشه؟!

لینک به ارسال

تعجبی نداره وسط کد php کد html را که نمی شه همینطوری وارد کرد


<?php
/*
template name: left ajax
*/
if(isset($_REQUEST['tab'])) :
$tab = $_REQUEST['tab'];
if($tab==4) { ?>
<div id="tab4" class="tabs-wrap">
<?php
$custom_query = new WP_Query(array(
'post_status' =>'published',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'cat' =>'854',
'posts_per_page' =>'7',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<ul>
<?php if($custom_query->have_posts()) :
while($custom_query->have_posts()) : $custom_query->the_post();?>
<li>
<div class="post-thumbnail">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php echo get_the_post_thumbnail(); ?><span class="overlay-icon"></span></a>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="date"><span class="tie-date"><?php
$days = round((date('U') - get_the_time('U')) / (60*60*24));
if ($days==0)
echo timeago();
else
echo " " . $days . " روز پیش";
?>
</span></span><br/>
</li>
<?php endwhile;endif; ?>
</ul>
<?php wp_reset_query(); ?>
</div>
<?php
}
elseif($tab==3) {
?>
<div id="tab3" class="tabs-wrap">
<?php
$number=7; // number of recent comments desired
$comments = $wpdb->get_results("SELECT * FROM $wpdb->comments WHERE comment_approved = '1' ORDER BY comment_date_gmt DESC LIMIT $number");
?>
<ul id="recentcomments">
<?php
if ( $comments ) : foreach ( (array) $comments as $comment) :
echo '<li class="recentcomments" style="font-size:11px;">' . sprintf(__('%1$s در %2$s'), get_comment_author_link(), '<a href="'. get_comment_link($comment->comment_ID) . '">' . get_the_title($comment->comment_post_ID) . '</a>') . '</li>';
endforeach; endif;?></ul>
</div>
<?php
}
elseif($tab==2) {
?>
<div id="tab2" class="tabs-wrap">
<ul>
<?php
query_posts('meta_key=post_views_count&orderby=meta_value_num&order=DESC&showposts=7');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<div class="post-thumbnail">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php echo get_the_post_thumbnail(); ?><span class="overlay-icon"></span></a>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="date"><span class="tie-date"><?php
$days = round((date('U') - get_the_time('U')) / (60*60*24));
if ($days==0)
echo timeago();
else
echo " " . $days . " روز پیش";
?></span><br/>
</span>
</li>
<?php
endwhile; endif;
wp_reset_query();
?>
</ul>
</div>
<?php
}
else {
?>
<div id="tab1" class="tabs-wrap">
<?php
$custom_query1 = new WP_Query(array(
'post_status' =>'published',
'post_type' =>'post',
'order' =>'descending',
'orderby' =>'ID',
'cat' =>'894,893,10,851,853,14,855,13,856,857,859,15',
'posts_per_page' =>'8',
'paged' => (get_query_var('paged')) ? get_query_var('paged') : 1
));
?>
<ul>
<?php if($custom_query1->have_posts()) :
while($custom_query1->have_posts()) : $custom_query1->the_post();?>
<li>
<div class="post-thumbnail">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"> <?php echo get_the_post_thumbnail(); ?> <span class="overlay-icon"></span></a>
</div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span class="date"><span class="tie-date"><?php
$days = round((date('U') - get_the_time('U')) / (60*60*24));
if ($days==0)
echo timeago();
else
echo " " . $days . " روز پیش";
?></span><br/></span>
</li>
<?php endwhile;endif; ?>
</ul>
<?php wp_reset_query(); ?>
</div>
<?php
}
endif; ?>

بله

لینک به ارسال

یه سوال الان من این کد رو گذاشتم صفحه سفید امده باید اول همه کدهاشو بزارم تا چیزی نمایش بده توش؟

لینک به ارسال

من متوجه سئوالتون نمی شم نحوه قرار دادن کد را باید بلد باشید

کدی که برای تب بندی خواستید هم که قبلا عرض شده

لینک به ارسال

من متوجه سئوالتون نمی شم نحوه قرار دادن کد را باید بلد باشید

کدی که برای تب بندی خواستید هم که قبلا عرض شده

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

لینک به ارسال

استاد عزیز من این کد رو گذاشتم فقط تب اول رو نشون میده!!!


<script type="text/javascript">
$(document).ready(function() {
$("#tab-entry").load('http://bourstahlil.ir/ajax',{tab:1});
$("#tab-entry").promise().done(function() {
$("#loading").hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
$(".tab-button").click(function() {
var tab = $(this).attr("data-tab");
var dl = $("#tab-entry").attr("data-load");
if(tab !== dl) {
$(this).parent("li").parent("ul").find(".active").removeClass("active");
$(this).addClass("active");
$("#tab-entry").each(function() {
$(this).attr("data-load", tab).hide('normal').load('http://bourstahlil.ir/ajax',{tab:tab}).next("#loading").delay(500).show();
});
$("#tab-entry").promise().done(function() {
$("#loading").delay(500).hide("normal").prev("#tab-entry").delay(1000).show("normal");
});
}
});
});
</script>
<aside class="sidebar" style="margin-bottom:-12px">
<div class="widget" id="tabbed-widget">
<div style="margin-top:-20px" class="widget-container">
<div class="widget-top">
<!-- نوار کلیدهای تب -->
<ul class="tabs posts-taps">
<li class="tabs">
<a class="tab-button active" data-tab="1">تب اول </a>
</li>
<li class="tabs">
<a class="tab-button" data-tab="2">تب دوم </a>
</li>
<li class="tabs">
<a class="tab-button" data-tab="3">تب سوم </a>
</li>
<li class="tabs">
<a class="tab-button" data-tab="4">تب چهارم </a>
</li>
</ul>
<!-- / نوار کلیدهای تب -->
<div class="tab-content">
<div id="tab-entry" style="display:none" data-load="1">
<?php
query_posts( array( 'page_id' => 36848 ) ); // ID of the page including the form
if ( have_posts() ) : while ( have_posts() ) : the_post();
the_content();
endwhile; endif;
wp_reset_query();
?>
</div>
<div id="loading">Load ... </div>
</div>
</div>
</div>
</aside>

اینم آدرس سایت

http://bourstahlil.ir/

ستون سمت چپ

لینک به ارسال

کدهایی که من دادم خدمتتون سالمه

این هم نمونه اش

http://1fakhar.ir/pages/tab-ajax/

اینکه شما چه چیزی رو در محتوای کدها قرار دادید را خودتون باید بدونید.

لینک به ارسال

خب من هم چیزی که شما دادیک گذاشتم و همونطور که گفتم تب اول رو میخونه ولی 3 تب دیگه رو نمیخونه !!!

لینک به ارسال

من صفحه را دقیقا با همون کدها بنا کردم انتظار نداشته باشید در کدهای شما بگردم دنبال اشتباهتون و تصحیحش کنم

منتظر باشید شاید دوستان راه های ساده تر و بهتری رو معرفی کردند.

لینک به ارسال

برگه ای که من ساختم درست عمل میکنه

http://bourstahlil.ir/ajax?tab=3

http://bourstahlil.ir/ajax?tab=2

http://bourstahlil.ir/ajax?tab=1

http://bourstahlil.ir/ajax?tab=4

فقط نمیدونم چرا تو سایت درست کار نمیکنه.به هرحال ممنون از کمک شما.خودم یه کاریش میکنم :/

لینک به ارسال

نه داداش کار نمیکرد برداشتم

فقط تب اول کار میکرد بقیه تب ها که میزدم هیچی نداشت.فکر کنم با کد جی کوئری همین تب خودش تداخل داره!!

لینک به ارسال

وقتی F12 رو میزنم قسمت console این اررور رو میده

Uncaught TypeError: Cannot read property 'indexOf' of null

از فایل tabcontent.js

میتونه از این باشه؟!

لینک به ارسال

استاد عزیز نظرتون در مورد این تب چیه؟!به نظرم کار باهاش ساده باشه فقط موندم فایل های css و jquery کجاست!؟! :|

http://jquerytools.github.io/demos/tabs/ajax.html

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...