M.Javad

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

44 پست در این موضوع قرار دارد

سلام.من یه تب 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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری