پلاگین جی کوئری اضافه و حذف دینامیک ردیف های حاوی عناصر فرم

این پلاگین جی کوئری به شما اجازه میدهد که به صورت پویا (دینامیک ) ردیف هایی حاوی عناصر فرم html را حذف و یا اضافه کنید.

برای تماشای روش کار این پلاگین میتونین دموی قرار داده شده را مشاهده کنید و یا به مثال زیر توجه کنید.

کدهای html :

 

<form class="dynamicWrapper">


    <div class="row">

        <div class="medium-4 columns">
            <label
                for="product-0"
                ></label>
            <input
                type="text"
                name="product-0"
                id="product-0">
        </div>

        <div class="medium-4 columns">
            <label
                for="product-0"
                ></label>
            <input
                type="text"
                name="qty-0"
                id="qty-0">
        </div>

        <div class="medium-2 columns">
            <a href="#"
               class="postfix button dynamicRemove"
                    ><i class="fa fa-minus"></i></a>
        </div>

        <div class="medium-2 columns">
            <a href="#"
               class="postfix button dynamicAdd"
            ><i class="fa fa-plus"></i></a>
        </div>

    </div>


</form>

پس از اضافه کردن کدهای بالا به صفحه مورد نظرتان و اضافه کردن کتابخانه جی کوئری و فایل جاوا اسکریپت این پلاگین به همان صفحه باید پلاگین را با کد زیر برای کلاس  dynamicWrapper که در کد های بالا به فرم مورد نظرمان اختصاص داده بودیم فراخوانی کنیم.

$('.dynamicWrapper').ssdDynamicRows();

این تابع یکسری آرگومان اختیاری داره که میتونین داخل منبع زیر کارایی هرکدوم را ببینید.

منبع: کلبک کنید.

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

دیدگاهتان را بنویسید

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

Time limit is exhausted. Please reload CAPTCHA.