پلاگین جی کوئری نمایش متن با 3 افکت جذاب ( با پشتیبانی حروف فارسی )
چند مدتی بود که خبری از پلاگین های جی کوئری در سایت نبود . ولی امروز با یک پلاگین بسیار جذاب در خدمت شما هستم . این پلاگین قابلیت نمایش تعدادی آیتم از جمله نوشته و .. را با 3 افکت بسیار زیبا دارد .
افکت هایی که در بسیاری از وب سایت ها مشاهده نموده اید ولی نتونستید از راز آنها با خبر شوید .
پلاگینی که در این پست از سایت اسکریپت دات کام برای شما انتخاب نموده ام , قابلیت پشتیبانی از زبان فارسی را دارا می باشد که قابلیتی بسیار مفید و کاربردی می باشد .
شما عزیزان قبل از انجام آموزش میتوانید به انتهای این پست رفته و دموی افکت ها را مشاهده نمایید .
و اما آموزش :
برای انجام این کار ابتدا فایل جی کوئری را از سایت Jquery.com دانلود کرده و سپس به سایت خود لینک کرده و آن را فراخوانی کنید ( داخل تگ head ) .
به عنوان مثال :
<script src="فایل دانلود شده از سایت جی کوئری" type="text/javascript"></script>
حال فایل جی کوئری آماده مربوط به این پلاگین را از اینجا دانلود و باز هم به روش بالا به وبسایت خود اضافه و آن را فراخوانی کنید .
که به صورت کلی , دو تگ زیر را خواهیم داشت :
<script src="آدرس فایل دانلود شده از سایت جی کوئری" type="text/javascript"></script> <script src="آدرس فایل دانلود شده مربوط به پلاگین" type="text/javascript"></script>
با انجام کارهای بالا نوبت به فراخوانی و انجام مراحل در html رسیده .
برای این کار شما باید ابتدا یک لیست ul بسازید و به صورت دلخواه یکی از کلاس های slide , fade و یا typing را به آن بدهید و سپس آیتم هایی که میخواهید پشت سر هم به نمایش درآید , در داخل تگ li که فرزند های ul هستند قرار دهید.
به عنوان مثال :
<ul class="fade"> <li>وحید مجیدی</li> <li>دانلود پلاگین جی کوئری</li> <li>اسکریپت دات کام</li> </ul> <ul class="slide"> <li>وحید مجیدی</li> <li>دانلود پلاگین جی کوئری</li> <li>اسکریپت دات کام</li> </ul> <ul class="typing"> <li>وحید مجیدی</li> <li>دانلود پلاگین جی کوئری</li> <li>اسکریپت دات کام</li> </ul>
نکته : سه کلاس بالا , هر کدام به معنی انجام یک افکت می باشند که fade ( حالت محو شونده گی ) , slide ( کشویی ) و typing ( تایپیستی ) میباشند .
در مرحله آخر میبایست کد فراخوانی این توابع را در html خود قرار دهید . ( بهترین مکان قبل از بسته شدن تگ <body/> می باشد .
<script> $(document).ready(function() { $('.fade').inewsticker({ speed : 3000, effect : 'fade', dir : 'rtl', font_size : 13, color : '#000', font_family : 'tahoma', delay_after : 1000 }); $('.slide').inewsticker({ speed : 2500, effect : 'slide', dir : 'rtl', font_size : 13, color : '#000', font_family : 'tahoma', delay_after : 1000 }); $('.typing').inewsticker({ speed : 100, effect : 'typing', dir : 'rtl', font_size : 13, color : '#000', font_family : 'tahoma', delay_after : 1000, }); }); </script>
توجه بسیار مهم 1 : طبیعتا لازم به فراخوانی هر 3 تابع جی کوئری و هر 3 تگ ul در html نمیباشد و اینجا به صورت کلی بیان شده است . شما میتوانید هر افکتی که دوست دارید برایش ul ایجاد کرده , کلاس مورد نظر را داده و سپس تابع مورد نظر آن را فراخوانی کنید .
نکته بسیار مهم 2 : شما میتوانید سرعت , اندازه فونت , رنگ نوشته و … را با توجه به آموزش زیر راحتی تغییر دهید .
speed : 100, // سرعت تغییر متن effect : 'typing', // نوع افکت که 3 نوع fade,slide,typing میباشد dir : 'rtl', // نوی دایرکشن که rtl یا ltr میباشد font_size : 13, // اندازه متن color : '#000', // رنگ متن font_family : 'tahoma', // نوع فونت delay_after : 1000, // فاصله بین تغییر آیتم ها
پخش اختصاصی
گرداوری : وحید مجیدی
بسیار عالی و کاربردی هستش و به درستی و دقت کار میکند و ممنون برای در اختیار گذاشتن فایلها ، فقط در تکمیل آموزش باید عرض کنم دوستان در فراخوانی فایل جی کوئری لازم است با توجه به ادرس موجود در ریشه سایت فولدر مناسب رو انتخاب کنند مثلا اگر فایلهای جی کوئری سایتتون در پوشه به اسم js است ادرس دهی اسکریت میشود
سلام . خیلی زیبا نوشتید . اما برای من که تازه کارم حیف قابل فهم نبود چون سریع رد شدید . مثلا نفرمودید فایل جی کوئری کجا آپلود شه . و منظورتون از (( فایل دانلود شده از سایت جی کوئری )) در تگ یعنی آدرس آپالود فایله یا خود محتویات فایل مذکور هست . منظوز از html کدوم صفحه هست .
من مثل توضیحات شما جایی ندیدم آموزش بدن اما ای کاش یه خورده ریزتر میشد.
mochakeram alii bood
با سلام
من تمامی مراحل انجام دادم کار نمیکنه
کل داده داخل لیست را میاره فقط
ایا فایل مشکلی داره؟
دوست عزیزم همونطوری که در دمو میبینید , کاملا سالم می باشد
اگر مشکلتون حل نشد در فروم بیان کنید ( با عکس و یا فایل )
great
عاااااااااااااااااااااااااااااالی بود.استفاده کردم یک دنیا ممنون
سلام با تشکر از مطلب مفیدتون
من همه مراحل رو انجام دادم ولی فقط اولین li و فقط یک بار اجرا میشه .هر چقدر هم تغییر دادم تفاوتی نکرد.
ممنون
خیر دوست عزیزم, بی نهایت بار تکرار میشه .
دمو رو ببینید
سلام ممنون از این پلاگین
من قرار دادم تو پروژه ام درست کار کرد الا یه جاش اونم بررسی کنید
وقتی می خوای به صورت لینک قرار بدی با افکت های fade , slide درست کار می کنه ولی با تایپینگ درست کار نمی کنه یعنی لینک نمی شه بررسی کنید و خبر بدید لطفا
ممنون
تگ ul را تحت پوشش تگ a قرار دهید
میشه توضیح بدید این روش رو؟؟
لطفا یک ایمیل به بنده بزنید . اینجا کد html قبول نمیکند