jQuery UI

• Jquery UI là gì?

1. jQuery UI là giao diện người dùng chính thức thư viện jQuery. Nó cung cấp sự tương tác, các widget, hiệu ứng, và đề tài cho việc tạo ra các ứng dụng Internet phong phú. (theo như trang chủ)
2. jQuery UI là miễn phí, phần mềm mã nguồn mở. (theo wiki)
3. Nó được phát hành vào tháng Chín năm 2007, công bố trong một bài đăng blog của John Resig trên jquery.com. Các phiên bản mới nhất đòi hỏi phải jQuery 1.3.2 hoặc mới hơn. (theo wiki)
4. Trang chủ: http://jqueryui.com/

• Widgets (1 số cho các bạn dễ hình dung): Code sử dụng Jquery UI cực kì đơn giản, bạn chỉ việc import các file css và js (có thể tìm thấy ngay trên trang chủ) là có thể sủ dụng ngay!

Accordion (Spolier)

HTML:

<div class="demo">
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Nội dung 1
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Nội dung 2
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>
        Nội dung 3
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        <p>
        Nội dung 4.1
        </p>
        <p>
        Nội dung 4.2
        </p>
    </div>
</div>
</div>

Demo: Here

Buttons

HTML:

<div class="demo">
<button>A button element</button>
<input type="submit" value="A submit button"/>
<a href="#">An anchor</a>
</div>

Demo: Here


Tabs

HTML:

<div class="demo">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Nội dung 1</p>
    </div>
    <div id="tabs-2">
        <p>Nội dung 2</p>
    </div>
    <div id="tabs-3">
        <p>Nội dung 4.1</p>
        <p>Nội dung 4.2</p>
    </div>
</div>
</div>

Demo: Here

• Chart: Bạn chỉ cần các thẻ Table quen thuộc...vệc còn lại (tạo chart, màu mè hoa lá) hãy để css và js làm . Code ví dụ:

HTML:

<table>
    <caption>2009 Employee Sales by Department</caption>
    <thead>
        <tr>
            <td></td>
            <th scope="col">food</th>
            <th scope="col">auto</th>
            <th scope="col">household</th>
            <th scope="col">furniture</th>
            <th scope="col">kitchen</th>
            <th scope="col">bath</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Mary</th>
            <td>190</td>
            <td>160</td>
            <td>40</td>
            <td>120</td>
            <td>30</td>
            <td>70</td>
        </tr>
        <tr>
            <th scope="row">Tom</th>
            <td>3</td>
            <td>40</td>
            <td>30</td>
            <td>45</td>
            <td>35</td>
            <td>49</td>
        </tr>
        <tr>
            <th scope="row">Brad</th>
            <td>10</td>
            <td>180</td>
            <td>10</td>
            <td>85</td>
            <td>25</td>
            <td>79</td>
        </tr>
        <tr>
            <th scope="row">Kate</th>
            <td>40</td>
            <td>80</td>
            <td>90</td>
            <td>25</td>
            <td>15</td>
            <td>119</td>
        </tr>   
    </tbody>
</table>    

Demo: Here

• Change Theme: Việc của bạn chỉ là chèn 1 dòng div....còn theme thì bạn download trên trang chủ theo từng gói theme

HTML:

<div id="switcher"></div>

Demo: Here


Link download: http://www.mediafire.com/?nkeqb28nygl0ccg (có bổ sung thêm 1 số thứ)
Pass: vietdesigner.net