اضافه کردن effect به تب

[alikhani98]

باسلام دوستان
من میخوام به تبی (http://4blogers.com/tools/ads/tab.html) که ساختم effect بدم ولی هرطور عمل کردم نتونستم(چون جی‌کوئری را تازه شروع کردم به یاد گیریhttp://forum.wp-parsi.com/public/style_emoticons/default/smile.png )

$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
});
(میخوام وقتی برروی تب کلیک میشه
اندازه تب به آرامی تغییر کنه(نسبت به محتوا بالا و پایین بره) )

[alikhani98]

دوستان میشه راهنماییم کنید:ناراحت:

[alikhani98]

میشه راهنماییم کنید :(

[Javidhb]

شما که در حال یادگیری هستید، بهتر از همین اول عادت کنید که از documentation هر کتابخونه ای (مثل jqueryUi) به بهترین نحو استفاده کنید.
به دو دلیل: معمولا این جور کتابخونه ها از بهترین معماری برای کدنویسی استفاده میکنن(که میتونه بهترین آموزش باشه) و وقتتون برای گشتن راه حلهایی که توی documentation هست تلف نمیشه.

کدی که شما میخاید:


$( "#tabs" ).tabs({
show: { effect: "fold", duration: 1000 },
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});


منبع (http://api.jqueryui.com/tabs/#option-show)

[alikhani98]

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

[Javidhb]

به این لینک (http://api.jqueryui.com/tabs/#event-beforeLoad)یه سر بزنید.
دو تا رویداد به اسم beforeLoad و load داره.

شما توی رویداد beforeLoad باید یک div (یا هر چیز دیگه ای) که توش عکس یا نوشته برای نشون دادن لودینگ دارید رو ()show و
توی رویداد load اون رو ()hide کنید.

[alikhani98]

خیلی ممنون
یه سوال دیگه
من میخوام برای تگ p موحود در تب ها افکت drop را قرار بدم د عین حالی که افکت fold هم برای تب ها اجرا میشه
چطوری باید ایمکار را امجاک بدم؟

[alikhani98]

مثلا الان این درست هستش:

$(function() {
$( "#tabs" ).tabs({
show: { effect: "fold", duration: 2000 },
beforeLoad: function( event, ui ) {
$( ui.panel ).html('<p>Loading...</p>');
ui.jqXHR.error(function() {
ui.panel.html(
"خطا در فراخوانی صفحه " +
"لطفا دوباره تکرار کنید" );
});
}
});
});

[alikhani98]

در load چی قرار بدم؟

$( "#tabs" ).tabs({
load: function( event, ui ) {}
});

[Javidhb]

اینجوری که شما نوشتید، برعکس میشه:

$( ui.panel ).html('');

ولی بازم بهتره از show و hide استفاده کنید.(راحت میتونید بهش افکت بدید)
یا بجای ()html از append استفاده کنید:


$( 'ui.panel' ).append('<p id='loading'>Loading...</p>');

$( 'ui.panel p#loading' ).remove();

[alikhani98]

اینجوری که شما نوشتید، عکس میشه:

$( ui.panel ).html('');

ولی بازم بهتره از show و hide استفاده کنید.(راحت میتونید بهش افکت بدید)
یا بجای ()html از append استفاده کنید:


$( 'ui.panel' ).append('<p id='loading'>Loading...</p>');

$( 'ui.panel p#loading' ).remove();

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

$( 'ui.panel' ).append('<p id='loading'>Loading...</p>');
$( 'ui.panel p#loading' ).remove();
به کجای کد زیر اضافه کنم که درست کار کنه؟

$(function() {
$( "#tabs" ).tabs({
show: { effect: "fold", duration: 2000 },
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"خطا در فراخوانی صفحه " +
"لطفا دوباره تکرار کنید" );
});
}
});
});

[alikhani98]

دوستان میشه راهنماییم کنید:چشمک:

[alikhani98]

:ناراحت:میشه کمکم کنید

[Javidhb]

تا حالا این کارو با tab نکردم.. ولی توی موارد دیگه درست جواب داده: (اینجا تستش نکردم :متفکر:)


$(function() {
$( "#tabs" ).tabs({
show: { effect: "fold", duration: 2000 },
beforeLoad: function( event, ui ) {

//زمانی که مشغول دریافت اطلاعات از سروره - همون زمانی که میخاید لودینگ رو نشون بدید
ui.jqXHR.progress(function() {
ui.panel.html('<p id="loading">Loading...</p>');
});

ui.jqXHR.error(function() {
ui.panel.html(
"خطا در فراخوانی صفحه " +
"لطفا دوباره تکرار کنید" );
});
},
activate: function( event, ui ) {
( 'p#loading' ).remove(); //حذف لودینگ
}
});
});



اگه اینم جواب نداد... تغییر استراتژی بدید:
http://stackoverflow.com/questions/18143917/how-to-add-loading-spinner-image-to-each-tab-in-jquery-tabs

یک عکس که بصورت پیشفرض hidden هست (یا شما جاش p ) استفاده کنید.
توی رویداد beforeload از تابع show استفاده میکنه تا نشون داده بشه و در رویداد load با hide دوباره مخفیش میکنه.


========
شما وقتی در مورد jQueryUi سوال میپرسید، هر کس دیگه ای هم که جای من باشه فکر میکنه که jquery (پشی نیاز jqueryUI) رو بلدید.
برای همین من کدهای بالا رو توضیح نمیدادم..
به هر حال من معذرت میخام