Đỉnh NGUYỄN

life's a journey not a destination

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

Leave a comment


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

Advertisements

Author: dinhnn

Senior software developer, a technical leader. You can be reached at via email to dinhnguyenngoc@gmail.com, via my blog at dinhnguyenngoc.wordpress.com, and on Twitter @dinhnguyenngoc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s