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

- visibility ۲ mode_comment

در این مطلب میخوام یک پلاگین 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 :

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

مثال :

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

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

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

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

comment دیدگاه کاربران
sajjadcr7

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

وحید صالحی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.