Jquery - Bootrap

n tt nghip
Tm hiu v JQsuery UI Bootstrap v ng dng
MC LC
Mt s thut ng ............................................................................................................ 3
Gii thiu ........................................................................................................................ 4
CHNG I - Gii thiu v jQuery ................................ Error! Bookmark not defined.
1.1 Nhng g jQuery c th lm ..................................................................................... 5
1.1.1 Hng ti cc thnh phn trong ti liu HTML. ............................................... 5
1.1.2 Thay i giao din ca mt trang web............................................................... 5
1.1.3 Tng tc vi ngi dng ................................................................................. 6
1.1.4 To hiu ng ng cho nhng thay i ca ti liu. .......................................... 6
1.1.5 Ly thng tin t server m khng cn ti li trang web ..................................... 6
1.2 Ti sao jQuery lm vic tt ...................................................................................... 6
1.3 To trang web u tin vi s h tr ca jQuery ..................................................... 7
1.3.1 T host jQuery ................................................................................................... 7
1.3.2 Dng phin bn c sn trn server ca Google ................................................. 8
1.3.3 Chun b ti liu HTML ..................................................................................... 8
1.3.4 Bt u code jQuery........................................................................................... 9
1.3.5 Thm vo mt class mi .................................................................................. 10
CHNG II - JQuery UI ............................................... Error! Bookmark not defined.
2.1 Cc tnh nng.......................................................................................................... 11
2.2 S dng JqueryUI trong ng dng ......................................................................... 11
2.2.1 Ti JqueryUI v t website .............................................................................. 12
2.2.2 Ty chn ti vi b xy dng ti v (download builder) ................................ 12
2.2.3 Ti v t th vin CDN ................................................................................... 14
2.3 S dng JqueryUI .................................................................................................. 16
2.4 Thay i kch thc i tng ............................................................................... 27
2.5 Tooltip .................................................................................................................... 27
2.6 Widget .................................................................................................................... 29
CHNG III - Bootstrap ............................................... Error! Bookmark not defined.
3.1 Ti v ...................................................................................................................... 34
3.2 Cu trc ca m ngun Bootstrap .......................................................................... 35
3.3 Giao din ................................................................................................................ 36
3.3.1 Giao din ban u ............................................................................................ 37
3.3.2 Jumbotron ........................................................................................................ 39
3.2.3 Carousel ........................................................................................................... 43
Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin
1
n tt nghip
3.3.3 Bng iu khin ............................................................................................... 54

3.3.4 Mt s giao din khc ...................................................................................... 64
CHNG IV - JQuery UI Bootstrap v ng dng .................................................. 65
4.1 Ti v v s dng ................................................................................................... 65
4.1.1 Ti v ............................................................................................................... 65
4.1.2 S dng ............................................................................................................ 65
4.2 Cc thnh phn c bn ........................................................................................... 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 nghim 1 s thnh phn c bn ca jqueryUI bootstrap Framework .... 74
Kt lun ......................................................................................................................... 77
TI LIU THAM KHO ........................................................................................... 79

2
n tt nghip
Mt s thut ng
Tn
ngha
Widget
Cc thnh phn c bn dng iu khin cc ca s trong

cc phn mm c giao din ca s ha nh l cc nt, cc thanh tn,
cc mc n, cc hp vn bn, cc hp thng bo, ...
Framework
Framework ging nh 1 th vin m lnh c xy dng sn

chng ta s dng.
web-based
Cc ng dng trn nn tng web.
jQuery
JQuery chnh l mt th vin kiu mi ca Javascript gip n

gin ha cch vit Javascript v tng tc x l cc s kin trn trang
web.
jQuery UI
jQuery UI l giao din ngi dng chnh thc th vin jQuery.

N cung cp s tng tc, cc widget, hiu ng, v ti cho vic to
ra cc ng dng Internet phong ph.
CSS
Designer
Footer
CSS l vit tt ca cm t "Cascading Style Sheet" , n l mt

ngn ng quy nh cch trnh by ca cc th html trn trang web.
Ngi thit k.
Chn trang.

3
n tt nghip
Gii thiu
Bootstrap l mt trong nhng d n ra mt nm 2011 v c s dng thng
xuyn lm c s cho chiu d n web-based. Tuy nhin, khi s dng thit k giao
din ngi dng cho cc d n c ny sinh mt s vn sau: Th nht, chng ta
khng ch mun s dng jQuery UI cho s pht trin cc Widget m cn mun s
dng n cng vi Bootstrap. Bootstrap c mt thit k trc quan tuyt vi cho tt c
mi th t cc nt bm ti cc tab v cung cp cho chng ta mt giao din c s tuyt
vi m chng ta c th lp li trn cc d n khc. Th hai, ta c th bit, khng c
mt ch bootstrap c sn cho jQuery UI nhng nu thm Bootstrap vo trong mt
trang, ta s nhanh chng thy rng mt s kiu CSS cho giao din ngi dng s b
ph v do xung t. y khng phi l li ca d n Bootstrap, Bootstrap khng c
to ra c s dng vi giao din ngi dng jQuery, tuy nhin, mt gii php
c a ra l th vin Jquery UI Bootstrap.
jQuery UI Bootstrap l g?
jQuery UI Bootstrap cung cp mt th vin ca thit k Twitter Bootstrap nh
mt ch cho jQuery UI c th c p dng cho cc widgets. N cng bao gm
mt phin bn mi (sch) ca Bootstrap m c th c s dng cng vi cc ch
c th ca jQuery UI m khng cn phi lo lng v cc xung t CSS.
Nh mt minh chng, ti sao khng c mt ci nhn ti trang ch ca d n? C
hai vng gii thiu v cc nt ti ang s dng Bootstrap lm giao din trong khi mi
th khc l s dng mt giao din jQuery UI. Li ch ca vic ny l ta ang c s
dng min ph tt c mi th t Bootstrap b tr trang web ca ta v cc giao din
jQuery UI cho cc widget tng tc. l mt gii php kh hu ch.
D nny vn cn kh mi, nhng ta c th s dng mt s thnh phn (cc
nt, tp nt, thanh trt ngang, cc tab, ca s modal, date-pickers) trong thit k vi
s t tin tt c chng lm vic cng nhau. Mt s tinh chnh vn ang c thc hin
cho nhng th nh nt lnh vi cc biu tng v cc widgetca bn th ba v s sm
c cc phin bn ci tin mi.
Framework ny hot ng tt trn cc trnh duyt: Chrome 15+ (supports 13/14
too), Opera (stable + next), Firefox 5+, Safari 5+, IE 8+.
n ny c trnh by trong 4 chng. Chng 1 gii thiu v
Jquery.Chng 2 trnh by v Jquery UI. Chng 3 em a ra cch thc s dng v
cc vn lin quan ti bootstrap CSS Framework. Chng 4 l mt s cc v d rt
c bn cho vic thc thi kt hp gia JqueryUI v Bootstraps css Framework v cui
cng l phn kt lun.

4
n tt nghip
CHNG I GII THIU V JQUERY

Vi s pht trin rt mau l ca Internet, ngi dng ngy cng quan tm hn
n hnh thc ca mt trang web. Trc y, mt trang web ch cn c banner, ni
dung v t footer hi ht l c cho l mt trang web hon chnh. Nhng by gi
trang web phi c banner bt mt, ni dung hay v cn nhiu hiu ng l mt
khc na th mi c th thu ht c ngi c.
Chnh v th nhng web designer bt u ch n cc th vin Java Script
m nh jQuery to ra cc hiu ng c th tng tc trc tip vi ngi c mt
cch nhanh chng v d dng hn rt nhiu l s dng thun JavaScript.
Nhng nu l ngi mi lm quen vi jQuery, ta s thy khng bit phi bt
u t u v jQuery cng ging nh bt c th vin no khc cng c rt nhiu
functions. Mc d c c phn ti liu hng dn s dng ca jQuery th bn vn
thy rt phc tp v kh hiu. Tuy nhin, c mt iu lm ngi dng yn tm l
jQuery c cu trc rt mch lc v theo h thng. Cch vit code ca jQuery c
vay mn t cc ngun m cc web designer a phn bit nh HTML v CSS.
Nu t trc n nay bn ch l Designer ch khng phi coder, bn cng c th d
dng hc jQuery v kin thc v CSS gip bn rt nhiu khi bt u vi jQuery.
1.1 Nhng g Jquery c th lm
1.1.1 Hng ti cc thnh phn trong ti liu HTML.
Nu khng s dng th vin Java Script ny, bn phi vit rt nhiu dng
code mi c th t c mc tiu l di chuyn trong cu trc cy (hay cn gi l
DOM = Document Object Model) ca mt ti liu HTML v chn ra cc thnh phn
lin quan. Jquery cho php bn chn bt c thnh phn no ca ti liu c th truy
cp mt cch d dng nh s dng CSS.
1.1.2 Thay i giao din ca mt trang web.
CSS l cng c rt mnh nh dng mt trang web nhng n c mt nhc
im l khng phi tt c cc trnh duyt u hin th ging nhau. Do vy jQuery ra
i lp ch trng ny, v th cc bn c th s dng n gip trang web c th
hin th tt trn hu ht cc trnh duyt. Hn na jQuery cng c th thay i class
hoc nhng nh dng CSS c p dng ln bt c thnh phn no ca ti liu
HTML ngay c khi trang web c trnh duyt load thnh cng. Thay i ni
dung ca ti liu. jQuery khng phi ch c th thay i b ngoi ca trang web, n
cng c th thay i ni dung ca chnh ti liu ch vi vi dng code. N c th
thm hoc bt ni dung trn trang, hnh nh c th c thm vo hoc i sang
hnh khc, danh sch c th c sp xp li hoc thm ch c cu trc HTML ca
mt trang web cng c th c vit li v m rng. Tt c nhng iu ny bn hon
ton c th lm c nh s gip ca API (Application Programming Interface =
Giao din lp trnh ng dng).
5
n tt nghip
1.1.3 Tng tc vi ngi dng

Cho d cng c bn dng c mnh m n my, nhng nu bn khng c
quyn quyt nh khi no n c s dng th cng c cng coi nh b. Vi th
vin java Script nh jQuery, n cho bn nhiu cch tng tc vi ngi dng v d
nh khi ngi dng nhp chut vo ng link th s c g xy ra. Nhng ci hay ca
n l khng lm cho code HTML ca bn ri tung ln chnh l nh cc Event
Handlers. Hn na Event Handler API s bo m rng trang web ca bn tng
thch hu ht vi cc trnh duyt, iu ny v ang lm au u rt nhiu cc web
designer.
1.1.4 To hiu ng ng cho nhng thay i ca ti liu
tng tc tt vi ngi dng, cc web designer phi cho ngi dng thy
c hiu ng g s xy ra khi h lm mt tc v no . Jquery cho php bn s
dng rt nhiu hiu ng ng nh m dn, chy dc chy ngang v.v v nu vn
cha , n cn cho php bn t to ra cc hiu ng ca ring mnh.
1.1.5 Ly thng tin t server m khng cn ti li trang web
y chnh l cng ngh ngy cng tr nn ph bin Asynchronous Java
Script And XML (AJAX), n gip ngi thit k web to ra nhng trang web tng
tc cc tt v nhiu tnh nng. Th vin jQuery loi b s phc tp ca trnh duyt
trong qu trnh ny v cho php ngi pht trin web c th tp trung vo cc tnh
nng u cui. n gin ho cc tc v java Script. Ngoi nhng tnh nng nh
nu trn, jQuery cn cho php bn vit code java Script n gin hn nhiu so vi
cch truyn thng nh l cc vng lp v iu khin mng.
1.2 Ti sao jQuery lm vic tt
Ngi dng ngy cng quan tm hn n Dynamic HTML, cng l nn
mng cho s ra i ca nhng java Script Frameworks. C frame works th ch tp
trung vo mt vi tnh nng va nu trn, c ci th bao gm tt c nhng hiu ng,
tp tnh v nhi nht vo mt package. m bo l mt th vin nhanh gn nh
nhng vn ngon b r vi cc tnh nng nu trn, jQuery s dng nhng chin
lc sau:
Tn dng kin thc v CSS: Cc jQuery Selector hot ng y chang nh
CSS Selector vi cng cu trc v c php. Chnh v th th vin jQuery l ca ng
cho cc web designer mun thm nhiu tnh nng hn na cho trang web ca mnh.
Bi v iu kin tin quyt tr thnh mt web designer chuyn nghip l kh
nng s dng CSS thun thc. Vi kin thc sn c v CSS, bn s c s khi u
thun li vi jQuery.
H tr Plugin: trnh b ri vo trng thi qu ti tnh nng ,jQuery cho
php ngi dng to v s dng Plugin nu cn. Cch to mt plugin mi cng kh
n gin v c hng dn c th, chnh v th cng ng s dng jQuery to ra
mt lot nhng plugin y tnh sng to v hu dng.
Xo nho s khc bit gia trnh duyt: Mt thc t tn ti l mi mt h
6
n tt nghip
thng trnh duyt li c mt kiu ring c trang web. Dn n mt iu lm au

u cc web designer l lm th no cho trang web c th hin th tt trn mi
trnh duyt. Cho nn i khi ngi ta phi lm hn mt phn code phc tp m
bo rng trang web ca h c hin th gn nh tng ng cc trnh duyt ph
bin. JQuery gip bn thm mt lp bo v cho s khc bit ca trnh duyt v gip
qu trnh ny din ra d dng hn rt nhiu.
Lun lm vic vi Set: V d khi chng ta yu cu jQuery tm tt c cc
thnh phn c class l delete v n chng i. Chng ta khng cn phi loop qua tng
thnh phn c tr v.
Thay vo , nhng phng php nh l hide () c thit k ra lm vic
vi set thay v tng thnh phn n l. K thut ny c gi l vng lp n, iu
c ngha l chng ta khng phi t vit code loop na m n vn c thc thi,
chnh v th code ca chng ta s ngn hn rt nhiu.
Cho php nhiu tc v din ra trn cng mt dng: trnh phi s dng
nhng bin tm hoc cc tc v lp tn thi gian ,jQuery cho php bn s dng kiu
lp trnh c gi l Chaining cho hu ht cc method ca n. iu c ngha l kt
qu ca cc tc v c tin hnh trn mt thnh phn chnh l thnh phn , n
sn sng cho tc v tip theo c p dng ln n. Nhng chin lc c nu trn
gip kch thc ca jQuery rt nh b ch khong trn di 20Kb dng nn. Nhng
vn m bo cung cp cho chng ta nhng k thut gip code trn trang nh gn
v mch lc.
Jquery s d tr nn ph bin l do cch s dng n gin v bn cnh
cn c mt cng ng s dng mnh m vn ngy ngy pht trin thm Plugin v
hon thin nhng tnh nng trng tm ca jQuery. Cho d thc t l vy, nhng
jQuery li l th vin java Script hon ton min ph cho mi ngi s dng. Tt
nhin n c bo v bi lut GNU Public License v MIT License, nhng bn c
yn tm rng bn c th s dng n trong hu ht cc trng hp k c thng mi
ln c nhn.
1.3 To trang web u tin vi s h tr ca jQuery
Bi v jQuery l mt th vin Java Script do vy s dng n bn phi chn
n vo trang web th mi c th s dng c. C hai cch chn jQuery vo mt
trang web.
1.3.1 T host jQuery
Vo trang ch ca jQuery v download phin bn mi nht. Thng th c 02
phin bn ca jQuery cho bn download. Phin bn cha nn dnh cho nhng ngi
pht trin v ang hc nh bn. Cn phin bn nn kia dnh cho phn s dng trc
tip trn trang v n c dung lng nh hn rt nhiu so vi phin bn cha nn. Bn
khng cn phi ci t jQuery, bn ch cn t ng link ti th vin l c.
Bt c khi no bn cn s dng jQuery, bn ch cn gi n trong ti liu HTML n
ni lu tr n trn host ca bn.

7
n tt nghip
1.3.2 Dng phin bn c sn trn server ca Google

Ngoi cch trn, bn cng c th s dng phin bn nn ca jQuery c sn
trn server ca Google. S dng cch ny c hai iu li l: 1- tit kim bng thng
cho trang web ca bn. 2- jQuery s c load nhanh hn nu my ca ngi dng
cache jQuery.
Tuy nhin trong phn sp ti chng ta s s dng phin bn c sn trn server
ca Google m khng cn phi download v my. C php chn jQuery s dng
file c sn trn server ca Google nh sau:
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"ty
pe="text/javascript"></script>
1.3.3 Chun b ti liu HTML
Trong hu ht cc v d c s dng trong lot bi ny th c 3 thnh phn
c s dng nhiu nht chnh l ti liu HTML, Stylesheet CSS v mt ti liu
javaScript thc hin lnh trn . Trong vd u tin chng ta s s dng mt ti
liu HTML n gin vi mt header, sidebar, content v footer. Trong phn content
s c ba on vn bn v mt s class sn c. Tt nhin bn phi s dng CSS
nh dng cho ti liu HTML ny.
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Introduction</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen"
/>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"ty
pe="text/javascript"></script>
<script src=first-jquery.jstype=text/javascript></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 id="logo">jQuery Introduction</h1>
</div>
<div id="mainContent">
<div id="sidebar">
<ul id="nav">
<li><a href="#">Home Page</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Forum</a></li>
<li><a href="ebook.pdf">Ebooks</a></li>

8
n tt nghip
<li><a
href="http://www.jquery.com">Tutorials</a></li>
<li><a href="#">Photoshop</a></li>
<li><a
href="mailto:email@yahoo.com">Email</a></li>
</ul>
</div>
<div id="primary">
<h3>Lorem ipsum dolor sit amet</h3>
<p
class="text">som
e text here
</p>
<div>
<p>some text here</p>
</div>
<p
class="text">some
text here
</p>
</div>
</div>
<div id="footer">
<p>©2010vanthanhloc@gmail.com</p>
</div>
</div><!-end#wrapper-->
</body>
</html>
on code trn bn d dng nhn thy rng th vin jQuery c t di
Stylesheet. y l mt im rt quan trng m bn cn lu l th t ca cc file khi
gi. Ban u phi l CSS load trc, khi trang web load xong phn CSS th chng
ta mi thm vo phn th vin jQuery cui cng mi l code jQuery chng ta t vit
ra. Nu khng khi code jQuery ca bn s khng lm vic ng nh mong i nu
th vin jQuery cha c load.
1.3.4 Bt u code jQuery
By gi bn m trnh son tho code ln v to mt file tn l first-jquery.js v
file ny c chng ta chn vo trong dng code:

9
n tt nghip
<script src=first-jquery.js
type=text/javascript></script>
Gvofilevato3dngcoden
hsau:
$(document).ready(
function() {
$('.text').addClass('i
mportant');
});
Thao tc c bn nht ca
jQuery l chn mt phn no
ca ti liu HTML. Bn tin hnh
n bng cch s dng hm $().
Thng th nm gia du ngoc ()
l mt chui di dng tham s, n
c th ln hng CSS Selectors. Trong v d ny chng ta mun tm tt c nhng
thnh phn no c class = text, cp hp ging nh khi bn vit code CSS vy.
Hm $() chnh l mt jQuery Object, y l nn mng cho tt c nhng g
chng ta s hc t by gi. Jquery Object bao gm khng hoc nhiu thnh phn
DOM v cho php chng ta tng tc vi chng bng nhiu cch. Trong trng hp
ny chng ta mun thay i cch hin th ca nhng phn ny trong trang, chng ta
thc hin n bng cch thay i classc a n.
1.3.5 Thm vo mt class mi
Phng php .addClass(), cng ging nh hu ht cc phng php jQuery
khc, c t tn theo chc nng ca n. Khi c gi, n s thm mt class vo
thnh phn chng ta chn. Tham s duy nht ca n l tn class s c thm
vo. Phng php ny v i ngc vi n l .removeClass(), s cho php chng ta
quan st jQuery hot ng nh th no khi chng ta khm ph nhng phng php
la chn c sn ca jQuery. Cn by gi, code jQuery ca chng ta ch n gin
thm mt class = important, v class ny c khai bo trong stylesheet vi cc
thuc tnh nh vin v nn hng nht.
border: 1px solid red; background: pink;
Bn cng nhn thy rng chng ta khng phi chy mt vng lp no thm
class vo cc on vn bn c cng chung class. y chnh l vng lp n ca cc
phng php jQuery, nh trong v d ny l .addClass(), cho nn bn ch phi gi
ng mt ln v ch c vy thay i nhng thnh phn bn mun trong ti liu.
By gi nu bn chy th trang web va to trn trnh duyt bn s thy 2 on vn
c cng class l .text s b t hng v c vin mu .

10
n tt nghip
CHNG II JQUERY UI
JQueryUI l mt frameworks cho vic thit k giao din trang ngoi thng dng
nht hin nay. N n gin nhng tin dng, hot ng n nh, ti nhanh v rt d s
dng cho cc nh pht trin web. N s dng HTML, CSS v Javascript.
JQueryUI l mt th vin Javascript mnh m c xy dng trn u trang
ca th vin jQuery JavaScript. UI l vit tt ca giao din ngi dng. N l mt tp
hp cc plug-in cho jQuery m thm chc nng mi cho th vin li jQuery. Tp hp
cc plug-in trong jQueryUI bao gm tng tc giao din, hiu ng, hnh nh ng ,
widgets, v ch c xy dng trn th vin jQuery JavaScript. JQueryUI c
pht hnh trong thng 9 nm 2007, cng b trong mt bi ng blog ca John Resig
trn jquery.com. Phin bn mi nht 1.10.4 yu cu jQuery 1.6 hoc phin bn sau
ny.
Chng ny s hng dn nhng iu c bn ca jQueryUI Framework m ta
c th s dng to ra cc ng dng phc tp giao din web mt cch d
dng.Hng dn ny c chia thnh cc phn c bn nh cu trc jQueryUI,
jQueryUI CSS, jQueryUI Giao din thnh phn v jQueryUI Plugins. Mi phn c ch
lin quan vi cc v d n gin v hu ch.
2.1 Cc tnh nng
JQueryUI c phn loi thnh bn nhm, tng tc (Interactions), Widget, hiu
ng (Effects), tin ch (Utilities). Cu trc ca th vin l nh th hin trong hnh di
y:
Interactions: y l nhng plugin tng tc nh ko, th, thay i kch thc
v nhiu hn na cung cp cho ngi dng kh nng tng tc vi cc yu
t DOM.
Widget: S dng vt dng trong l jQuery plugin, bn c th to ra cc yu
t giao din ngi dng nh accordian, datepicker,
Effects: Cc c xy dng trn cc hiu ng jQuery ni b. Chng cha mt
b y cc hnh nh ng ty chnh v chuyn tip cho cc phn t DOM.
Utilities: y l mt b cng c m-un th vin jQueryUI s dng ni b.
Li ch ca jQueryUI
API c kt v nht qun
H tr trnh duyt ton din
M ngun m v min ph s dng
Tt liu
C ch Theming mnh m
n nh v bo tr thn thin
2.2 S dng JQueryUI trong ng dng
11
n tt nghip
2.2.1 Ti JQueryUI v t website

Phn ny s a ra hng dn v ti v v ci t cc th vin jQueryUI. Em cng
s a ra cu trc th mc v ni dung ca n. Th vin jQueryUI c th c s
dng theo hai cch trong trang web ca bn:
Ti giao din ngi dng th vin t website chnh thc ca jQueryUI
Ti giao din ngi dng th vin t CDN
Ti v giao din ngi dng th vin t webiste chnh thc: M lin kt
http://jqueryui.com, ta s thy c ba la chn ti th vin JqueryUI (hnh)
Custom Download: Nhn vo nt ny ti v phin bn ty bin ca th vin
JqueryUI
Stable:Click vo nt ny c c phin bn n nh mi nht ca th vin
v jQueryUI
Legacy:Click vo nt ny c c bn pht hnh ln trc ca th vin

jQueryUI.
2.2.2 Ty chnti vi b xy dng ti v (download builder)
S dng Ti v Builder bn c th to ra mt ty chnh xy dng ch bao gm
cc phn ca th vin m bn cn v ti v phin bn ny mi ty chnh ca jQueryUI,
ty thuc vo ch c chn. Bn s thy mn hnh nh di y:

12
n tt nghip

13
n tt nghip
iu ny rt hu ch cho vic s dng sn xut khi bn mun s dng ch cc

plugin hoc tnh nng c th ca th vin jQueryUI. Cu trc th mc ca phin bn
ny c th hin trong hnh sau y:
Cc tp tin nn c nm trong th mc pht trin-b (development-bundle ).

Cc tp tin nn c s dng tt nht trong qu trnh pht trin hoc g li; cc tp tin
nn tit kim bng thng v ci thin hiu sut thc thi.
Bn ti n nh(stable)
Click vo nt ti n nh se dn trc tip vo mt tp tin ZIP c cha cc file
ngun, cc v d, v ti liu cho phin bn mi nht ca th vin jQueryUI. Trch xut
ni dung file ZIP vo mt th mc jQueryUI.
Phin bn ny c tt c cc file bao gm tt c ph thuc, mt b su tp ln
cc v d, v thm ch c n v b kim tra ca th vin. Phin bn ny l hu ch
bt u lm vic vi jQueryUI.
Bn ti legacy
Click vo nt Legacy, dn trc tip vo mt tp tin ZIP pht hnh ln trc ca
th vin jQueryUI. Phin bn ny cng c cha tt c cc file bao gm tt c ph
thuc, mt b su tp ln cc v d, v thm ch c n v b kim tra ca th vin.
Phin bn ny cng rt hu ch bt u nghin cu v s dng jQueryUI.
2.2.3 Ti v t th vin CDN
Mt CDN hoc ni dung Delivery Network l mt mng li cc my ch c
thit k phc v cc tp tin cho ngi dng. Nu bn s dng mt lin kt CDN
trong trang web ca bn, n di chuyn trch nhim lu tr cc tp tin t cc my ch
ca ring bn chocc my bn ngoi. iu ny cng cung cp mt li th m nu
khch truy cp vo trang web ca bn ti v mt bn sao ca jQueryUI trn cng
CDN, n s khng phi ti li.
JQuery Foundation, Google, v Microsoft u cung cp CDN my ch li
jQuery cng nh jQuery UI
14
n tt nghip
Bi v mt CDN khng yu cu bn lu tr phin bn ca ring bn ca jQuery

v jQuery UI, n l hon ho cho trnh din (demo) v th nghim.
V d
By gi chng ta hy vit mt v d n gin s dng jQueryUI. Chng ta hy
to ra mt tp tin HTML, sao chp ni dung sau vo th head:
<linkhref="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jqueryui.css"rel="stylesheet">
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Chi tit ca m trn l:
Dng u tin, cho bit thm ch jQuery UI thng qua CSS. CSS ny
s lm phong cch (style) cho giao din ngi dng.
Dng th hai, thm cc th vin jQuery, nh jQuery UI c xy dng
trn u trang ca th vin jQuery.
Dng th ba, thm cc th vin jQuery UI. iu ny cho php s dng
jQuery UI trong trang ca bn.
By gi chng ta hy thm mt s ni dung vo th <head>:
<scripttype="text/javascript">
$(function(){
$('#dialogMsg').dialog();
});
</script>
Trong th <body>thm:
<body>
<formid="form1"runat="server">
<divid="dialogMsg"title="First JqueryUI Example">
Xin cho, y l v d u tin v jquery UI.
</div>
</form>
</body>
Lu file vi JUI-1.html
15
n tt nghip
M trang web ra v chng ta s nhn thy mt trang web trng v gia trang
c mt hp thoi nh hnh sau:
2.3 S dng JqueryUI

Giao din ngm nh cho website s dng JqueryUI c cc thnh phn nh hnh
sau:

16
n tt nghip

17
n tt nghip
Ngi pht trin web c th s dng cc thnh phn mt cch ph hp ph

thuc vo mc ch v yu cu thit k. Phn di y em s gii thiu mt s thnh
phn c bn v cch s dng
2.3.1 T ng in mu (autocomplet)
JqueryUI cho php kt hp gia jquery vi cc css giao din to ra cc ng
dng web hiu qu. T ng in mu cho php ngi dng nhp liu vo nhp, h
thng s t ng tm cc t ph hp (c ly theo mu hoc trong CSDL) h tr
ngi nhp. Do c nhiu kiu t ng in mu, di y l mt v d n gin: d
liu c ly t CSDL
M ngun nh sau:
<script>$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp", "BASIC",
"C", "C++",
"Clojure",
"COBOL", "ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Java",
"JavaScript", "Lisp",
"Perl", "PHP",
"Python",
"Scala",
"Scheme"
"Haskell",
"Ruby",
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<div class="demo-description">

18
n tt nghip
<p>The Autocomplete widgets provides suggestions while you type into the field.
Here the suggestions are tags for programming languages, give "ja" (for Java or
JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the
source-option.</p>
</div>
</body>
2.3.2 Hiu ng
Hiu ng cho php n, hin, chuyn ng cc thnh phn web, di y l mt v d
v cch s dng
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };

19
n tt nghip
} else if ( selectedEffect === "transfer" ) {

options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class="toggler">

20
n tt nghip
<div id="effect" class="ui-widget-content ui-corner-all">

<h3 class="ui-widget-header ui-corner-all">Effect</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem
metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fade">Fade</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
<option value="transfer">Transfer</option>
</select>
21
n tt nghip
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

<p>Click the button above to show the effect.</p>
</div>
</body>
2.3.3 V tr
K thut ny cho php ty chnh v tr cc i tng web.Di y l m ngun v d.
Ngi dng c th copy on m v cho chy th kim chng.
<style>
#parent {
width: 60%;
height: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
}
.positionable {
position: absolute;
display: block;
right: 0;
bottom: 0;
background-color: #bcd5e6;
text-align: center;
22
n tt nghip
}
#positionable1 {
width: 75px;
height: 75px;
}
#positionable2 {
width: 120px;
height: 40px;
}
select, input {
margin-left: 15px;
}
</style>
<script>
$(function() {
function position() {
$( ".positionable" ).position({
of: $( "#parent" ),
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
});
}
$( ".positionable" ).css( "opacity", 0.5 );

23
n tt nghip
$( "select, input" ).bind( "click keyup change", position );

$( "#parent" ).draggable({
drag: position
});
position();
});
</script>
</head>
<body>
<div id="parent">
<p>
This is the position parent element.
</p>
</div>
<div class="positionable" id="positionable1">
<p>
to position
</p>
</div>
<div class="positionable" id="positionable2">
<p>
to position 2
</p>
</div>

24
n tt nghip
<div style="padding: 20px; margin-top: 75px;">

position...
<div style="padding-bottom: 20px;">
<b>my:</b>
<select id="my_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="my_vertical">
<option value="top">top</option>
<option value="bottom">bottom</option>
</select>
</div>
<b>at:</b>
<select id="at_horizontal">
<option value="left">left</option>
<option value="right">right</option>
</select>
<select id="at_vertical">
<option value="top">top</option>

25
n tt nghip
<option value="bottom">bottom</option>
</select>
</div>
<b>collision:</b>
<select id="collision_horizontal">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option>
</select>
<select id="collision_vertical">
<option value="flip">flip</option>
<option value="fit">fit</option>
<option value="flipfit">flipfit</option>
<option value="none">none</option>
</select>
</div>
</div>
<p>Use the form controls to configure the positioning, or drag the positioned element
to modify its offset.
<br>Drag around the parent element to see collision detection in action.</p>
</div>
26
n tt nghip
</body>
2.4 Thay i kch thc i tng
Vic thay i ty chnh kch thc i tng tr ln n gin hn bao gi ht. Hy
xem v d sau.
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<p>Enable any DOM element to be resizable. With the cursor grab the right or
bottom border and drag to the desired width or height.</p>
</div>
</body>
</html>
2.5 Tooltip
Tooltips c th gn vo bt c phn t no.Khi bn di chut qua cc phn t, cc thuc
tnh tiu c hin th trong mt hp nh bn cnh cc phn t , ging nh mt
hng dn tr gip nh.
Tooltips cng rt hu ch cho vic vit cc hng dn cc thnh phn trong ng dng,
chng thng c dng hin th mt s thng tin b sung trong bi cnh ca tng
lnh vc.
<script>
$(function() {

27
n tt nghip
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any
element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the
element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder
application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information
in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age
only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
</div>
28
n tt nghip
</body>
</html>
2.6 widget
Demo ny cho thy mt widget ty chnh n gin c xy dng bng cch s dng
th vin Widget (jquery.ui.widget.js).
Ba hp c khi to trong cch khc nhau.Nhp thay i mu nn ca chng.Xem
m ngun xem cch n hot ng, n rt nhiu bnh lun hay gip ngi dng c
th s dng c cho ng dng ring ca mnh.
<style>
.custom-colorize {
font-size: 20px;
position: relative;
width: 75px;
height: 75px;
}
.custom-colorize-changer {
font-size: 10px;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
$(function() {
// the widget definition, where "custom" is the namespace,
// "colorize" the widget name
$.widget( "custom.colorize", {
// default options
options: {
red: 255,
green: 0,
blue: 0,
// callbacks
change: null,
random: null
29
n tt nghip
},
// the constructor
_create: function() {
this.element
// add a class for theming
.addClass( "custom-colorize" )
// prevent double click to select text
.disableSelection();
this.changer = $( "<button>", {
text: "change",
"class": "custom-colorize-changer"
})
.appendTo( this.element )
.button();
// bind click events on the changer button to the random method
this._on( this.changer, {
// _on won't call random when widget is disabled
click: "random"
});
this._refresh();
},
// called when created, and later when changing options
_refresh: function() {
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
this.options.green + "," +
this.options.blue + ")"
);
// trigger a callback/event
this._trigger( "change" );
},
// a public method to change the color to a random value
// can be called directly via .colorize( "random" )
random: function( event ) {
var colors = {
red: Math.floor( Math.random() * 256 ),
green: Math.floor( Math.random() * 256 ),
30
n tt nghip
blue: Math.floor( Math.random() * 256 )

};
// trigger an event, check if it's canceled
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},
// events bound via _on are removed automatically
// revert other modifications here
_destroy: function() {
// remove generated elements
this.changer.remove();
this.element
.removeClass( "custom-colorize" )
.enableSelection()
.css( "background-color", "transparent" );
},
// _setOptions is called with a hash of all options that are changing
// always refresh when changing options
_setOptions: function() {
// _super and _superApply handle keeping the right this-context
this._superApply( arguments );
this._refresh();
},
// _setOption is called for each individual option that is changing
_setOption: function( key, value ) {
// prevent invalid color values
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
return;
}
this._super( key, value );
}
});
// initialize with default options
$( "#my-widget1" ).colorize();
// initialize with two customized options
$( "#my-widget2" ).colorize({
31
n tt nghip
red: 60,
blue: 60
});
// initialize with custom green value
// and a random callback to allow only colors with enough green
$( "#my-widget3" ).colorize( {
green: 128,
random: function( event, ui ) {
return ui.green > 128;
}
});
// click to toggle enabled/disabled
$( "#disable" ).click(function() {
// use the custom selector created for each widget to find all instances
// all instances are toggled together, so we can check the state from the first
if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
$( ":custom-colorize" ).colorize( "enable" );
} else {
$( ":custom-colorize" ).colorize( "disable" );
}
});
// click to set options after initialization
$( "#black" ).click( function() {
$( ":custom-colorize" ).colorize( "option", {
red: 0,
green: 0,
blue: 0
});
});
});
</script>
</head>
<body>
<div>
<div id="my-widget1">color me</div>
<button id="disable">Toggle disabled option</button>
32
n tt nghip
<button id="black">Go black</button>

</div>
<p>This demo shows a simple custom widget built using the widget factory
(jquery.ui.widget.js).</p>
<p>The three boxes are initialized in different ways. Clicking them changes their
background color. View source to see how it works, its heavily commented</p>
</div>
</body>
2.7 Kt lun
JQuery UI c s dng rng ri trong cc ng dng web, n cho ngi dng
mt th vin cc thnh phn s dng, cc hiu ng, tin ch, widget da trn jquery
cho php linh hot trong thit k ng dng. Tuy nhin, n cn mt s hn ch trong
vic thit k cc thnh phn ng dng. b sung khim khuyt ny, cc nh pht
trin thng s dng mt Framework cho CSS l bootstrap vi a dng cc mu.
Chng sau y s gii thiu qua v CSS Framework ny.

33
n tt nghip
CHNG II - BOOTSTRAP
Chng ny s gii thiu tng quan v Bootstrap framework, cch ti v v s
dng, cc mu c bn v mt s v d c th.
3.1 Ti v
C mt s cch d dng v nhanh chng bt u vic s dng Bootstrap, mi cch
yu cu mt mc k nng khc nhau v cch s dng.C ba ty chn ti v,
ngi dng c th xem nhng g ph hp vi nhu cu c th ca mnh m ti v bn
ph hp. Phin bn hin ti l 3.1.1
Bootstrap CDN
Thay v download v dng, bootstrap cng cho php s dng trc tip trn host CDN
bng khai bo sau sau th <head>:

<linkrel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.mi
n.css">

<linkrel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstraptheme.min.css">

<scriptsrc="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Ch rng tt c JavaScript plugins yu cu jQuery c include

34
n tt nghip
3.2 Cu trc ca m ngun Bootstrap

Khi ti v, ta gii nn ra v c th mc bootstrap c cu trc nh hnh di
y:
y l hnh thc c bn nht ca Bootstrap: cc tp tin bin dch sn cho vic

s dng nhanh chng trong gn nh bt k d n web no. Chng cung cp cc file
CSS v JS c bin dch (bootstrap. *), cng nh CSS v JS nh gn
(bootstrap.min.*). Cc phng ch Glyphicons c a vo cho cc mc ch c
bit lin quan ti cc phn hin th k hiu, c bit l cc k t c bit.
M ngun Bootstrap
M ngun Bootstrap ti v bao gm cc bin dch sn CSS, JavaScript, v font
ch, cng vi Less, JavaScript, v ti liu. C th
hn, n bao gm nhng th mc sau y v nhiu
hn na:
less/, js/, v fonts/ l m ngun cho CSS,
JS v icon fonts (tng ng). Th mc dist/ bao
gm tt c cc th mc trn nhng cha bin
dch, th mc docs/ cha ti liu hng dn s
dng v cc v d lin quan.

35
n tt nghip
3.3 Giao din

Chng ta bt u vi mu HTML c bn ny, hoc sa i nhng v d c sn
trong m ngun.Em hy vng bn s ty chnh cc mu v v d ca em, thch nghi cho
ph hp vi nhu cu ca bn. Sao chp m HTML bn di bt u lm vic vi
mt ti liu Bootstrap ti thiu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mu Bootstrap 101</title>

<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Xin cho, v d u tin v bootstrap!</h1>

36
n tt nghip
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
3.3.1 Giao din ban u


<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<link href="starter-template.css" rel="stylesheet">




</head>
<body>

37
n tt nghip
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" datatarget=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All
38
n tt nghip
you get is this text and a mostly barebones HTML document.</p>

</div>
</div>


<script
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
3.3.2 Jumbotron
Xy dng xung quanh jumbotron vi mt thanh iu hng v mt s ct li
c bn. M ngun v d:
<title>Jumbotron Template for Bootstrap</title>
<link href="jumbotron.css" rel="stylesheet">
queries -->

</head>
<body>
</button>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
40
n tt nghip
<button type="submit" class="btn btn-success">Sign in</button>

</form>
</div>
</div>
</div>

<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a
large callout called a jumbotron and three supporting pieces of content. Use it as a
starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
</div>
</div>

<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details
»</a></p>
</div>
41
n tt nghip
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
»</a></p>
</div>
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus.</p>
»</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div>
================================================== -->
<script
42
n tt nghip
</body>
</html>
Hnh nh giao din nh sau:
3.2.3 Carousel
Ty chnh thanh iu hng v bng chuyn, sau thm mt s thnh phn mi.
M ngun:
<title>Carousel Template for Bootstrap</title>
queries -->

43
n tt nghip

<link href="carousel.css" rel="stylesheet">
</head>

<body>
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
</button>

44
n tt nghip
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

45
n tt nghip
</div>
</div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First
slide">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and
"previous" Glyphicon buttons on the left and right might not load/display properly
due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
46
n tt nghip
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second
slide">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third
slide">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse
gallery</a></p>
</div>
</div>
47
n tt nghip
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</div>


<div class="container marketing">

<div class="row">
<div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140" alt="Generic placeholder
image">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam
id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
image">
48
n tt nghip
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
image">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus.</p>
</div>
</div>

<hr class="featurette-divider">
<div class="row featurette">
<h2 class="featurette-heading">First featurette heading. <span class="textmuted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id
ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque
nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

49
n tt nghip
</div>
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto"
alt="Generic placeholder image">
</div>
</div>
</div>
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="textmuted">See for yourself.</span></h2>
</div>
</div>
<h2 class="featurette-heading">And lastly, this one. <span class="textmuted">Checkmate.</span></h2>
50
n tt nghip

</div>
</div>
</div>


<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2014 Company, Inc. · <a href="#">Privacy</a>· <a
href="#">Terms</a></p>
</footer>
</div>
================================================== -->
<script

51
n tt nghip
<script src="../../assets/js/docs.min.js"></script>
</body>
</html>
Hnh nh giao din (trang bn)

52
n tt nghip

53
n tt nghip
3.3.3 Bng iu khin

Cu trc c bn cho mt bng iu khin qun tr vi bn c nh v cc thanh
iu hng. M ngun v d nh sau:
<title>Dashboard Template for Bootstrap</title>
<link href="dashboard.css" rel="stylesheet">
queries -->

</head>
<body>
<div class="container-fluid">

54
n tt nghip

</button>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
55
n tt nghip
<ul class="nav nav-sidebar">

<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
56
n tt nghip
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic

placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic
<h4>Label</h4>
</div>
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic
<h4>Label</h4>
</div>
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic
<h4>Label</h4>
</div>
</div>

57
n tt nghip
<h2 class="sub-header">Section title</h2>

<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
58
n tt nghip
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
59
n tt nghip
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
60
n tt nghip
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
61
n tt nghip
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
62
n tt nghip
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
================================================== -->
<script
<script src="../../assets/js/docs.min.js"></script>

63
n tt nghip
</body>
</html>
Hnh nh giao din:
3.3.4 Mt s giao din khc

Ngoi mt s giao din nh trn, Bootstrap cn cho php to nhiu giao din khc
n gin nhanh chng v tin dng. Mt s giao din nh: Sign-in page, Justified
nav, Sticky footer, Offcanvas, Cover, Grids. Ngi dng c th xem trn cc
hng dn trc tip trn website ca Bootstraps.

64
n tt nghip
CHNG IV - JQUERY UI BOOTSTRAP V NG DNG

Chng ny em s gii thiu cch s dng jquery ui bootstrap trong vic to
giao din thng qua cc hng dn cho vic to cc thnh phn c bn trong mt
trang web nh nt lnh, menu, hiu ng tooltip,
4.1 Ti v v s dng
4.1.1 Ti v
Vo a ch web http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/, ta
thy 2 ch download l bn stable v bn lastest. Ty thuc vo mc ch m ti
bn ph hp (thng thng l bn stable).
Sau khi ti v, chng ta gii nn ra v c th mc jquery-ui-bootstrapmasterbs3. Bn trong c cc th mc con: assets, css, less, theme, v mt s th mc
v tp tin khc. s dng, chng ta ch cn quan tm ti th mc css ni cha cc
file nh ngha cc style ca cc thnh phn web.
4.1.2 S dng
s dng, sau khi ti v file ngun, gii nn v tm ti th mc css/customtheme. Trong c th mc images v cc file: jquery.ui.1.10.3.ie.css, jquery-ui1.10.3.custom.css v jquery-ui-1.10.3.theme.css. Copy th mc css ny vo th mc
cha cc nh ngha style ca ng dng (thng thng cng l css). Cui cng, trong
mi ng dng th thm cc file css ny vo u file (th <head>) ca mi trang web.
Trong phn di y, em s gii thiu mt s thnh phn quan trng ca
jquery-ui-bootstrap framework.
4.2 Cc thnh phn c bn
4.2.1 Button
Trong jqueryUI bootstrap, cc button c khai bo n gin vi cc thuc tnh
thm vo to ra c nhiu kiu button khc nhau:
1.
// Button

65
n tt nghip
2.
3.
4.
$('button').button();
// Anchors, Submit
$('.button').button();
Kch thc ca cc button cng c iu chnh d dng:
Bn cnh ta c th cho thm cc icon vo cc button lm sinh ng cc button

ln:
Ngoi ra cn rt nhiu kiu khc nh: Block level button, Thumbnails with buttons,
Button set, Simple toolbar, Split Button
Cc m ngun v button c tng hp trong on m di y, ta c th chn v s
dng button no cho hp l ty thuc ng dng trin khai v yu cu khch hng:
<div class="page-header">
<h1>Nt lnh</h1>
</div>

<h3>Mu sc nt</h3>
<p>
<button>Kiu ngm nh</button>
<button class="ui-button-primary">Kiu chun</button>
<button class="ui-button-success">Kiu thnh cng</button>
<button class="ui-button-info">Kiu thng tin</button>
<button class="ui-button-warning">Kiu cnh bo</button>
<button class="ui-button-danger">Kiu nguy him</button>
<button class="ui-button-inverse">Kiu o chiu</button>
</p>
66
n tt nghip
<h3>Kch thc nt</h3>

<p>
<button class="ui-button-primary ui-btn-lg">Kiu ln</button>
<button class="ui-button ui-btn-lg">Kiu ln</button>
</p>
<p>
<button class="ui-button-primary">Kiu ngm nh</button>
<button class="ui-button">Kiu ngm nh</button>
</p>
<p>
<button class="ui-button-primary ui-btn-sm">Kiu nh</button>
<button class="ui-button ui-btn-sm">Kiu nh</button>
</p>
<p>
<button class="ui-button-primary ui-btn-xs">Kiu rt nh</button>
<button class="ui-button ui-btn-xs">Kiu rt nh</button>
</p>
<h3>Nt lnh c biu tng</h3>
<p><button id="button-with-icon">Nt ch c biu tng</button></p>
<p><button id="button-with-icon2" class="ui-button-warning">Nt ch c biu
tng</button></p>
<p><button id="button-with-icon3" class="ui-button-danger">Nt ch c biu
tng</button></p>
4.2.2 Dialog
JqueryUI bootstrap d dng cho php ngi dng gi cc hp thoi trn trang web
ca mnh. C ba kiu m hp thoi c s dng y l: Open Dialog, Open Modal
Dialog, Open Button Dialog tng t nh cc kiu hp thoi quen bit khc.

67
n tt nghip
M ngun s dng:
<section id="block-documentation">
<h1>Hp thoi</h1>
</div>
<p class="dialog-button">
<a href="#" id="btn-dialog-simple" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>Hp thoi n gin
</a>

<a href="#" id="btn-dialog-message" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>
Hp thoi modal
</a>

<a href="#" id="btn-dialog-button" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>Hp thoi nhiu nt lnh
</a>
</p>

<div id="modal-simple" title="Hp thoi n gin">
<p>Hp thoi n gin. n tt nghip CNTT nm 2014. JqueryUI Bootstrap
Dialog</p>
</div>

<div id="modal-message" title="Hp thoi Modal">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px
0;"></span>
Hp thoi Modal. n tt nghip CNTT nm 2014. JqueryUI Bootstrap Dialog.
</p>
<p>
Gio vin Hng dn: Vn Chiu - Khoa CNTT HPU
</p>
</div>


<div id="modal-button" title="Hp thoi nhiu nt lnh">
<p>
0;"></span>
Hp thoi nhiu nt lnh. n tt nghip CNTT nm 2014. JqueryUI Bootstrap
Dialog.
</p>
<p>
68
n tt nghip
</p>
</div>
</section>
4.2.3 Tabs
Thit k cc tab l mt phn khng th thiu trong hu ht cc ng dng web,
JqueryUI Bootstrap cho ta mt cch n gin lm iu ny.
M ngun:
<h1>Tabs</h1>
</div>
<h2>Tab n gin</h2>

<div id="tabs">
<ul>
<li><a href="#tabs-a">Tab 1</a></li>
<li><a href="#tabs-b">Tab 2</a></li>
<li><a href="#tabs-c">Tab 3</a></li>
</ul>
<div id="tabs-a">
<p>
0;"></span>
Dialog.
</p>
<p>
</p>
</div>
<div id="tabs-b">
<p>
69
n tt nghip
0;"></span>
Dialog.
</p>
<p>
</p>
</div>
<div id="tabs-c">
<p>
0;"></span>
Dialog.
</p>
<p>
</p>
</div>
</div>
<h2>Thm bt tab</h2>

<div id="dialog2" title="Hp thoi thm Tab">
<form>
<fieldset class="ui-helper-reset">
<p>
<label for="tab_title">Tiu </label><br />
<input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content
ui-corner-all">
</p>
<p>
<label for="tab_content">Ni dung</label><br />
<textarea name="tab_content" id="tab_content" class="ui-widget-content ui-cornerall" cols="35"></textarea>
</p>
</fieldset>
</form>
</div>
<p>
<button id="add_tab" class="ui-button-primary">Thm Tab</button>
</p>
<div id="tabs2">
<ul>
70
n tt nghip
<li><a href="#tabs-1">Tab 1</a></li>

</ul>
<div id="tabs-1">
<p>
0;"></span>
Thm tab. n tt nghip CNTT nm 2014. JqueryUI Bootstrap Tab.
</p>
<p>
</p>
</div>
</div>
4.2.4 Highlight, Error, Datepicker
Cc thng bo, hp thoi ngy thng c s dng n gin, p mt v rt d dng:
M:
<h1>nh du / Li</h1>
</div>

<h2>nh du</h2>

71
n tt nghip
<div class="ui-state-highlight ui-corner-all">

<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Cho!</strong> y l kiu nh du.</p>
</div>
</div>
<h2>Li</h2>
<div class="ui-state-error ui-corner-all">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:
.3em;"></span>
<strong>Cho!</strong> y l kiu bo li.</p>
</div>
</div>
<h2>Ngm nh</h2>
<div class="ui-state-default ui-corner-all">
<p><span class="ui-icon ui-icon-mail-closed" style="float: left; margin-right:
.3em;"></span>
<strong>Cho!</strong> y l kiu thng bo ngm nh.</p>
</div>
</div>
</section>
<section id="calendar">
<h1>Hp thoi lch</h1>
</div>
<div id="datepicker"></div>
<pre class="prettyprint linenums">
</section>
72
n tt nghip
4.2.5 Menu
JqueryUI Bootstrap cho php d dng to cc menu vi nhiu cp. V d
M:
<h1>Menu</h1>
</div>
<div class="clearfix">
<ul id="menu">
<li><a href="#">Menu 1</a></li>
<li>
<a href="#">Menu 5</a>
<ul>
<li><a href="#">Menu 5.1</a></li>
</ul>
</li>
<li>
73
n tt nghip
<a href="#">Menu 7</a>

<ul>
<li>
<a href="#">Menu 7.1</a>
<ul>
<li><a href="#">Menu 7.1.1</a></li>
</ul>
</li>
<li>
<a href="?Delphi">Menu 7.2</a>
<ul>
</ul>
</li>
<li><a href="#">Kt thc</a></li>
</ul>
</li>
</ul>
</div>
Ngoi ra cn rt nhiu cc thnh phn c h tr thit k m trong khun kh n
khng th gii thiu ht nh: Overlay and Shadow Classes, cc Slider, Autocomplete,
Spinner, Icons, Tooltip, Progress bar
4.3 V d th nghim 1 s thnh phn c bn ca jqueryUI bootstrap Framework
Trong phn ny, em xy dng mt v d (l mt trang html) c mt s cc
thnh phn c bn ca ca jqueryUI bootstrap, qua em mun ngi c c th vn
dng a cc giao din ca cc thnh phn web vo cc ng dng m khng cn
i hi nhiu v xy dng css.
74
n tt nghip
Di y l mt s hnh nh giao din:

Giao din banner chng trnh s dng css ca bootstrap.

75
n tt nghip
Giao din phn chy th nghim cc thnh phn trn 1 trang

76
n tt nghip
Giao din phn chn trang

77
n tt nghip
KT LUN
n tm hiu c mt s k thut trong vic thit k cc giao din ca
ng dng web thng qua cc framework min ph v rt thng dng l Jquery,
JqueryUI, Bootstrap. Tuy nhin, khi kt hp gia Bootstrap v Jquery to ra nhng
b cc web sinh ng v p th xy ra mt s hin tng xung t, dn ti cc hiu
ng v phong cch khng nh mun. gii quyt iu ny, mt phng php
c a ra l xy dng li mt s thnh phn trong css v js ca bootstrap khng
b xung t vi jquery v l JqueryUI Bootstrap framework. n gii thiu
c mt s thnh phn trong ny v a ra v d s dng nhm mc ch h tr
ngi mi bt tay vo thit k c mt ci nhn n gin nht v c th ng dng nhanh
nht cc tin ch m JqueryUI Bootstrap framework mang li gip vic xy dng
chng trnh nhanh hn, d dng hn.

78
n tt nghip
TI LIU THAM KHO

[1] http://tailieuhoctap.vn
[2] http://vi-wikipedia.org

79

Jquery - Bootrap

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery - Bootrap

Uploaded by

Copyright:

Available Formats

n tt nghip

Tm hiu v JQsuery UI Bootstrap v ng dng

Tm hiu v JQsuery UI Bootstrap v ng dng

3.3.3 Bng iu khin ............................................................................................... 54

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Cc thnh phn c bn dng iu khin cc ca s trong

Framework ging nh 1 th vin m lnh c xy dng sn

Cc ng dng trn nn tng web.

JQuery chnh l mt th vin kiu mi ca Javascript gip n

jQuery UI l giao din ngi dng chnh thc th vin jQuery.

CSS l vit tt ca cm t "Cascading Style Sheet" , n l mt

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

CHNG I GII THIU V JQUERY

Tm hiu v JQsuery UI Bootstrap v ng dng

1.1.3 Tng tc vi ngi dng

Tm hiu v JQsuery UI Bootstrap v ng dng

thng trnh duyt li c mt kiu ring c trang web. Dn n mt iu lm au

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

1.3.2 Dng phin bn c sn trn server ca Google

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Tm hiu v JQsuery UI Bootstrap v ng dng

2.2.1 Ti JQueryUI v t website

Legacy:Click vo nt ny c c bn pht hnh ln trc ca th vin

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

iu ny rt hu ch cho vic s dng sn xut khi bn mun s dng ch cc

Cc tp tin nn c nm trong th mc pht trin-b (development-bundle ).

Tm hiu v JQsuery UI Bootstrap v ng dng

Bi v mt CDN khng yu cu bn lu tr phin bn ca ring bn ca jQuery

Tm hiu v JQsuery UI Bootstrap v ng dng

2.3 S dng JqueryUI

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Ngi pht trin web c th s dng cc thnh phn mt cch ph hp ph

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

} else if ( selectedEffect === "transfer" ) {

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

<div id="effect" class="ui-widget-content ui-corner-all">

Tm hiu v JQsuery UI Bootstrap v ng dng

<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>

Tm hiu v JQsuery UI Bootstrap v ng dng

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin

Tm hiu v JQsuery UI Bootstrap v ng dng

$( "select, input" ).bind( "click keyup change", position );

Sinh vin: Vn Thnh Lc - Lp CTL601 - Ngnh: Cng ngh thng tin