Hôm nay, sharecodeweb sẽ giới thiệu tới các bạn một bài viết chia sẻ 7 đoạn jquery code snippets nên mang theo bên mình của mỗi lập trình viên khi làm website, có thể là nhập thêm vào sổ tay lập trình của các bạn.
Thêm tính năng in cho website
Khi thêm đoạn jquery này vào, thì bên dưới mỗi bài viết sẽ xuất hiện một nút print, để người dùng có thể in ngay bài viết trên website của bạn mà không cần phải sử dụng word
|
1 2 3 4 5 6 7 8 9 |
<!-- jQuery: Print Page --> $('a.printPage').click(function(){ window.print(); return false; }); <!-- HTML: Print Page --> <div> <a class="printPage" href="#">Print</a> </div> |
Input Field/Swap Input Field
Đoạn jquery này sẽ giúp cho các ô textbox của bạn trông đẹp hơn, đó là đầu tiên ô textbox sẽ hiện một dòng chữ mặc định. Giống như ô search vậy, sau khi kích chuột vào ô textbox đó thì chữ search sẽ mất đi. Kiểu kiểu như vậy
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- 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> |
Select/Deselect All options
Đoạn jquery dưới đây sẽ giúp bạn tạo 2 nút “chọn tất” và “hủy chọn tất”. 2 nút này đặc biệt hữu ích khi bạn làm việc với nhiều checkbox. Nó sẽ giúp user của bạn điều hướng tốt hơn trong việc sử dụng website của bạn.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 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> <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> |
Disbale Right Click
Một số lập trình viên muốn website của mình không thể nhấn chuột phải được, nhằm mục đích bảo vệ nội dung trên website. Khi đó chúng ta chỉ cần đoạn mã nhỏ sau đây
|
1 2 3 4 5 |
<!-- jQuery: Disabling Right Click --> $(document).bind("contextmenu",function(e){ e.preventDefault(); }); |
Kiểm tra ký tự phím khi nhấn
Đoạn code sau sẽ giúp lập trình viên kiểm tra được người dùng đã nhấn phím nào
|
1 2 3 4 5 6 |
<!-- 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> |
Validate an Email
Việc kiểm tra định dạng email rất hay gặp trong lập trình website, và nhiều lập trình viên có vẻ vẫn lúng túng đối với thao tác này. Vậy thì hãy xem những đoạn code dưới đây để biết thêm một cách nhé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- 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" /> |
Giới hạn số ký tự nhập vào textarea
|
1 2 3 4 5 6 7 8 9 10 |
<!-- 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> |
Hy vọng với bài viết chia sẻ 7 jquery Code snippets này sẽ giúp bạn xử lý nhanh hơn trong lập trình website nhé.
