Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng MỤC LỤC Một số thuật ngữ Giới thiệu CHƢƠNG I - Giới thiệu jQuery Error! Bookmark not defined 1.1 Những jQuery làm 1.1.1 Hướng tới thành phần tài liệu HTML 1.1.2 Thay đổi giao diện trang web 1.1.3 Tương tác với người dùng 1.1.4 Tạo hiệu ứng động cho thay đổi tài liệu 1.1.5 Lấy thông tin từ server mà không cần tải lại trang web 1.2 Tại jQuery làm việc tốt 1.3 Tạo trang web với hỗ trợ jQuery 1.3.1 Tự host jQuery 1.3.2 Dùng phiên có sẵn server Google 1.3.3 Chuẩn bị tài liệu HTML 1.3.4 Bắt đầu code jQuery 1.3.5 Thêm vào class 10 CHƢƠNG II - JQuery UI Error! Bookmark not defined 2.1 Các tính 11 2.2 Sử dụng JqueryUI ứng dụng 11 2.2.1 Tải JqueryUI từ website 12 2.2.2 Tùy chọn tải với xây dựng tải (download builder) 12 2.2.3 Tải từ thư viện CDN 14 2.3 Sử dụng JqueryUI 16 2.4 Thay đổi kích thước đối tượng 27 2.5 Tooltip 27 2.6 Widget 29 CHƢƠNG III - Bootstrap Error! Bookmark not defined 3.1 Tải 34 3.2 Cấu trúc mã nguồn Bootstrap 35 3.3 Giao diện 36 3.3.1 Giao diện ban đầu 37 3.3.2 Jumbotron 39 3.2.3 Carousel 43 Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thơng tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng 3.3.3 Bảng điều khiển 54 3.3.4 Một số giao diện khác 64 CHƢƠNG IV - JQuery UI Bootstrap ứng dụng 65 4.1 Tải sử dụng 65 4.1.1 Tải 65 4.1.2 Sử dụng 65 4.2 Các thành phần 65 4.2.1 Button 65 4.2.2 Dialog 67 4.2.3 Tabs 69 4.2.4 Highlight, Error, Datepicker 71 4.2.5 Menu 73 4.3 Ví dụ thử nghiệm số thành phần jqueryUI bootstrap Framework 74 Kết luận 77 TÀI LIỆU THAM KHẢO 79 Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Một số thuật ngữ Tên Ý nghĩa Widget Các thành phần để dùng điều khiển cửa sổ phần mềm có giao diện cửa sổ đồ họa nút, tên, mục đơn, hộp văn bản, hộp thông báo, Framework Framework giống thư viện mã lệnh xây dựng sẵn để sử dụng web-based Các ứng dụng tảng web jQuery JQuery thư viện kiểu Javascript giúp đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web jQuery UI jQuery UI giao diện người dùng thức thư viện jQuery Nó cung cấp tương tác, widget, hiệu ứng, đề tài cho việc tạo ứng dụng Internet phong phú CSS Designer Footer CSS viết tắt cụm từ "Cascading Style Sheet" , ngơn ngữ quy định cách trình bày thẻ html trang web Người thiết kế Chân trang Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Giới thiệu Bootstrap dự án mắt năm 2011 sử dụng thường xuyên làm sở cho chiều dự án web-based Tuy nhiên, sử dụng để thiết kế giao diện người dùng cho dự án có nảy sinh số vấn đề sau: Thứ nhất, không muốn sử dụng jQuery UI cho phát triển Widget mà muốn sử dụng với Bootstrap Bootstrap có thiết kế trực quan tuyệt vời cho tất thứ từ nút bấm tới tab cung cấp cho giao diện sở tuyệt vời mà lặp lại dự án khác Thứ hai, ta biết, khơng có chủ đề bootstrap có sẵn cho jQuery UI thêm Bootstrap vào trang, ta nhanh chóng thấy số kiểu CSS cho giao diện người dùng bị phá vỡ xung đột Đây lỗi dự án Bootstrap, Bootstrap không tạo để sử dụng với giao diện người dùng jQuery, nhiên, giải pháp đưa thư viện Jquery UI Bootstrap jQuery UI Bootstrap gì? jQuery UI Bootstrap cung cấp thư viện thiết kế Twitter Bootstrap chủ đề cho jQuery UI áp dụng cho widgets Nó bao gồm phiên (sạch) Bootstrap mà “có thể” sử dụng với chủ đề cụ thể jQuery UI mà không cần phải lo lắng xung đột CSS Như minh chứng, khơng có nhìn trang chủ dự án? Cả hai vùng giới thiệu nút tải sử dụng Bootstrap làm giao diện thứ khác sử dụng giao diện jQuery UI Lợi ích việc ta sử dụng miễn phí tất thứ từ Bootstrap để bố trí trang web ta giao diện jQuery UI cho widget tương tác Đó giải pháp hữu ích Dự ánnày mới, ta sử dụng số thành phần (các nút, tập nút, trượt ngang, tab, cửa sổ modal, date-pickers) thiết kế với tự tin tất chúng làm việc Một số tinh chỉnh thực cho thứ nút lệnh với biểu tượng widgetcủa bên thứ ba sớm có phiên cải tiến Framework hoạt động tốt trình duyệt: Chrome 15+ (supports 13/14 too), Opera (stable + next), Firefox 5+, Safari 5+, IE 8+ Đồ án trình bày chương Chương giới thiệu Jquery.Chương trình bày Jquery UI Chương em đưa cách thức sử dụng vấn đề liên quan tới bootstrap CSS Framework Chương số ví dụ cho việc thực thi kết hợp JqueryUI Bootstraps css Framework cuối phần kết luận Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Cơng nghệ thơng tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng CHƢƠNG I – GIỚI THIỆU VỀ JQUERY Với phát triển mau lẹ Internet, người dùng ngày quan tâm đến hình thức trang web Trước đây, trang web cần có banner, nội dung footer hời hợt cho trang web hoàn chỉnh Nhưng trang web phải có banner bắt mắt, nội dung hay nhiều hiệu ứng lạ mắt khác thu hút người đọc Chính web designer bắt đầu ý đến thư viện Java Script mở jQuery để tạo hiệu ứng tương tác trực tiếp với người đọc cách nhanh chóng dễ dàng nhiều sử dụng JavaScript Nhưng người làm quen với jQuery, ta thấy phải đâu jQuery giống thư viện khác có nhiều functions Mặc dù có đọc phần tài liệu hướng dẫn sử dụng jQuery bạn thấy phức tạp khó hiểu Tuy nhiên, có điều làm người dùng yên tâm jQuery có cấu trúc mạch lạc theo hệ thống Cách viết code jQuery vay mượn từ nguồn mà web designer đa phần biết HTML CSS Nếu từ trước đến bạn Designer khơng phải coder, bạn dễ dàng học jQuery kiến thức CSS giúp bạn nhiều bắt đầu với jQuery 1.1 Những Jquery làm 1.1.1 Hƣớng tới thành phần tài liệu HTML Nếu không sử dụng thư viện Java Script này, bạn phải viết nhiều dòng code đạt mục tiêu di chuyển cấu trúc (hay gọi DOM = Document Object Model) tài liệu HTML chọn thành phần liên quan Jquery cho phép bạn chọn thành phần tài liệu để truy cập cách dễ dàng sử dụng CSS 1.1.2 Thay đổi giao diện trang web CSS công cụ mạnh để định dạng trang web có nhược điểm khơng phải tất trình duyệt hiển thị giống Do jQuery đời để lấp chỗ trống này, bạn sử dụng để giúp trang web hiển thị tốt hầu hết trình duyệt Hơn jQuery thay đổi class định dạng CSS áp dụng lên thành phần tài liệu HTML trang web trình duyệt load thành cơng Thay đổi nội dung tài liệu jQuery khơng phải thay đổi bề ngồi trang web, thay đổi nội dung tài liệu với vài dòng code Nó thêm bớt nội dung trang, hình ảnh thêm vào đổi sang hình khác, danh sách xếp lại chí cấu trúc HTML trang web viết lại mở rộng Tất điều bạn hoàn tồn làm nhờ giúp đỡ API (Application Programming Interface = Giao diện lập trình ứng dụng) Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng 1.1.3 Tƣơng tác với ngƣời dùng Cho dù công cụ bạn dùng có mạnh mẽ đến mấy, bạn khơng có quyền định sử dụng cơng cụ coi bỏ Với thư viện java Script jQuery, cho bạn nhiều cách để tương tác với người dùng ví dụ người dùng nhấp chuột vào đường link có xảy Nhưng hay không làm cho code HTML bạn rối tung lên nhờ Event Handlers Hơn Event Handler API bảo đảm trang web bạn tương thích hầu hết với trình duyệt, điều làm đau đầu nhiều web designer 1.1.4 Tạo hiệu ứng động cho thay đổi tài liệu Để tương tác tốt với người dùng, web designer phải cho người dùng thấy hiệu ứng xảy họ làm tác vụ Jquery cho phép bạn sử dụng nhiều hiệu ứng động mờ dần, chạy dọc chạy ngang v.v… chưa đủ, cho phép bạn tự tạo hiệu ứng riêng 1.1.5 Lấy thơng tin từ server mà khơng cần tải lại trang web Đây cơng nghệ ngày trở nên phổ biến Asynchronous Java Script And XML (AJAX), giúp người thiết kế web tạo trang web tương tác cực tốt nhiều tính Thư viện jQuery loại bỏ phức tạp trình duyệt trình cho phép người phát triển web tập trung vào tính đầu cuối Đơn giản hoá tác vụ java Script Ngồi tính nêu trên, jQuery cho phép bạn viết code java Script đơn giản nhiều so với cách truyền thống vòng lặp điều khiển mảng 1.2 Tại jQuery làm việc tốt Người dùng ngày quan tâm đến Dynamic HTML, móng cho đời java Script Frameworks Có frame works tập trung vào vài tính vừa nêu trên, có bao gồm tất hiệu ứng, tập tính nhồi nhét vào package Để đảm bảo thư viện “nhanh gọn nhẹ” “ngon bổ rẻ” với tính nêu trên, jQuery sử dụng chiến lược sau: Tận dụng kiến thức CSS: Các jQuery Selector hoạt động y chang CSS Selector với cấu trúc cú pháp Chính thư viện jQuery cửa ngõ cho web designer muốn thêm nhiều tính cho trang web Bởi điều kiện tiên để trở thành web designer chuyên nghiệp khả sử dụng CSS thục Với kiến thức sẵn có CSS, bạn có khởi đầu thuận lợi với jQuery Hỗ trợ Plugin: Để tránh bị rơi vào trạng thái tải tính ,jQuery cho phép người dùng tạo sử dụng Plugin cần Cách tạo plugin đơn giản hướng dẫn cụ thể, cộng đồng sử dụng jQuery tạo loạt plugin đầy tính sáng tạo hữu dụng Xố nhồ khác biệt trình duyệt: Một thực tế tồn hệ Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thơng tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng thống trình duyệt lại có kiểu riêng để đọc trang web Dẫn đến điều làm đau đầu web designer làm trang web hiển thị tốt trình duyệt Cho nên đơi người ta phải làm hẳn phần code phức tạp để đảm bảo trang web họ hiển thị gần tương đồng trình duyệt phổ biến JQuery giúp bạn thêm lớp bảo vệ cho khác biệt trình duyệt giúp trình diễn dễ dàng nhiều Ln làm việc với Set: Ví dụ yêu cầu jQuery tìm tất thành phần có class delete ẩn chúng Chúng ta không cần phải loop qua thành phần trả Thay vào đó, phương pháp hide () thiết kế để làm việc với set thay thành phần đơn lẻ Kỹ thuật gọi vòng lặp ẩn, điều có nghĩa tự viết code để loop mà thực thi, code ngắn nhiều Cho phép nhiều tác vụ diễn dòng: Để tránh phải sử dụng biến tạm tác vụ lặp tốn thời gian ,jQuery cho phép bạn sử dụng kiểu lập trình gọi Chaining cho hầu hết method Điều có nghĩa kết tác vụ tiến hành thành phần thành phần đó, sẵn sàng cho tác vụ áp dụng lên Những chiến lược nêu giúp kích thước jQuery nhỏ bé khoảng 20Kb dạng nén Nhưng đảm bảo cung cấp cho kỹ thuật để giúp code trang nhỏ gọn mạch lạc Jquery trở nên phổ biến cách sử dụng đơn giản bên cạnh có cộng đồng sử dụng mạnh mẽ phát triển thêm Plugin hoàn thiện tính trọng tâm jQuery Cho dù thực tế vậy, jQuery lại thư viện java Script hồn tồn miễn phí cho người sử dụng Tất nhiên bảo vệ luật GNU Public License MIT License, bạn yên tâm bạn sử dụng hầu hết trường hợp kể thương mại lẫn cá nhân 1.3 Tạo trang web với hỗ trợ jQuery Bởi jQuery thư viện Java Script để sử dụng bạn phải chèn vào trang web sử dụng Có hai cách để chèn jQuery vào trang web 1.3.1 Tự host jQuery Vào trang chủ jQuery download phiên Thường có 02 phiên jQuery cho bạn download Phiên chưa nén dành cho người phát triển học bạn Còn phiên nén dành cho phần sử dụng trực tiếp trang có dung lượng nhỏ nhiều so với phiên chưa nén Bạn không cần phải cài đặt jQuery, bạn cần đặt đường link tới thư viện Bất bạn cần sử dụng jQuery, bạn cần gọi tài liệu HTML đến nơi lưu trữ host bạn Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng 1.3.2 Dùng phiên có sẵn server Google Ngồi cách trên, bạn sử dụng phiên nén jQuery có sẵn server Google Sử dụng cách có hai điều lợi là: 1- tiết kiệm băng thông cho trang web bạn 2- jQuery load nhanh máy người dùng cache jQuery Tuy nhiên phần tới sử dụng phiên có sẵn server Google mà không cần phải download máy Cú pháp để chèn jQuery sử dụng file có sẵn server Google sau: 1.3.3 Chuẩn bị tài liệu HTML Trong hầu hết ví dụ sử dụng loạt có thành phần sử dụng nhiều tài liệu HTML, Stylesheet CSS tài liệu javaScript để thực lệnh Trong vídụ sử dụng tài liệu HTML đơn giản với header, sidebar, content footer Trong phần content có ba đoạn văn số class sẵn có Tất nhiên bạn phải sử dụng CSS để định dạng cho tài liệu HTML jQuery Introduction jQuery Introduction - Home Page
- About Me
- Forum
- Ebooks
Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thơng tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng - Tutorials
- Photoshop
- Email
Lorem ipsum dolor sit amet som e text here
Lorem ipsum dolor sit amet some text here
Lorem ipsum dolor sit amet some text here
©2010vanthanhloc@gmail.com
Ở đoạn code bạn dễ dàng nhận thấy thư viện jQuery đặt Stylesheet Đây điểm quan trọng mà bạn cần lưu ý thứ tự file gọi Ban đầu phải CSS load trước, trang web load xong phần CSS thêm vào phần thư viện jQuery cuối code jQuery tự viết Nếu không code jQuery bạn không làm việc mong đợi thư viện jQuery chưa load 1.3.4 Bắt đầu code jQuery Bây bạn mở trình soạn thảo code lên tạo file tên first-jquery.js file chèn vào dòng code: Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Gõvàofilevừatạo3dòngcoden hưsau: $(document).ready( function() { $('.text').addClass('i mportant'); }); Thao tác jQuery chọn phần tài liệu HTML Bạn tiến hành cách sử dụng hàm $() Thường nằm dấu ngoặc () chuỗi dạng tham số, hững CSS Selectors Trong ví dụ muốn tìm tất thành phần có class = ”text”, cúp háp giống bạn viết code CSS Hàm $() jQuery Object, móng cho tất học từ Jquery Object bao gồm không nhiều thành phần DOM cho phép tương tác với chúng nhiều cách Trong trường hợp muốn thay đổi cách hiển thị phần trang, thực cách thay đổi classc 1.3.5 Thêm vào class Phương pháp addClass(), giống hầu hết phương pháp jQuery khác, đặt tên theo chức Khi gọi, thêm class vào thành phần chọn Tham số tên class thêm vào Phương pháp đối ngược với removeClass(), cho phép quan sát jQuery hoạt động khám phá phương pháp lựa chọn có sẵn jQuery Còn bây giờ, code jQuery đơn giản thêm class = ”important”, class khai báo stylesheet với thuộc tính viền đỏ hồng nhạt border: 1px solid red; background: pink; Bạn nhận thấy chạy vòng lặp để thêm class vào đoạn văn có chung class Đây vòng lặp ẩn phương pháp jQuery, ví dụ addClass(), bạn phải gọi lần có để thay đổi thành phần bạn muốn tài liệu Bây bạn chạy thử trang web vừa tạo trình duyệt bạn thấy đoạn văn có class text bị tơ hồng có viền màu đỏ Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 10 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng CHƢƠNG IV - JQUERY UI BOOTSTRAP VÀ ỨNG DỤNG Chương em giới thiệu cách sử dụng jquery ui bootstrap việc tạo giao diện thông qua hướng dẫn cho việc tạo thành phần trang web nút lệnh, menu, hiệu ứng tooltip,… 4.1 Tải sử dụng 4.1.1 Tải Vào địa web http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/, ta thấy chế độ download stable lastest Tùy thuộc vào mục đích mà tải phù hợp (thơng thường stable) Sau tải về, giải nén thư mục jquery-ui-bootstrapmasterbs3 Bên có thư mục con: assets, css, less, theme, số thư mục tập tin khác Để sử dụng, cần quan tâm tới thư mục css nơi chứa file định nghĩa style thành phần web 4.1.2 Sử dụng Để sử dụng, sau tải file nguồn, giải nén tìm tới thư mục css/customtheme Trong có thư mục images file: jquery.ui.1.10.3.ie.css, jquery-ui1.10.3.custom.css jquery-ui-1.10.3.theme.css Copy thư mục css vào thư mục chứa định nghĩa style ứng dụng (thông thường css) Cuối cùng, ứng dụng thêm file css vào đầu file (thẻ ) trang web Trong phần đây, em giới thiệu số thành phần quan trọng jquery-ui-bootstrap framework 4.2 Các thành phần 4.2.1 Button Trong jqueryUI bootstrap, button đƣợc khai báo đơn giản với thuộc tính thêm vào để tạo đƣợc nhiều kiểu button khác nhau: // Button Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 65 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng $('button').button(); // Anchors, Submit $('.button').button(); Kích thƣớc button đƣợc điều chỉnh dễ dàng: Bên cạnh ta cho thêm icon vào button làm sinh động button lên: Ngồi nhiều kiểu khác như: Block level button, Thumbnails with buttons, Button set, Simple toolbar, Split Button Các mã nguồn button tổng hợp đoạn mã đây, ta chọn sử dụng button cho hợp lý tùy thuộc ứng dụng triển khai yêu cầu khách hàng: Nút lệnh Màu sắc nút Kiểu ngầm định Kiểu chuẩn Kiểu thành công Kiểu thông tin Kiểu cảnh báo Kiểu nguy hiểm Kiểu đảo chiều
Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 66 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Kích thước nút Kiểu lớn Kiểu lớn
Kiểu ngầm định Kiểu ngầm định
Kiểu nhỏ Kiểu nhỏ
Kiểu nhỏ Kiểu nhỏ
Nút lệnh có biểu tượng Nút có biểu tượng
Nút có biểu tượng
Nút có biểu tượng
4.2.2 Dialog JqueryUI bootstrap dễ dàng cho phép người dùng gọi hộp thoại trang web Có ba kiểu mở hộp thoại sử dụng là: Open Dialog, Open Modal Dialog, Open Button Dialog tương tự kiểu hộp thoại quen biết khác Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 67 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Mã nguồn sử dụng: Hộp thoại Hộp thoại đơn giản Hộp thoại modal Hộp thoại nhiều nút lệnh
Hộp thoại đơn giản Đồ án tốt nghiệp CNTT năm 2014 JqueryUI Bootstrap Dialog
Hộp thoại Modal Đồ án tốt nghiệp CNTT năm 2014 JqueryUI Bootstrap Dialog
Giáo viên Hướng dẫn: Đỗ Văn Chiểu - Khoa CNTT HPU
Hộp thoại nhiều nút lệnh Đồ án tốt nghiệp CNTT năm 2014 JqueryUI Bootstrap Dialog
Giáo viên Hướng dẫn: Đỗ Văn Chiểu - Khoa CNTT HPU Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 68 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng
4.2.3 Tabs Thiết kế tab phần thiếu hầu hết ứng dụng web, JqueryUI Bootstrap cho ta cách đơn giản để làm điều Mã nguồn: Tabs Tab đơn giản Hộp thoại nhiều nút lệnh Đồ án tốt nghiệp CNTT năm 2014 JqueryUI Bootstrap Dialog
Giáo viên Hướng dẫn: Đỗ Văn Chiểu - Khoa CNTT HPU
Hộp thoại nhiều nút lệnh Đồ án tốt nghiệp CNTT năm 2014 JqueryUI Bootstrap Dialog
Giáo viên Hướng dẫn: Đỗ Văn Chiểu - Khoa CNTT HPU
Hộp thoại nhiều nút lệnh Đồ án tốt nghiệp CNTT năm 2014 JqueryUI Bootstrap Dialog
Giáo viên Hướng dẫn: Đỗ Văn Chiểu - Khoa CNTT HPU
Thêm bớt tab Tiêu đề
Nội dung
Thêm Tab
Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 70 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng - Tab 1
Thêm tab Đồ án tốt nghiệp CNTT năm 2014 JqueryUI Bootstrap Tab
Giáo viên Hướng dẫn: Đỗ Văn Chiểu - Khoa CNTT HPU
4.2.4 Highlight, Error, Datepicker Các thông báo, hộp thoại ngày tháng sử dụng đơn giản, đẹp mắt dễ dàng: Mã: Đánh dấu / Lỗi Đánh dấu Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 71 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Chào! Đây kiểu đánh dấu.
Lỗi Chào! Đây kiểu báo lỗi.
Ngầm định Chào! Đây kiểu thông báo ngầm định.
Hộp thoại lịch Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 72 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng 4.2.5 Menu JqueryUI Bootstrap cho phép dễ dàng tạo menu với nhiều cấp Ví dụ Mã: Menu Ngoài nhiều thành phần hỗ trợ thiết kế mà khuôn khổ đồ án giới thiệu hết như: Overlay and Shadow Classes, Slider, Autocomplete, Spinner, Icons, Tooltip, Progress bar 4.3 Ví dụ thử nghiệm số thành phần jqueryUI bootstrap Framework Trong phần này, em xây dựng ví dụ (là trang html) có số thành phần của jqueryUI bootstrap, qua em muốn người đọc vận dụng để đưa giao diện thành phần web vào ứng dụng mà khơng cần đòi hỏi nhiều xây dựng css Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Cơng nghệ thơng tin 74 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Dưới số hình ảnh giao diện: Giao diện banner chương trình sử dụng css bootstrap Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thơng tin 75 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Giao diện phần chạy thử nghiệm thành phần trang Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 76 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Giao diện phần chân trang Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 77 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng KẾT LUẬN Đồ án tìm hiểu số kỹ thuật việc thiết kế giao diện ứng dụng web thông qua framework miễn phí thơng dụng Jquery, JqueryUI, Bootstrap Tuy nhiên, kết hợp Bootstrap Jquery để tạo bố cục web sinh động đẹp xảy số tượng xung đột, dẫn tới hiệu ứng phong cách không ý muốn Để giải điều này, phương pháp đưa xây dựng lại số thành phần css js bootstrap để khơng bị xung đột với jquery JqueryUI Bootstrap framework Đồ án giới thiệu số thành phần đưa ví dụ sử dụng nhằm mục đích hỗ trợ người bắt tay vào thiết kế có nhìn đơn giản ứng dụng nhanh tiện ích mà JqueryUI Bootstrap framework mang lại giúp việc xây dựng chương trình nhanh hơn, dễ dàng Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thơng tin 78 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng TÀI LIỆU THAM KHẢO [1] – http://tailieuhoctap.vn [2] – http://vi-wikipedia.org Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 79 ... thơng tin 12 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thơng tin 13 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap. .. thông tin 16 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Sinh viên: Văn Thành Lộc - Lớp CTL601 - Ngành: Công nghệ thông tin 17 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap. .. Ngành: Công nghệ thông tin 20 Đồ án tốt nghiệp Tìm hiểu JQsuery – UI – Bootstrap ứng dụng Effect
