Đỉnh NGUYỄN

life's a journey not a destination


Leave a comment

JUICE UI – Các điều khiển jQuery UI cho ASP.NET WebForms


Juice UI là dự án mã nguồn mở gồm tập các thành phần (các điều khiển) ASP.NET dựa trên jQuery UI giúp tăng tính tương tác và dễ lập trình cho giao diện ứng dụng web.

– Xem trang demo các điều khiển jQuery UI: http://jqueryui.com/demos/

– Xem trang demo các điều khiển Juice UI: http://juiceui.com/controls/

Bạn có thể dùng Juice UI dựa trên thỏa thuận giấy phép nguồn mở MIT License hoặc GNU General Public License (GPL) Version 2.

Tải về Juice UI bằng 2 cách:

– NuGet: http://nuget.org/packages/JuiceUI

– GitHub: https://github.com/appendto/juiceui

image

Advertisements


Leave a comment

jQuery 1.6 được phát hành


Nhóm phát triển jQuery đã thông báo phát hành phiên bản 1.6. Phiên bản mới nhất này tăng đáng kể hiệu suất do nhóm đã viết lại cách jQuery xử lý các thuộc tính HTML (attributes). Bộ xử lý sự kiện hiện hoạt động nhanh hơn, nhiều hiệu ứng động hơn, giới thiệu bộ định giờ (timer) có thể đồng bộ nhiều hiệu ứng động; có nhiều bug trong phiên bản trước được fixed.

Có một số thay đổi lớn trong hành vi của .val và .attr nhằm gia tăng hiệu suất. Để thao tác tốt hơn trên các thuộc tính (properties), hai phương thức mới, .prop() và removeProp() cũng được thêm vào.

Tìm hiểu thêm và các API thay đổi tại đây.

Một số liên kết để download / tham khảo về jQuery:

Nói chung, tôi khá hài lòng về phiên bản được phát hành lần này. Theo dõi các bài đăng tiếp theo để xem thông tin chi tiết sự thay đổi.


Leave a comment

jQuery: Bắt sự kiện double click trên thẻ div


Đây là ví dụ đơn giản minh họa bắt sự kiện double click trên thẻ DIV. jQuery có nhiều hàm sự kiện liên quan đến dùng mouse mà bạn có thể dùng.

Trong ví dụ, chúng ta sẽ chuyển đổI (toggle) màu và kích thước khung viền của thẻ DIV khi nó được double click.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Detect Double Click</title>
    <style type="text/css">
        div {
            border: 1px solid black;
            height: 100px;
            width: 100px;
        }
        .alt {
            border: 4px solid red;
        }
    </style>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#divOne').dblclick(function () {
                $(this).toggleClass('alt');
            });
        });
    </script>
</head>
<body>
    <div id="divOne">
        Please, double click me!
    </div>
</body>
</html>

Như bạn thấy, chúng ta dùng hàm toggleClass để thay đổi CSS class của thẻ DIV khi người dùng double click. Để bắt được sự kiện double click, dùng hàm sự kiện dựng sẵn trong jQuery: dblclick(). Làm theo cách tương tự bạn có thể bắt sự kiện trên bất kỳ thành phần HTML nào mình muốn (như textbox, button, span, a,…).


Leave a comment

Lấy giá trị được chọn của nút Radio dùng jQuery


Cách lấy giá trị được chọn của nút Radio dùng jQuery chỉ với 1 dòng mã

var checkedradio = $('[name="gr"]:radio:checked').val();

Đầu tiên là xác định tất cả các thành phần có thuộc tính name là “gr”, sau đó chỉ rõ loại thành phần cần lấy là radio, tiếp đến dựa vào trạng thái của thành phần (checked). Dùng val() để thuộc tính value của thành phần được chọn.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Lấy giá trị được chọn của nút Radio dùng jQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnRadio').click(function () {
                var checkedradio = $('[name="gr"]:radio:checked').val();
                $('#sel').html('Selected value: ' + checkedradio);
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="radio" name="gr" value="Milk" />Milk<br />
        <input type="radio" name="gr" value="Butter" checked="checked" />Butter<br />
        <input type="radio" name="gr" value="Cheese" />Cheese<br />
        <hr />
        <p id="sel"></p>
        <input id="btnRadio" type="button" value="Get Selected Value" />
    </div>
</body>
</html>

image


Leave a comment

Ngăn người dùng chọn ngày cuối tuần dùng jQuery UI DatePicker


jQuery UI DatePicker xây dựng sẵn hàm “noWeekends”, ngăn người dùng chọn các ngày cuối tuần bằng cách vô hiệu hóa chúng.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery DatePicker with noWeekends function</title>
    <link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#datepic").datepicker({ beforeShowDay: $.datepicker.noWeekends });
        });
    </script>
</head>
<body>
    <input id="datepic" />
</body>
</html>

Như bạn thấy, các ngày cuối tuần đã bị vô hiệu hóa

image


Leave a comment

Tạo AutoComplete menu trong suốt dùng jQuery UI


Hãy xem AutoComplete menu trong suốt dùng jQuery. Chúng ta sẽ làm nó nhìn trong suốt 1 tí

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Load Page Dynamically inside a jQuery UI Dialog</title>
    <link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var names = ["james", "jake", "jaffer", "mary", "maddy", "aaron", "annie", "keith"];
            $("#tags").autocomplete({
                source: names
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="tags">Names:</label>
        <input id="tags" />
    </div>
</body>
</html>

Mặc định, menu trông như sau:

image

Bây giờ thêm đoạn mã CSS làm menu trong suốt hơn

<style type="text/css">
        .ui-autocomplete.ui-menu
        {
            opacity: 0.4;
            filter: alpha(opacity=40); /* for mozilla */
        }
    </style>

Kết quả trông như sau:

image


Leave a comment

Hiển thị số đếm dùng jQuery


Có một cách đơn giản hiển thị số đếm dùng jQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Display a Counter</title>
    <style type="text/css">
        #displayCounter {
            font-size: 42px;
            font-family: Georgia;
        }
    </style>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var cnt = 0; var counter = setInterval(function () {
                if (cnt < 20) {
                    $('#displayCounter').html(cnt); cnt++;
                } else {
                    clearInterval(counter);
                    $('#displayCounter').html("Timeout!!");
                }
            }, 1000);
        });
    </script>
</head>
<body>
    <div id="displayCounter"></div>
</body>
</html>

Số đếm chạy từ 0 đến 20 rồi dừng lại. Có thể thực hiện bất kỳ hành động nào khi số đếm dừng lại. Với ý tưởng minh họa, đoạn mã hiển thị chuỗi “Timeout!”.


Leave a comment

Thay đổi vị trị của 1 đối tượng dùng jQuery


Với sự phát triển của các framework viết bằng JavaScript cho phép drag, drop hoặc di chuyển 1 thành phần trên trang rất dễ dàng. Ứng dụng thực tế có thể thấy trong ứng dụng mua sắm trực tuyến tương tác. Các món hàng được dropped vào giỏ hàng.

Nếu muốn di chuyển 1 đối tượng từ vị trí này sang vị trí khác, chỉ cần click lên nó. Đối tượng sẽ di chuyển trở về chỗ cũ khi bạn click lên nó lần nữa – tương tự như 1 hành động undo. Mặc dù điều này trông giống có nhiều mã lệnh được thực thi, nhưng với jQuery API’s, yêu cầu này thật sự rất dễ. Đây là cách di chuyển vị trí của 1 đối tượng trên trang dùng jQuery.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Thay đổi vị trị của 1 đối tượng dùng jQuery</title>

    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function() {
            $(".smallDiv").toggle(
                function() {
                    $(this).animate({ 'left': '600px' }, 'slow');
                },
                function() {
                    $(this).animate({ 'left': '0px' }, 'slow');
                });
        });
    </script>

    <style type="text/css">
        .smallDiv
        {
            height: 150px;
            width: 150px;
            position: relative;
            border: solid 1px Silver;
            background-color: Gray;
        }
    </style>
</head>
<body>
    <div class="smallDiv">
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
    </div>
    <br />
    <div class="smallDiv">
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
    </div>
    <br />
    <div class="smallDiv">
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
    </div>
</body>
</html>


Leave a comment

Chọn và tô sáng văn bản trong TextBox dùng jQuery


Đây là đoạn mã đơn giản tô sáng văn bản trong TextBox dùng jQuery khi người dùng click lên TextBox. Kỹ thuật tô sáng văn bản hữu dụng khi thường xuyên phải thực hiện hành động copy & paste.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Click and Highlight Text</title>
<script src="http://code.jquery.com/jquery-latest.js"    
    type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#Text1").click(function() {
                $(this).focus();
                $(this).select();
            });
        });
    </script>
</head>
<body>
    <input id="Text1" type="text" value="There is some text here" />
</body>
</html>


Leave a comment

Implementing KeyBoard Shortcuts in ASP.NET applications using jQuery


Các ứng dụng web như Gmail và Windows Live Mail đều hỗ trợ keyboard shortcuts giúp tiết kiệm thời gian với những hành động thường dùng như check mail, soạn mail, attach file,…

Mục tiêu: Tạo 1 trang web với 2 liên kết (mỗi liên kết sẽ dẫn đến 1 trang khác). Chúng ta sẽ thấy sự khác biệt khi nhấn các phím 1 hoặc 2 chứ không phải nhấn vào liên kết dẫn đến trang 1 hoặc trang 2.

(Nhấn phím 1 hoặc 2 để chuyển đến trang tương ứng với liên kết)

Okay, bắt đầu

Lưu ý: Trước tiên, bạn phải quen với jQuery (không cần phải rành), nếu bạn chưa quen biết jQuery cũng không sao, download jQuery và chúng ta tiếp tục

Bước 1. Tạo website, thêm MasterPage.master và tạo 3 trang Default.aspx, Page1.aspx, Page2.aspx. Copy file jQuery vừa download về vào Website

Bước 2. Trong trang Default.aspx, thêm 2 liên kết đến 2 trang Page1.aspx và Page2.aspx tương tự như sau

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div>
        <asp:LinkButton ID="lbPage1" runat="server" PostBackUrl="Page1.aspx">
        Page 1
        </asp:LinkButton><br />
        <asp:LinkButton ID="lbPage2" runat="server" PostBackUrl="Page2.aspx">
        Page 2
        </asp:LinkButton><br />
    </div>
</asp:Content>

Bước 3. Mở MasterPage.master và thêm/sửa đoạn code sau:

<head runat="server">
    <title>Keyboard ShortCuts</title>

    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(document).keyup(function(event) {
                var key = event.keyCode || event.charCode || 0;
                if (key == 49) { // Page One Press 1
                    eval($("[id$='lbPage1']").attr("href"));
                } else if (key == 50) { // Page Two Press 2
                    eval($("[id$='lbPage2']").attr("href"));
                }
            });
        });
    </script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Đoạn code trên thêm thư viện jQuery vào MasterPage và hàm bắt sự kiện shortcut

event.keyCode sẽ trả về mã ASCII của ký tự được nhấn. Tham khảo bảng mã ASCII để biết thêm thông tin. Ở đây, nhấn phím 1 sẽ trả về mã ASCII là 49, tương tự phím 2 sẽ trả về mã ASCII là 50.

Có 2 điểm quan trọng ở trên là:

1.  $("[id$=’lbPage1′]"). Dùng ‘$=‘operator để khớp với chuỗi gần cuối của id ctl00_ContentPlaceHolder1_lbPage1

2. Dùng hàm eval() – Điều này là bắt buộc, khi xem source code từ trình duyệt, link button sẽ trả về

Đoạn javascript ở trên sẽ đáp lại sự kiện postback khi link button được click.