یک طراح وب

آدم ها را نمی توان فقط به یک یا چند موضوع ِ خاص، محدود ساخت. آدمی که این پشت نشسته است، از هر موضوعی می نویسد!

با استفاده از جی کوئری، عناصر را مخفی یا نمایش دهید!

نوشته‌ی علیها در July 24, 2009 روی جی کوئری

تصور کنید محتوای بخشی از وبلاگ یا سایتتان، بسیار زیاد یا به عبارتی طولانی شده است. مثلا آرشیوی چند ساله دارید که با گذشت زمان، به تعداد ماه های آن اضافه شده است و یک شکل طویل به خود گرفته است. به نظر من که کمی زشت می کند ظاهر سایت یا وبلاگ را.

show-hide-jquery

می خواهیم با کمک جی کوئری، کاری کنیم که وقتی روی چیزی مثل “آرشیو” کلیک کردیم، آرشیو وبلاگ نمایش داده شود یا به اصطلاح باز شود و اگر دوباره روی همان کلیک کردیم، بسته و مخفی شود. البته روشی که قرار هست یاد بگیریم را می توانید برای کارهای مختلف استفاده کنید که یکی از آن همینی هست که گفتم. همان آرشیو و این صحبت ها…

مثل همیشه ابتدا اگر کتابخانه ی جی کوئری را ندارید، آخرین نسخه ی آن را از اینجا دریافت کنید (اگر نشد از اینجا بگیرید).

1. جی کوئری

کتابخانه ی جی کوئری را به صفحه اضافه می کنیم (در قسمت head):

<script src="jquery.js" type="text/javascript"></script>

کدهای زیر را در قسمت head قرار دهید. می بینید چقدر ساده و کوچولو است؟ :)

<script type="text/javascript">
$(document).ready(function(){
$("#toggle-content").hide();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next("#toggle-content").slideToggle("slow");
});
});
</script>

2. اچ تی ام ال

کدهای اچ تی ام ال زیر را قرار دهید:

<h2 class="trigger" id="title-trigger">نمایش / مخفی</h2>
<div id="toggle-content">
<ul>
<li>July 2009</li>
<li>June 2009</li>
<li>May 2009</li>
</ul>
</div>

یک گزینه گذاشتیم برای باز و بسته کردن و یک لیست هم درست کردیم به عنوان آرشیو.

3. سبک دهی – سی اس اس

حالا دستورات سی اس اس زیر را هم اضافه می کنیم:

.trigger {
cursor: pointer;
}
#toggle-content {
overflow: hidden;
}

نکته ای که مورد توجه است این است که اگر می خواهید درحالت پیش فرض، محتوا نمایش داده شود، باید در ابتدای اسکریپت:

$("#toggle-content").hide();

دستور hide را به show تغییر دهید و همینطور برعکس، اگر می خواهید در حالت پیش فرض، محتوا مخفی باشد، hide بگذارید.
خب تمام شد. حالا دیگر یاد گرفته اید از این افکت در طراحی های خود استفاده کنید :)

می توانید نمونه ی این افکت را ببینید و همچنین یک مثال کامل از این افکت را دریافت کنید:

download-zip

26 دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید »

  • آرمان در 09/07/24 گفت:

    عالی بود، به چنین چیزی نیاز داشتم.
    مرسی

  • designer در 09/07/25 گفت:

    سلام علیرضا جان

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

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

  • روزبه در 09/07/25 گفت:

    سلام علی
    مرسی ، خیلی خوب بود :-)

  • علیرضا در 09/07/25 گفت:

    @designer
    این آموزش ها به سیستم مدیریت محتوا هیچ ارتباطی ندارن. شما باید از این ها در قالب وبلاگ یا وبسایتتون استفاده کنید ;)

  • kazem در 09/07/25 گفت:

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

  • روزبه در 09/07/27 گفت:

    سلام
    بالاخره وبلاگم را آپدیت کردم :-)

  • علیرضا در 09/07/31 گفت:

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

  • داود مظفری در 09/08/10 گفت:

    سلام ، یه سوال . من الان HTML رو دارم :
    title
    ، سی اس اس هم :
    a.orderproject{text-decoration:underline;display:block;text-align:right;color:#6f6f6f;font-family:Tahoma;font-size:8pt;}
    a:hover.orderproject{color:#000;}
    #order_project{
    cursor: pointer;
    }

    و جاوا :

    $(document).ready(function(){
    $(“#warning2″).hide();
    $(“a.order_project”).toggle(function(){
    $(this).addClass(“active”);
    }, function () {
    $(this).removeClass(“active”);
    });
    $(“a.order_project”).click(function(){
    $(this).next(“#warning2″).slideToggle(“slow”);
    });
    });

    /// حالا ، اون warning ، مخفی میشه ، اما لینک نمی تونه show کنه !

  • داود مظفری در 09/08/10 گفت:

    توی لاین 10 ، اسکریپت جاوا .next رو بردار ، لزوماً هر پیج ای ، 2 تا المنت نداره . مشکلم روی این بود :)

    مرسی بابت اسکریپت و توضیحات

  • مصطفی در 09/08/15 گفت:

    من هر کاریش کردم نشد
    مشکل داره یه جا
    مشکل از من نیست
    تمام کارایی که گفته بودی رو انجام دادم
    از css و html هم سر در میارم هرچی اینور اونور کردم جواب نداد

  • علی در 09/08/15 گفت:

    علی جان سلام
    ببین یه سوال داشتم
    این نمونه ای که خودت درست کردی رو یه نگاهی بنداز
    موقعی که روی نمایش / مخفی کردن کلیک میکنی؛ اون By Aliha.ir حرکت میکنه و بالا و پایین میره….
    “حالا سوال من” چجوری میتونم یه کاری کنم که اون قسمت زیر نمایش پاینن نره و ثابت بمونه؟؟؟؟ اگه میشه سریع جوابمو بده
    ممنون میشم
    بای

  • علی در 09/08/15 گفت:

    اصلا مثل سایت خودت :D
    موقعی که روی تنظیمات کلیک میکنی واسه سایدبار…………

  • علیرضا در 09/08/16 گفت:

    @علی
    سلام
    باید بهش position: absolute; بدی…
    به عنوان مثال توی همین نمونه ای که گذاشتم، باید به تگ دیوی که آی دیش #toggle-content هست، توی سی اس اسش position: absolute; رو بهش اضافه کنی.
    موفق باشی…

  • علیرضا در 09/08/16 گفت:

    @مصطفی
    بفرمایید مشکلتون چی هست؟ چون چیزی که اینجا آموزش دادم کاملا تست شده و نتیجه رو هم توی قسمت نمونه می بینید ;)

  • مهرداد در 09/08/26 گفت:

    سلام
    خیلی ممنون بابت این آموزش
    می‌خواستم بپرسم در قسمت html، تو برچسب h2 آی‌دی title-trigger اضافیه؟ آخه این آی‌دی در سی‌اس‌اس و جاوااسکریپت نیستش. حذفش هم که کردم دیدم چیزی فرق نکرد. خواستم مطمئن بشم.

  • علیرضا در 09/08/26 گفت:

    بله اضافی هست. اون آی دی برای نمونه ای که گذاشتم بود که احتمالا یادم رفته از کدهای این پست حذفش کنم. در کل وجود یا عدم وجودش فرقی نمی کنه و می تونین با خیال راحت حذفش کنین :)

  • احسان در 09/09/09 گفت:

    سلام
    اول ممنون بابت چیزی که گذاشتی
    دوم من تکه کد زیر را 3 بار پشت سر هم نوشتم ولی وقتی صفحه بالا میاد فقط اولی مخفیه بقیه نمایش داده می شه تا خوده کاربر مخفیش کنه
    ایراد کار کجاست؟
    ممنون میشم
    ***
    1.نمایش / مخفی
    2.
    3.
    4.July 2009
    5.June 2009
    6.May 2009
    7.
    8.

  • علیرضا در 09/09/09 گفت:

    @احسان
    به خاطر این هست که تگ ِ نگه دارنده ی محتوای آرشیو، کلاس نیست و آی دی هست:

    $("#toggle-content").hide();

    که باید اون #toggle-content رو به .toggle-content تبدیل کنید…

  • احسان در 09/09/12 گفت:

    سلام
    بازم درست نشد
    مشکل من اینه وقتی کد های HTML را چند بار می نویسم(تا چند تا show/hide داخل یک صفحه نشان بدهد) موقع بارگذاری فقط تیکه اول مخفیه و بقیه موارد نمایش داده می شوند و کاربر باید اونا رو مخفی کنه-ولی من می خوام تمامی موارد هنگام بار گذاری مخفی باشند
    ببخشید زیاد شد
    با تشکر

  • هادی در 09/09/14 گفت:

    خیلی عالی بود، توی بلاگسپات گذاشتم عین ساعت کار میکنه
    فقط مشکل کوچیک من یا بلاگسپات باهاش اینه که قبل از لود شدن کامل صفحه همه نوشته های توش معلومه بعد که صفحه لود شد تموم شد بسته میشه
    نمونش این http://www.explode.ir/2009/09/blog-post_14.html
    حالا یا مشکل از سرعت منه یا کلا همینجوریه
    نمیشه اولویتش رو بالا برد؟

  • علیرضا در 09/09/14 گفت:

    @هادی
    خب به خاطر این هست که اسکریپت باید لود بشه و تا زمانی که کامل لود نشه محتوا دیده می شه.

  • علی در 09/10/03 گفت:

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

    این نمایش عناصر مخفی که تو هر کامنت میاد مثل نقل قول و پاسخ و یا توخود پست ها تون اونها را هم می شه یه اشاره ای کنید .

    و سوم هم این دکمه های تغییر فونت و عرض و …و یا چپ چین و راست چین بودن ساید بار را هم یه اشاره بکنید .

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

  • mohammad در 09/10/04 گفت:

    سلام من ميخوام اين مجموعه رو در سايتي كه با سيستم جوملا ساخته شده به كار ببرم يا در بالاي سايت يا در سايد ها سريع كمك نياز دارم.
    با تشكر

  • بابا تو ديگه كي هستي :)

  • آقا خیلی استفاده کردم ، ممنون ، باز هم از جی کوئری بنویسید…موفق و پایدار باشید

  • آقا یک سوالی برام پیش اومد ، چطور میشه بعضی عناصر را به دلخواه به صورت مخفی و بعضی را عادی نمایش بدیم ؟؟

این پست تا به حال بازتابی نداشته است!

لطفا قبل از نوشتن دیدگاه خود، توجه داشته باشید که دیدگاه‌تان در رابطه با این پست باشد. در غیر این‌صورت می‌توانید از فرم تماس استفاده کنید. ممنون از توجه‌تان :)
my avatar

دیدگاه خود را ارسال کنید