ijquery

کلیک موجی

کلیک موجی

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

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/waves.min.css">
<link rel="stylesheet" type="text/css" href="static/prims.css">

2- کد html جهت استفاده پلاگین

<div id="lead" class="text-center waves-effect waves-light waves-block">
      <h1>دنیای جی کوئری</h1>
</div>
<div class="width" id="button">
      <button class="waves-effect waves-blue">Reza Taheri</button>
      <button class="waves-effect waves-red">Reza Taheri</button>
      <br/>
      <button class="waves-effect waves-green">Reza Taheri</button>
      <button class="waves-effect waves-black">Reza Taheri</button>
</div>
<div class="width" id="img">
      <span class="waves-effect waves-blue">
        <img src="static/jquery.png">
      </span>
</div>
<script type="text/javascript" src="static/waves.min.js"></script>
<script type="text/javascript" src="static/prims.js"></script>
<script type="text/javascript">
     Waves.displayEffect();
</script>

 

برای اضافه کردن موج از کلاس زیر استفاده کنید

class="waves-effect"

 

برای ساخت رنگ موج در css کد زیر را اضافه کنید

.waves-NEW_NAME .waves-ripple{background-color:#####}

به جای NEW_NAME نامی برای موج خود بنویسید و به جای # ها رنگ خود رو به صورت rgba بنویسید

 

در صورت ساخت رنگ جدید در css به صورت زیر به شی مورد نظر ربط بدهید

class="waves-effect waves-NEW_NAME"

 به جای NEW_NAME نامی که در قسمت بالا نوشتید قرار بدهید


پیش نمایش دانلود فایل پلاگین

22 دیدگاه دربارهٔ «کلیک موجی»

  1. سلام خسته نباشید مرسی از فعالیتتون و مطالب پر کاربردتون…
    یه درخواست داشتم اگر میشه اموزش یا پلاگینی رو معرفی کنید واسه شکل پست ها یا مطالب مثلا مثل مطالب سایت progpars.com که به صورت جالب و حرفه ای هستن.
    واقعا ممنون میشم کمک کنید خیلی وقته دنبال همچین چیزی هستم ولی متاسفانه به دلیل نداشتن اطلاعات کافی هر چی سرچ میکنم به نتیجه نمیرسم.مرسی

  2. با سلام خدمت مدیران این سایت و عرض خسته نباشی بنده و همکارانم سایت آموزشی کاملا رایگان راه اندازی کردیم هرروز مطالب اموزشی جدید و احبار تکنولوژی و غیره در اختیار همه مردم عزیز جهت ارتقای علم و دانش مردم فرهیخته در اختیارشون میزاریم از سایت خوب شما خواهشی داشتیم تا اگر مقدور بود به سایت ما لینک بدهید سپاسگذاریم از شما موفق و سربلند باشید.
    http://www.amozesh.net

  3. دمت گرم داش مهدی واقعا ایوللا … من نوآموز وب هستم و میخوام طراحی وب رو یاد بگیرم ، مطمئنم خیلی خیلی میتونم از مطالب اینجا استفاده ببرم … بهت خسته نباشید میگم.

  4. سلام
    مطلب خوبیه ، لطف کنید کد ها رو برای دانلود بگذارید چون این جوری بهتره و راحت تر میشه ادیتش کرد
    یه نگته فنی دیگه هم بگم (جون کد ها رو کپی زدم و جواب نداد) :
    چرا در بالا “waves” و “prims” به صورت css آمده ولی در پایین به صورت و با فرمت js استفاده شده
    ممنون

  5. سلام ممنون از سایت خیلی خوبتون . نمیدونم چرا من همش فکر میکنم خیلی وقته پیش از سایت شما یه منو دانلود کردم که بالای صفحه بود بصورت باز شونده و داخلش یه اسلایدر مطالب داشت با پس زمینه چرمی بود . همش توی این فکرم که از کدوم سایت دانلود کردم حدود 2 سال پیش . خخخخخ . بازم ممنون از سایت خوبتون

  6. با سلام
    ممنون از سایت بسیار زیبا و مفید شما

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

    با هم از سایت بسیار خوب شما ممنون و سپاسگزارم

  7. باسلام میشه طریقه گذاشتن این کدها توی سایت رو آموزش بدین. سایت با کدهای اچ تی ام ال کار میکنه
    تشکر

  8. سلام اقای مهدی انشا الله حالتون خوب باشه اقا مهدی یه درخواست میتونم بکنم اگه میشه کنار هر یک از اموزش هاتون یدونه سمپل ساخته شده برای دانلود بزارید

  9. سلام میشه از این سایت دیدن کنید
    http://atiehpardaz-co.ir/?Lang=Fa
    میخواستم ازتون تقاضا کنم که میشه اموزش های چرخش عکس مثل عکس های پائین رونمائی از طرح جدید دستگاه ترمینال پلاس
    همین سایت رو بذارید یا همینطور وقتی رو عکس ها میریم یه ذره بین میاد رو عکس که فک کنم اونم با جی کوئریه واقعا ممنون میشم که این اموزش رو بذارین چون این برای پروژه مونه و باید این جی کوئری رو درست کنم
    ممنون

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *