Tìm hiểu về JQsuery – UI – Bootstrap và ứng dụng (Đồ án tốt nghiệp)

Tìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụngTìm hiểu về JQsuery – UI – Bootstrap và ứng dụng

án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng Gi i thi u jQuery Error! Bookmark not defined 1.1 Nh ng jQuery có th làm 1.1.2 Thay thành tài HTML i giao di n c a m t trang web tác v i i dùng 1.1.4 T o hi u ng cho nh ng thay i c a 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 u tiên v i s h tr c a jQuery host jQuery 1.3.2 Dùng phiên b có server Google tài HTML code jQuery 1.3.5 Thêm vào class 10 - JQuery UI Error! Bookmark not defined 11 2.2 S d ng JqueryUI ng d ng 11 2.2.1 T i JqueryUI v t website 12 2.2.2 Tùy ch n t i v i b xây d ng t i v (download builder) 12 2.2.3 T i v t n CDN 14 2.3 S d ng JqueryUI 16 ng 27 2.5 Tooltip 27 2.6 Widget 29 - Bootstrap Error! Bookmark not defined 3.1 T i v 34 3.2 C u trúc c a mã ngu n Bootstrap 35 3.3 Giao di n 36 3.3.1 Giao di u 37 3.3.2 Jumbotron 39 3.2.3 Carousel 43 c - L p CTL601 - Ngành: Công ngh thông tin án t t nghi p 3.3.3 B Tìm hi u v JQsuery UI Bootstrap ng d ng u n 54 3.3.4 M t s giao di n khác 64 C - JQ 65 4.1 T i v s d ng 65 4.1.1 T i v 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 c a jqueryUI bootstrap Framework 74 77 79 c - L p CTL601 - Ngành: Công ngh thông tin án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng Tên Widget Framework web-based jQuery jQuery UI CSS Designer Footer Các thành ph u n c a s ph n m m có giao di n c a s h a nút, tên, m , h n, h p thông báo, Framework gi s d ng n mã l c xây d ng s Các ng d ng n n t ng web JQuery m gi n hóa cách vi web n ki u m i c x lý s ki n trang jQuery UI giao di i dùng th Nó cung c p s u ng d ng Internet phong phú n jQuery tài cho vi c t o CSS vi t t t c a c m t "Cascading Style Sheet" , m t ngơn ng nh cách trình bày c a th html trang web i thi t k Chân trang c - L p CTL601 - Ngành: Công ngh thông tin án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng Gi i thi u Bootstrap m t nh ng d án m t c s d ng ng xuyên làm cho chi u d án web-based Tuy nhiên, s d thi t k giao di i dùng cho d án có n y sinh m t s v sau: Th nh t, không ch mu n s d ng jQuery UI cho s phát tri n Widget mà mu n s d ng v i Bootstrap Bootstrap có m t thi t k tr c quan t v i cho t t c m i th t nút b m t i tab cung c p cho m t giao di n t v i mà có th l p l i d án khác Th hai, ta có th bi t, khơng có m t ch bootstrap có s u thêm Bootstrap vào m t trang, ta s nhanh chóng th y r ng m t s ki u CSS cho giao di i dùng s b phá v t i l i c a d án Bootstrap, Bootstrap c t c s d ng v i giao di i dùng jQuery, nhiên, m t gi n Jquery UI Bootstrap jQuery UI Bootstrap gì? jQuery UI Bootstrap cung c p m t n c a thi t k m t ch cho jQuery UI có th c áp d ng cho widgets m m t phiên b n m i (s ch) c có th c s d ng v i ch c th c a jQuery UI mà không c n ph i lo l ng v t CSS t minh ch ng, t i khơng có m t nhìn t i trang ch c a d án? C hai vùng gi i thi u nút t d ng Bootstrap làm giao di n m i th khác s d ng m t giao di n jQuery UI L i ích c a vi cs d ng mi n phí t t c m i th t b trí trang web c a ta giao di n t gi i pháp h u ích D ánnày v n m i ta s d ng m t s thành ph n (các nút, t p t ngang, tab, c a s modal, date-pickers) thi t k v i s t tin t t c chúng làm vi c M t s tinh ch nh v c th c hi n cho nh ng th l nh v i bi ng widgetc a bên th ba s s m có phiên b n c i ti n m i Framework ho ng t t trình t: Chrome 15+ (supports 13/14 too), Opera (stable + next), Firefox 5+, Safari 5+, IE 8+ i thi u v em c s d ng v liên quan t t s ví d r t n cho vi c th c thi k t h p gi a JqueryUI Bootstraps css Framework cu i ph n k t lu n c - L p CTL601 - Ngành: Công ngh thơng tin án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng phát mau Internet, dùng ngày quan tâm hình trang web , trang web có banner, dung footer cho trang web hồn bây trang web có banner dung hay khác có thu hút Chính web designer jQuery có cách nhanh chóng dàng ý tác Java Script JavaScript làm quen jQuery, ta khơng jQuery khác có functions có tài jQuery khó Tuy nhiên, có jQuery có trúc theo Cách v code jQuery vay mà web designer HTML CSS Designer khơng coder, có dàng jQuery CSS giúp jQuery 1.1 Jquery có 1.1.1 làm thành tài HTML khơng Java Script này, dòng code có tiêu di trúc (hay g i DOM = Document Object Model) c a m t tài li u HTML ch n thành ph n liên quan Jquery cho phép b n ch n b t c thành ph n c a tài li u có th truy c p m t cách d dàng s d ng CSS 1.1.2 Thay giao CSS công không trang web trang web có trình jQuery này, có giúp trang web có trình jQuery có thay class CSS áp lên thành tài HTML trang web trình load thành cơng Thay dung tài jQuery khơng có thay ngồi trang web, có thay dung tài vài dòng code Nó có thêm dung trang, hình có thêm vào sang hình khác, danh sách có chí trúc trang web có hồn tồn có làm giúp API (Application Programming Interface = Giao trình c - L p CTL601 - Ngành: Công ngh thông tin án t t nghi p 1.1.3 Tìm hi u v JQsuery UI Bootstrap ng d ng tác dùng Cho dù cơng dùng có cơng coi java Script jQuery, cho cách tác dùng vào link có khơng làm cho code tung lên Handlers Event Handler API trang web thích trình ng làm designer 1.1.4 cho tác ng cho phép 1.1.5 thơng tin thay dùng ví hay Event web tài dùng, web designer cho dùng làm tác Jquery cho phép ngang v.v riêng server mà khơng trang web cơng ngày nên Script And XML (AJAX), giúp web tác tính jQuery q trình cho phép phát web có hố tác java Script Ngồi nêu jQuery cho phép code java Script cách vòng 1.2 khơng có Asynchronous Java trang trình trung vào tính tính so jQuery làm móng cho trung vào tính dùng ngày quan tâm Dynamic HTML, java Script Frameworks Có frame works vài tính nêu có bao nhét vào package tính nêu jQuery sau: CSS: Các jQuery Selector y chang trúc cú pháp Chính jQuery ngõ thêm tính cho trang web thành web designer chun s có CSS, có CSS Selector cho web designer tiên CSS jQuery tránh vào Plugin tính sáng Plugin: dùng phép plugin Xố nhồ khác thái Cách tính ,jQuery cho plugin jQuery trình c - L p CTL601 - Ngành: Cơng ngh thơng tin án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng trình có web designer làm trình Cho nên trang web JQuery giúp thêm trình dàng riêng ta trang web cho trang web có làm cho khác làm code trình trình giúp Ln làm Set: Ví u jQuery tìm thành có class delete chúng Chúng ta khơng loop qua thành Thay vào set thay thành có khơng code pháp hide () code loop vòng mà làm thi, tác dòng: tránh tác gian ,jQuery cho phép trình Chaining cho method có tác hành thành thành sàng cho tác theo áp lên nêu giúp kích jQuery bé 20Kb nén cung cho giúp code trang Cho phép Jquery có hồn jQuery nhiên yên tâm cá nhân 1.3 cách bên v phát thêm Plugin tính tâm jQuery Cho dù java Script hồn tồn phí cho GNU Public License MIT License, có trang web jQuery vào trang web trang web 1.3.1 nên tiên có jQuery Java Script Có hai cách i chèn chèn jQuery vào host jQuery Vào trang jQuery download phiên có 02 phiên jQuery cho download Phiên nén dành cho phát Còn phiên nén dành cho trang có dung so phiên nén không cài jQuery, link jQuery, tài HTML host c - L p CTL601 - Ngành: Công ngh thông tin án t t nghi p 1.3.2 Dùng phiên Tìm hi u v JQsuery UI Bootstrap ng d ng có server Google Ngồi cách trên, có phiên nén jQuery có server Google S cách có hai là: 1thông cho trang web - jQuery load nhanh máy dùng cache jQuery Tuy nhiên phiên có server Google mà không n download máy Cú pháp chèn jQuery file có server Google sau: 1.3.3 tài Trong javaScript HTML có ba cho tài HTML ví có thành tài HTML, Stylesheet CSS tài Trong tiên tài header, sidebar, content footer Trong content class có nhiên CSS HTML jQuery Introduction 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

code dàng jQuery Stylesheet t quan mà ý file Ban CSS load trang web load xong CSS thêm vào jQuery code jQuery không code jQuery không làm mong jQuery load 1.3.4 Bây file code jQuery trình code lên chèn vào dòng code: file tên first-jquery.js c - L p CTL601 - Ngành: Công ngh thông tin án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng rap Dialog

- Khoa CNTT HPU

án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng 0;"> Dialog

- Khoa CNTT HPU

Dialog

- Khoa CNTT HPU

b">

Thêm Tab

c - L p CTL601 - Ngành: Công ngh thông tin 70 án t t nghi p Tìm hi u v JQsuery UI Bootstrap ng d ng
• Tab 1

- Khoa CNTT HPU

4.2.4 Highlight, Error, Datepicker Các thông báo, h p tho cs d p m t r t d dàng: Mã: u / L i