• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

طراحی باکس وب تب دار با jQuery (بدون افزونه)

14280 ۱ آذر ۹۲

در مطلب قبلی ما یک باکس وب ساده رو طراحی کردیم و برای این مطلب تصمیم گرفتیم این باکس رو به صورت منوی تب دار طراحی کنیم تا کاربران عزیز استفاده بیشتر و بهتری از این کد داشته باشن،برای این کار ساختار کد ها رو تغییر دادیم و کمی هم کد اضافه کردیم، پس با سون لرن همراه باشید.

دموی باکس وب با منوی تب دار (اختصاصی سون لرن)

بخش HTML

کد های HTML به صورت بالا تغییر دادیم،کلاس box از آموزش قبلی باقی مونده،ما یه لیست نامرتب برای گزینه های منو  اضافه کردیم و عناوین مورد نظر رو براش مشخص کردیم؛برای قسمت محتوای هر تب یه تگ div مشخص کردیم و یه شناسه با عنوان مثلا content1 یا content2 و ... بهش اختصاص دادیم و همه اینارو داخل یه تگ div دیگه با کلاس content قرار دادیم،توجه کنید که برای تگ های لینک قسمت منو مقدار خاصیت href رو برابر شناسه هر کدوم از تگ های div داخل تگ div با کلاس content قرار دادیم.داخل هر کدوم از محتوا ها هم یه لیست ایجاد کردیم که قراره لیست محصولا یا مطالب یا هر چیز دیگه رو به کاربر نشون بده (خلاصه محتوای مورد نظر خودتون داخلش قرار میگیره).

کد های jQuery

خوب در قسمت کد های جاوا اسکریپت اول از همه تگ های داخل تگ content رو به جز اولی مخفیشون کردیم.بعدش برای رویداد کلیک روی هر کدوم از لینک های قسمت منو (تگ ul) تابعی رو نوشتیم که داخل این تابع مشخص کردیم اگه لینکی که داره کلیک میشه همین لینک هست هیچ کاری انجام نده (برای جلوگیری از بارگذاری مجدد کد ها مخصوصا اگه برای دریافت محتوا  از ای جکس استفاده بشه)،بعدش از همه لینک ها کلاس active رو برداشتیم (برای اینه که لینک فعال قبلی رو غیر فعال کنیم) و به لینک فعلی کلاس active رو اضافه کردیم،بعد ما مقدار خاصیت href لینک فعلی رو گرفتیم و داخل متغییر href قرار دادیم حالا href رو با دستور split به یه آرایه خرد کردیم (توی قسمت html توضیح دادیم که خاصیت href رو با مقداری شبیه content1 یا content2 و ... مشخص کردیم،این کار به این خاطر بود که موقع کلیک کردن روی لینک ها مشخص کنیم کدوم تگ content لود بشه)،بعد ما تمام تگ های div داخل content رو مخفی میکنیم و با دستور بعدی content مورد نظر رو لود میکنیم (با توجه به کد،مقدار اندیس 1 آرایه split مقادیری مثل content1 یا content2 و ... داره بنابراین کد یه خط مونده با آخر این مقدار رو دریافت میکنه و تگ مورد نظر رو با افکت slideDown نشون میده،خواستین افکت های دیگه هم بذارید(مثل fade یا bounce)).

کد های CSS

کد های استایل رو با توجه به سلیقه خودتون می تونید تغییر بدید.

امیدوارم که مفید باشه براتون :)

دانلود سورس کد

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 71 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    ببخشید، اینم بگم که من قبلا از همین تب‌ها استفاده میکردم، فقط دنبال این بودم که یه روشی رو پیدا کنم که وقتی یه تب فعال میشه، عنوان اون تب استایل متفاوت داشته باشه. الان با تقلید از این مطلب شما این موضوع حل شد، ولی محتوای تب‌ها مخفی شده (hide) و فقط عناوین تب‌ها نمایش داده میشه.
    ممنونم

    • ‏‏
      کیوان علی محمدی(۲۳ اردیبهشت ۱۳۹۳)

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

  • ‏‏

    سلام
    توی post list هاتون، به href هاتون، آدرس # دادید.
    آیا این split(‘#’) به این مربوط نیست؟
    محتوای تب‌های من چند تا div و href داره و اینطوری ساده نیست.

    • ‏‏
      کیوان علی محمدی(۲۴ اردیبهشت ۱۳۹۳)

      نه اون برای لیستی هست که عناوین تب رو داخل خودش داره،با متد split رشته مورد نظر به آرایه تبدیل میشه،ما با قسمت اولش کاری نداریم و قسمت دومش که رو میخوایم تا بر اساس اون محتوا رو نشون بدیم.

  • ‏‏

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

    • ‏‏
      کیوان علی محمدی(۲۷ اردیبهشت ۱۳۹۳)

      سلام،باید به li های بخش تب ها float برابر left بدین تا درست بشه.

      • ‏‏

        من همین کارو کردم نشد. میشه خودتون یه تست بکنید. هم با li ها هم با خود ul تست کردم ج نداد. ممنون

        • ‏‏
          کیوان علی محمدی(۲۷ اردیبهشت ۱۳۹۳)

          برای ul تب ها خاصیت right:-1 رو به مقدار left:-1 تغییر بده.

  • ‏‏

    سلام خسته نباشید
    من میخوام به جای لیست مطالب واسه کاره دیگه از این وب باکس استفاده کنم به عنوان مثال مطالب مربوط به یک پست رو در دو تب محتوا و عکس های مربوط به اون پست نمایش بدم، اما چون در این صورت تو محتوای content1,2,3 دوباره از div برای قالب بندی محتوا استفاده میشه فکر میکنم با شرط خط 3 دستورات جی کوئری به مشکل میخوره. میشه راهنمایی کنید.
    مورد بعدی هم در مورد اون قسمت مربوط به خط های 9 تا 12. مگه href تگ های a ما به صورت #content1,2,3 نیست؟ خوب جایی که داریم this.href رو میگیریم هم که یه چیزی شبیه #content1 باید برگردونه دیگه که یه # هم بیشتر نداره پس دیگه چه احتیاجی به اینکه یه بار split کنیم تو آرایه بریزیم و بعد باز # رو اضافه کنیم و… اگه میشه بیشتر توضیح بدین که من نفهمیدم.

    • ‏‏
      کیوان علی محمدی(۲۹ اردیبهشت ۱۳۹۳)

      سلام من برای سوال اولتون خیلی خوب متوجه نشدم میخاین چیکار کنید،برای سوال دوم هم مشکلی نیست می تونید اون کدهای اضافه رو حذف کنید.

  • ‏‏

    سلام
    وقت به خیر

    در خط 11 جی کوئری که توضیح هم دادید، همه دیوهای content مخفی میشه.
    content من هم همش دیو (div) هست، و به صورت ul و li نیست. به خاطر همین contetn اصلا نمایش داده نمیشه.

    میشه برای این مشکل راه حل بدید؟
    ممنونم

  • ‏‏

    برای مشکل بالا div های داخل contetn رو به span و p تبدیل کردم که فکر نمیکنم کار اصولی باشه.

    اما لطفا بفرمایید برای اینکه تب ها با اشاره موس باز بشن و نیازی به کلیک کردن نباشه باید چه کار کرد؟ اصلا جی کوئری وارد نیستم.
    من وقتی به جای click، از hover یا mouseover استفاده میکنم دو مشکل به وجود میاد:
    اول اینکه با حرکت مداوم روی تب ها، همه تبها زیر هم باز میشن.
    دوم اینکه با “کلیک” روی تب ها، صفحه به پایین و روی content اون تب میاد.
    میشه این موارد رو هم راهنمایی کنید؟ تقریبا میخوام مثل منوی بالای سایت تسنیم بشه: http://www.tasnimnews.com/
    ممنونم

  • ‏‏

    حالا که بعد از یک هفته نظر رو تایید کردید لااقل جواب سوال رو هم نمیدید؟

    • ‏‏
      سجاد دریس(۴ تیر ۱۳۹۳)

      توی خط پنجم کدهای جی کوئری به جای عبارت click ، عبارت mouseover رو بنویسید

  • ‏‏

    ظاهرا شما از من مبتدی ترید!!
    گفتم که این کار رو میکنم، ولی اون دو مشکل به وجود میاد!
    به هر حال خسته نباشید
    ممنونم

  • ‏‏

    بازم ناقص اومد.
    به هر حال ممنونم،
    بالاخره یه جوری حلش میکنم.

    • ‏‏
      سجاد دریس(۵ تیر ۱۳۹۳)

      کدهاتون رو توی انجمن ارسال کنید.

  • ‏‏
    روحانی(۳۰ تیر ۱۳۹۳)

    سلام ممنون خیلی عالی بود.
    چه جوری باید به صورت دیفالت content1 بسته باشه.

    یعنی تا کلیک نکینم به صورت پیش فرض تمام پنجره ها بسته باشن.

    • ‏‏
      کیوان علی محمدی(۶ مرداد ۱۳۹۳)

      سلام،توی کد جی کوئری اولین خط نوشتیم که تمام content ها مخفی بشه به غیر از اولی اون کد رو به صورت زیر اصلاح کنید.

      jQuery('.content div').hide();

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram