Một số jQuery Code Snippets nên có trong lập trình web

jQuery là một bộ javascript framework mạnh và được sử dụng rất rộng rãi. Có rất nhiều đoạn jQuery hữu ích có sẵn nhưng ở đây, trong bài viết này tôi sẽ chia sẻ một số đoạn mã cơ bản và sử dụng rộng rãi mà mỗi nhà phát triển web nên có. Ngay cả đối với những người mới làm quen với jQuery cũng có thể dễ dàng hiểu và có lợi từ các đoạn mã thường được sử dụng này

1. Tùy chọn in trang

Cung cấp các tùy chọn để in trang là nhiệm vụ chung cho các nhà phát triển web. Sau đây là mã có sẵn:


<!-- jQuery: Print Page -->
$('a.printPage').click(function(){
           window.print();
           return false;
});
<!-- HTML: Print Page -->
<div>
   <a  class="printPage" href="#">Print</a>
</div>

2. Giúp nhập trường Field/Swap

Để cho trường văn bản nhập vào hữu ích, chúng ta thường hiển thị một số văn bản mặc định bên trong nó (Ví dụ "Tên công ty") và khi người dùng click vào nó, văn bản biến mất và người dùng có thể nhập giá trị cho nó. Bạn có thể thử nó cho mình bằng cách sử dụng đoạn mã sau đây.

<!-- jQuery: Helping Input Field -->
$('input[type=text]').focus(function(){    
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == title)
           {
               $this.val('');
           }
}).blur(function() {
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == '')
           {
               $this.val(title);
           }
});


<!-- HTML: Swap Input Field -->
<div>
       <input type="text"
       name="searchCompanyName"
       value="Company Name"
       title="Company Name" />
</div>

3. Chọn/Bỏ chọn Tất cả tùy chọn

Chọn hoặc bỏ chọn tất cả các tùy chọn hộp kiểm có sẵn sử dụng liên kết trên trang HTML là nhiệm vụ chung.

 

<!-- jQuery: Select/Deselect All -->
$('.SelectAll').live('click', function(){
   $(this).closest('.divAll').find('input[type=checkbox]').attr('checked', true);
   return false; 
});

$('.DeselectAll').live('click', function(){
   $(this).closest('.divAll').find('input[type=checkbox]').attr('checked', false);
   return false; 
});


<!-- HTML: Select/Deselect All -->
<div class="divAll">  <a href="#" class="SelectAll">Select All</a>&nbsp;  
<a href="#" class="DeselectAll">Deselect All</a>  <br />  \
<input type="checkbox" id="Lahore" /><label for="Lahore">Lahore</label>  
<input type="checkbox" id="Karachi" /><label for="Karachi">Karachi</label>  
<input type="checkbox" id="Islamabad" /><label for="Islamabad">Islamabad</label> </div>

    

4. Vô hiệu hóa nhấp chuột phải

Đối với các nhà phát triển web, nó thường để vô hiệu hóa kích chuột phải vào các trang nhất định, do đó, mã sau đây sẽ thực hiện công việc.

<!-- jQuery: Disabling Right Click -->
$(document).bind("contextmenu",function(e){
       e.preventDefault();

   });

5. Xác định các phím được nhấn.

Đôi khi, chúng ta cần phải xác nhận giá trị đầu vào trên hộp văn bản. Ví dụ, đối với "Tên", chúng ta có thể cần phải tránh các giá trị số. Vì vậy, chúng ta cần phải xác định các phím được nhấn và sau đó thực hiện phù hợp.

<!-- jQuery: Which key is Pressed. -->
$('#txtFirstName').keypress(function(event){
     alert(event.keyCode);
  });


<!-- HTML: Which key is Pressed. -->
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

6. Xác nhận email.

Xác nhận địa chỉ email là nhiệm vụ rất phổ biến trên các mẫu HTML.

<!-- jQuery: Validating an email. -->
$('#txtEmail').blur(function(e) {
            var sEmail = $('#txtEmail').val();
            if ($.trim(sEmail).length == 0) {
                alert('Please enter valid email address');
                e.preventDefault();
            }        
            var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
                             {2,4}|[0-9]{1,3})(\]?)$/;        
            if (filter.test(sEmail)) {
                alert('Valid Email');
            }
            else {
                alert('Invalid Email');
                e.preventDefault();
            }
        });


<!-- HTML: Validating an email-->
<asp:TextBox id="txtEmail" runat="server" />

7. Hạn chế maxlength cho TextArea

Cuối cùng, nó bình thường để đặt một vùng văn bản trên Form và xác nhận số lượng tối đa của các ký tự trên nó

<!-- jQuery: Limiting MaLength for TextArea -->
   var MaxLength = 500;
       $('#txtDescription').keypress(function(e)
       {
          if ($(this).val().length >= MaxLength) {
          e.preventDefault();}
       });
<!-- HTML: Limiting MaLength for TextArea-->
<asp:TextBox ID="txtDescription" runat="server"
                         TextMode="MultiLine" Columns="50" Rows="5"></asp:TextBox>

PS:

Chú ý để sử dụng các mã script trên, các bạn phải sử dụng thư viện jQuery, thêm dòng mã sau vào phần <head> của website

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Chúc các bạn thành công!

                      

Related Post


Responsive Image trong website sử dụng bootstrap framework
Tuesday, October 8, 2013
Bootstrap là một framework khá hay để phát triển giao diện website, đặc biệt là đối với các website theo xu hướng responsive. Tuy nhiên khi bắt tay vào xây dựng một dự án cụ thể bạn sẽ gặp một số vấn đề, ở bài này tôi muốn nói đến hiện tượng các hình ảnh trong nội dung bài viết không response theo khung mà sẽ bị tràn ra ngoài khi xem trên các thiết bị mobile hay tablet. Vậy làm sao để giải quyết vấn đề này?
Responsive like box facebook
Friday, October 4, 2013
Gần đây tôi có làm một website với giao diện responsive và trên trang có nhúng like box facebook, vấn đề ở đây tôi gặp phải là đoạn mã like box mà facebook cung cấp chỉ cho phép chèn chiều rộng (width) và chiều cao (height) là những con số cụ thể, chính vì vậy khi kích thước màn hình co dãn, giao diện responsive theo thì like box đó bị vượt khỏi khung trông rất thiếu thẩm mỹ.
Search

Đăng ký nhận bài mới


Category

Blog Archive