پلاگین فرم بانکی با جی کوئری

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

پلاگین فرم بانکی با جی کوئری

آکادمی برنامه نویسان ، برگزار کننده دوره های آموزش برنامه نویسی با استفاده از اساتید مجرب و حرفه ای در سراسر ایران .

[ جهت مشاهده دوره های درحال ثبت نام کلیک کنید ]

ارائه مدارک معتبر آموزشی و ورود به بازار کار .

در این مقاله پلاگینی رو معرفی میکنم که یک فرم بانکی زیبا رو برای طراحان وب فراهم کرده

تو قدم اول باید کتابخانه هارو معرفی کنیم ... !!!

<script src="jquery.js"></script>
  <script type="text/javascript" src="creditly.js"></script>
  <script type="text/javascript">
    $(function() {
      var creditly = Creditly.initialize(
          '.creditly-wrapper .expiration-month-and-year',
          '.creditly-wrapper .credit-card-number',
          '.creditly-wrapper .security-code',
          '.creditly-wrapper .card-type');
 
      $(".creditly-card-form .submit").click(function(e) {
        e.preventDefault();
        var output = creditly.validate();
        if (output) {
          console.log(output);
        }
      });
    });
  </script>
    <link rel="stylesheet" href="creditly.css" />

این هم کد اچ.تی.ام.ال برای استفاده از پلاگین :

<div class="main">
  <form class="creditly-card-form">
    <section class="creditly-wrapper">
      <div class="credit-card-wrapper">
        <div class="first-row form-group">
          <div class="col-sm-8 controls">
            <label class="control-label">شماره کارت</label>
            <input class="number credit-card-number form-control" type="text" name="number" pattern="\d*" inputmode="numeric" autocomplete="cc-number" autocompletetype="cc-number" x-autocompletetype="cc-number" placeholder="&#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149;" />
          </div>
          <div class="col-sm-4 controls">
            <label class="control-label">CVV2</label>
              <input class="security-code form-control" inputmode="numeric" pattern="\d*" type="text" name="security-code" placeholder="&#149;&#149;&#149;&#149;" />
          </div>
        </div>
        <div class="second-row form-group">
          <div class="col-sm-8 controls">
            <label class="control-label">نام روی کارت</label>
            <input class="billing-address-name form-control" type="text" name="name" placeholder="محسن فتحی" />
          </div>
          <div class="col-sm-4 controls">
            <label class="control-label">تاریخ انقضاء</label>
              <input class="expiration-month-and-year form-control" type="text" name="expiration-month-and-year" placeholder="سال / ماه" />
          </div>
        </div>
          <button class="submit"><span>ارسال</span></button>
      </div>
    </section>
  </form>
 </div>

منبع : شرکت فنی مهندسی ویندا

فایل های ضمیمه