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

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



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

SplitChar : پلاگین jQuery برای استایل دادن به بخشی از حروف

2 2688 ۱۱ آذر ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام splitchar رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این پلاگین میتونین حروف رو به صورت عمودی یا افقی ، به دو یا سه قسمت تقسیم بندی کنید و به اونا استایلهای جداگونه مدنظرتون رو بدین. یه امتحان کوچک هم کردم ، مثل اینکه روی IE8 به بالا کار میکنه. مانند شکل زیر.

splitchar

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و splitchar.js و splitchar.css نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. در قسمت head یک بلاک style ساختیم که کدهای css رو درونش بنویسیم. در انتهای قسمت body هم یک تگ باز و بسته ی script قرار دادیم که میتونیم کدهای مورد نظر رو درونش بنویسیم.

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

  • horizontal : با اضافه کردن این کلاس به h1 ، حروفش بصورت افقی به دو قسمت تبدیل میشه
  • horizontal-tri : به سه قسمت افقی تبدیل میشه
  • vertical : به دو قسمت عمودی تقسیم میشه
  • vertical-tri : به سه قسمت عمودی تقسیم میشه

حالا من میام و از هر کدوم یک مثال میزنم. کد :

هنوز کارمون تموم نشده. باید در بین دو تگ script موجود کد زیر رو بنویسید و از پلاگین jQuery استفاده کنید :

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

تغییر استایل horizontal :

برای اینکار باید بصورت زیر عمل کنید :

مثال :

 

تغییر استایل horizontal-tri :

برای اینکار باید بصورت زیر عمل کنید :

مثال :

تغییر استایل vertical :

برای اینکار باید بصورت زیر عمل کنید :

مثال :

تغییر استایل vertical-tri :

برای اینکار باید بصورت زیر عمل کنید :

مثال :

بهمین سادگی. حالا میتونین استایلهارو مطابق با سلیقه خودتون تغییر بدین.

برای مطالعه بیشتر میتونین به این لینک و این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

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

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

  • ‏‏
    sajjadcr7(۲۴ آذر ۱۳۹۳)

    سلام دوست عزیز. من همیشه هروقت گیرکردم توکارام شما به دادم رسیدین دکتون گرم. ایول از سایتتون اما باز ازشما کمک میخوام.
    من موضوع پروژه درس کارآفرینی مو برنامه نویسی جیکوئری انتخاب کردم. کمکم کنید. pdf آموزشی یا فیلم آموزشی بزارین تو وب ممنونم

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram