SheepIt! - tùy biến các trường trong Form

Đăng bởi Neo trong mục Hướng dẫn vào 05 tháng 12, 2010 | Comments

Nếu bạn đã từng làm form cho website sẽ thấy nhiều lúc form với các trường cố định là không thỏa mãn, một số trường như địa chỉ, điện thoại, email... phải có thể thêm/bớt tùy theo ý muốn của người dùng. Vì lý do này mà SheepIt! ra đời. Đây là một plugin của jQuery giúp bạn cho phép người dùng thêm/bớt các trường trong form một cách linh động.

Bạn có thể thêm nhiều trường của form một lúc và SheepIt cũng cung cấp callbacks cho từng sự kiện (trước hoặc sau khi thêm trường).

Cách sử dụng

SheepIt làm việc với với phiên bản jQuery 1.4 hoặc cao hơn, do đó bạn cần thêm các file Javascript như sau:

 
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.sheepItPlugin-1.0.0.min.js"></script>

Mã Javascript

 
$(document).ready(function() {

  var sheepItForm = $('#sheepItForm').sheepIt({
    separator: '',
    allowRemoveLast: true,
    allowRemoveCurrent: true,
    allowRemoveAll: true,
    allowAdd: true,
    allowAddN: true,
    maxFormsCount: 10,
    minFormsCount: 0,
    iniFormsCount: 2
  });

});

Mã HTML mẫu như sau

 
<!-- sheepIt Form -->
<div id="sheepItForm">

  <!-- Form template-->
  <div id="sheepItForm_template">
    <label for="sheepItForm_#index#_phone">Phone <span id="sheepItForm_label"></span></label>
    <input id="sheepItForm_#index#_phone" name="person[phones][#index#][phone]" type="text"/>
    <a id="sheepItForm_remove_current">
      <img class="delete" src="images/cross.png" width="16" height="16" border="0">
    </a>
  </div>
  <!-- /Form template-->
  
  <!-- No forms template -->
  <div id="sheepItForm_noforms_template">No phones</div>
  <!-- /No forms template-->
  
  <!-- Controls -->
  <div id="sheepItForm_controls">
    <div id="sheepItForm_add"><a><span>Add phone</span></a></div>
    <div id="sheepItForm_remove_last"><a><span>Remove</span></a></div>
    <div id="sheepItForm_remove_all"><a><span>Remove all</span></a></div>
    <div id="sheepItForm_add_n">
      <input id="sheepItForm_add_n_input" type="text" size="4" />
      <div id="sheepItForm_add_n_button"><a><span>Add</span></a></div></div>
  </div>
  <!-- /Controls -->
  
</div>
<!-- /sheepIt Form -->

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter