Giới thiệu
Hiện nay jQuery đã trở nên phổ biến trong phats triển web.
Bắt đầu
Tôi đã nghiên cứu các tác vụ thông thường nhất mà Tôi gặp phải bởi control ASP.NET trong jQuery. Bây giờ Tôi sẽ giúp bạn thực hiện được nó:
- Tạo ra một link: "Back to Top"
- Làm nổi bật hàng GridView hoặc cột thông qua mouseover
- Loại bỏ hàng GridView trên mouseclick
- Loại bỏ cột GridView trên mouseclick
- Giới hạn ký tự xác nhận trong hộp văn bản
Lưu ý rằng chúng ta chỉ thảo luận về phân đoạn mã ở đây cho jQuery, với giả định rằng các điều khiển ASP.NET tương ứng đã được đặt trên trang web. Bạn sẽ xóa trong khi chúng ta tiến hành thêm. Các đoạn mã tôi thảo luận sẽ được đặt bên trong script cần thiết cho jQuery (bây giờ nó dường như đã trở thành một quy ước đối với hầu hết các nhà phát triển), như:
<script type="text/javascript"?
$(document).ready(function () {
// our jQuery code will goes here...
});
</script>
Tạo ra một link: "Back to Top"
Trong rất nhiều trang web, chúng ta thấy liên kết "Back to Top". Hãy sử dụng nó trong trang web của chúng ta với sự giúp đỡ của jQuery.
$(".backtotoplink").attr("innerHTML", "Back to Top");
$(".backtotoplink").attr("title", "Back to Top");
$(".backtotoplink").attr("href", "#Top");Giả định: Bạn có khối lượng lớn nội dung HTML được đặt trên trang web, và vào cuối mỗi khối, chúng ta đặt liên kết với CSS class backtotoplink:
.backtotoplink
{
color: Blue;
cursor: hand;
}
- $(".backtotoplink").attr("innerHTML", "Back to Top"); chọn liên kết trong đó có class backtotoplink, và văn bản "Back to Top" như nội dung của nó bằng cách thiết lập thuộc tính innerHTML.
- $(".backtotoplink").attr("title", "Back to Top"); đặt văn bản "Back to Top" trong thuộc tính title.
- $(".backtotoplink").attr("href", "#Top"); đặt #Top với mục tiêu neo cho liên kết cho thấy Lên trên văn bản.
Làm nổi bật hàng GridView hoặc cột thông qua mouseover
GridView là điều khiển phát triển sử dụng thường xuyên vì khả năng khác nhau của nó. GridViewtrong HTML như là cấu trúc cây của table, với thẻ tr và td. Chúng tôi sử dụng thẻ HTML để xây dựng GridView đáp ứng các sự kiện chuột.
$("# ?%=GridView1.ClientID% ? td").hover(
function () {
$(this).addClass("highlight");
},
function () {
$(this).removeClass("highlight");
});
Giả định: Bạn đã đặt điều khiển GridView trên form với ID = GridView1. Và có lớp CSS được định nghĩa:
.highlight
{
background-color: #34FF6D;
}
- $("# ?%=GridView1.ClientID% ? tr").hover() gắn chuột hover sự kiện cho điều khiển GridView, lưu ý rằng phương thức jQuery hover có hai chức năng, cho mouseover và mouseleave. Sau khi GridView1.ClientID, chúng ta đặt tr để chọn chỉ hàng (bạn có thể thay thế này với td để có được những chức năng tương tự riêng lẻ chứ không phải là hàng).
- $(this).addClass("highlight"); : Trong mouseover chức năng sự kiện, chúng ta thêm lớp highlight để hàng hiện tại (hoặc cell nếu bạn đang sử dụng td trong jQuery selector).
- $(this).removeClass("highlight"); : Trong mouseleave chức năng sự kiện, chúng ta loại bỏ lớp highlight từ hàng hiện tại (hoặc cell nếu bạn chỉ định).
Loại bỏ hàng GridView trên mouseclick
Bây giờ nắm bắt được sự kiện click cho các dòng ( tr ) và loại bỏ ( td ) và chính nó.
$(("#?%=GridView1.ClientID %? tr(").click(function () {
$(this).find(("td(").each(function () {
$(this).remove();// remove td
});
$(this).remove();// remove tr
});
Giả định: Bạn đã đặt điều khiển GridView về Form với ID = GridView1 .
- Đính kèm vào sự kiện cho mỗi hàng.
- Trong sự kiện click, vòng lặp cho mỗi cell( ts ) và loại bỏ nó.
- Loại bỏ các hàng ( tr ) chính nó.
Loại bỏ cột GridView trên mouseclick
Bây giờ nắm bắt được sự kiện click cho cột ( th ) và loại bỏ tất cả các cell của nó ( td ) và chính nó. Chúng ta xử lý sự kiện này chỉ dành cho th, do đó, nó chỉ hoạt động khi bạn nhấp chuột vào cột tiêu đề.
$("#?%=GridView1.ClientID %? th").click(function () {
var count = $(this).closest("th").prevAll("th").length;
$(this).parents("#?%=GridView1.ClientID %?").find("tr").each(function () {
$(this).find("td:eq(" + count + ")").remove();
$(this).find("th:eq(" + count + ")").remove();
});
});
Giả định: Bạn đã đặt điều khiển GridView về Form với ID = GridView1 .
- Đính kèm các sự kiện click cho tiêu đề cột ( th ).
- .closest() bắt đầu với các phần tử hiện tại và tìm kiếm trong cây DOM cho đến khi nó tìm thấy phần tử phù hợp.
- .prevAll() tìm thấy tất cả các phần tử hiện tại trong cây DOM. Đặt chiều dài tất cả các phần tử được tìm thấy biến count.
- Lặp qua mỗi hàng ( tr ) trong GridView .
- Loại bỏ các td đã được tìm thấy kết hợp count .
- Cũng loại bỏ các cell tiêu đề ( th ) đã được tìm thấy với phù hợp với count .
Giới hạn ký tự xác nhận trong hộp văn bản
Khi bạn sử dụng hộp văn bản multiline trong ASP.NET, đôi khi chúng ta cần phải hạn chế số lượng ký tự được nhập. Trong ví dụ này, Tôi hạn chế ô chỉ chấp nhận ký tự trong giới hạn 5-100.
var minCount = 5;
var maxCount = 100;
$("#?%=txtComments.ClientID%?").bind("cut copy paste", function (e) {
e.preventDefault();
});
$("#?%=txtComments.ClientID%?").keypress(function (e) {
var strCount = $("#?%=txtComments.ClientID%?").val().length;
$("#?%=txtNumber.ClientID%?").val(strCount);
if ((strCount ? minCount) || (strCount ? maxCount)) {
$("#message").text("Please enter characters in the range 5 - 100");
if (strCount ? maxCount) {
e.preventDefault();
}
}
else {
$("#message").text("");
}
});
Giả định: Bạn đã đặt bình luận hộp điều khiển với ID = txtComments , và hộp với ID = txtNumber để hiển thị số ký tự nhập vào.
- Ràng buộc sự kiện cho thao tác cut/copy/paste cho textbox, và vô hiệu hóa các hoạt động để chúng ta có thể nắm bắt các sự kiện bấm phím cập nhật các số ký tự.
- Thiết lập chiều dài txtComments của giá trị trong biến strCount.
- Thiết lập count trong văn bản txtNumber để hiển thị.
- Kiểm tra xem strCount ít hơn minCount hoặc strCount lớn hơn maxCount, sau đó hiển thị thông báo cho người sử dụng để nhập các ký tự trong phạm vi chính xác.
- e.preventDefault(), cuối cùng vô hiệu hóa hành vi mặc định cho các sự kiện bấm phím, tiếp tục chấp nhận bất kỳ ký tự đầu vào.