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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.48 MB, 79 trang )

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

............................................................................................................ 3
Gi i thi u ........................................................................................................................ 4
jQuery ................................ Error! Bookmark not defined.
1.1 Nh ng gì jQuery có th làm..................................................................................... 5
1.1.2 Thay

các thành
trong tài
HTML. ............................................... 5
i giao di n c a m t trang web............................................................... 5
tác v i

i dùng ................................................................................. 6

1.1.4 T o hi u
ng cho nh ng thay i c a tài li u........................................... 6
1.1.5 L y thông tin t server mà không c n t i l i trang web..................................... 6
1.2 T i sao jQuery làm vi c t t ...................................................................................... 6
1.3 T o trang web u tiên v i s h tr c a jQuery ..................................................... 7
host jQuery ................................................................................................... 7
1.3.2 Dùng phiên b có
trên server
Google ................................................. 8
tài
HTML..................................................................................... 8
code jQuery........................................................................................... 9
1.3.5 Thêm vào

class
.................................................................................. 10
- JQuery UI ............................................... Error! Bookmark not defined.
.......................................................................................................... 11
2.2 S d ng JqueryUI trong 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
1

án t t nghi p

3.3.3 B

Tìm hi u v JQsuery UI Bootstrap và ng d ng

u khi n ............................................................................................... 54

3.3.4 M t s giao di n khác...................................................................................... 64
C
- JQ
.................................................. 65
4.1 T i v 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 1 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
2

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

Tên
Widget

Framework
web-based
jQuery

jQuery UI

CSS
Designer
Footer

Các thành ph
u khi n các c a s trong
các ph n m m có giao di n c a s
h a
nút, các thanh tên,
các m
, các h
n, các h p thông báo, ...
Framework gi
chúng ta s d ng.

n mã l

c xây d ng s

Các ng d ng trên n n t ng web.
JQuery chính là m

gi n hóa cách vi
web.

n ki u m i c
x lý các s ki n trên trang

jQuery UI là giao di
i dùng chính th
Nó cung c p s
u
ra các ng d ng Internet phong phú.

n jQuery.
tài cho vi c t o

CSS là vi t t t c a c m t "Cascading Style Sheet" , nó là m t
ngôn ng
nh cách trình bày c a các th html trên trang web.
i thi t k .
Chân trang.

c - L p CTL601 - Ngành: Công ngh thông tin
3

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

Gi i thi u

Bootstrap là m t trong nh ng d án ra m t
c s d ng
ng
xuyên làm
cho chi u d án web-based. Tuy nhiên, khi s d
thi t k giao
di
i dùng cho các d án có n y sinh m t s v
sau: Th nh t, chúng ta
không ch mu n s d ng jQuery UI cho s phát tri n các Widget mà còn mu n s
d ng nó cùng v i Bootstrap. Bootstrap có m t thi t k tr c quan tuy t v i cho t t c
m i th t các nút b m t i các tab và cung c p cho chúng ta m t giao di n
tuy t
v i mà chúng ta có th l p l i trên các 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 trong 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 do
t
i là l i c a d án Bootstrap, Bootstrap
c
t
c s d ng v i giao di
i dùng jQuery, tuy nhiên, m t gi
n Jquery UI Bootstrap.
jQuery UI Bootstrap là 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 các widgets
m
m t phiên b n m i (s ch) c
có th
c s d ng cùng v i các 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 sao không có m t cái nhìn t i trang ch c a d án? C
hai vùng gi i thi u và các nút t
d ng Bootstrap làm giao di n trong khi m i
th khác là 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 và các giao di n
t gi i pháp khá h u ích.
D ánnày v n còn khá m i
ta
s d ng m t s thành ph n (các
nút, t p
t ngang, các tab, c a s modal, date-pickers) trong thi t k v i
s t tin t t c chúng làm vi c cùng nhau. M t s tinh ch nh v
c th c hi n
cho nh ng th
l nh v i các bi
ng và các widgetc a bên th ba và s s m
có các phiên b n c i ti n m i.
Framework này ho
ng t t trên các trình duy 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à
các v
liên quan t
t s các ví d r t
n cho vi c th c thi k t h p gi a JqueryUI và Bootstraps css Framework và cu i
cùng là ph n k t lu n.

c - L p CTL601 - Ngành: Công ngh thông tin
4

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

phát

mau
Internet,
dùng ngày càng quan tâm
hình
trang web.
,
trang web
có banner,
dung và ít footer
là

cho là
trang web hoàn
bây
trang web
có banner
dung hay và còn
khác
thì
có
thu hút
Chính vì
web designer
jQuery
ra các
có
cách nhanh chóng và dàng

chú ý
tác

các

là

Java Script

JavaScript.

là
làm quen

jQuery, ta
không
vì jQuery
nào khác
có
functions.
có
tài
jQuery thì
và khó
Tuy nhiên, có
là
jQuery có
trúc
và theo
Cách v code
jQuery
vay
các
mà các web designer
HTML và CSS.
nay
là Designer
không
coder,
có
dàng
jQuery vì
CSS giúp
khi

jQuery.
1.1

gì Jquery có

1.1.1

làm

các thành

trong tài

HTML.

không
Java Script này,
dòng
code
có
tiêu là di
trong
trúc cây (hay còn g i là
DOM = Document Object Model) c a m t tài li u HTML và ch n ra các thành ph n
liên quan. Jquery cho phép b n ch n b t c thành ph n nào 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 là công
là không

trang web.
trang web

nó có

các trình
nhau.
jQuery ra
này, vì
các
có
nó
giúp trang web có
trên
các trình duy
jQuery
có
thay
class
CSS
áp
lên
thành
nào
tài
HTML ngay khi trang web

trình
load thành công. Thay
dung
tài
jQuery không
có
thay
ngoài
trang web, nó
có
thay
dung
chính tài
vài dòng code. Nó có
thêm
dung trên trang, hình
có
thêm vào
sang
hình khác, danh sách có
chí
trúc
trang web
có
này
hoàn
toà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
5

án t t nghi p

1.1.3

Tìm hi u v JQsuery UI Bootstrap và ng d ng

tác

dùng

Cho dù công
dùng có
khi nào nó
thì công
coi
java Script
jQuery, nó cho
cách
tác
khi
dùng
vào
link thì có gì
ra.

nó là không làm cho code
tung lên chính là
Handlers.
Event Handler API
trang web
thích
các trình
này
và ng làm
designer.
1.1.4

cho
tác
gì

ra khi

ng
nó còn cho phép
1.1.5

thông tin

thay

dùng ví
cái hay
các Event
các web

tài

dùng, các web designer
cho
dùng
làm
tác
nào
Jquery cho phép
ngang v.v và
ra các
riêng mình.

server mà không

trang web

chính là công
ngày càng
nên
Script And XML (AJAX), nó giúp
web
ra
tác
và
tính
jQuery
trong quá trình này và cho phép
phát

web có
hoá các tác
java Script. Ngoài
nêu
jQuery còn cho phép
code java Script
cách
là các vòng
và
1.2

không có

Asynchronous Java
trang
trình
trung vào các tính
tính
so

jQuery làm

móng cho
trung vào
tính và

dùng ngày càng quan tâm
Dynamic HTML,
là
ra

java Script Frameworks. Có frame works thì
vài tính
nêu
có cái thì bao
nhét vào
package.
là
các tính
nêu
jQuery

sau:
CSS: Các jQuery Selector
y chang
trúc và cú pháp. Chính vì
jQuery là
ngõ
thêm
tính
cho trang web
mình.
thành
web designer chuyên
là
s có
CSS,
có

CSS Selector
cùng

cho các web designer
vì
tiên
CSS
jQuery.

tránh

vào
Plugin
chính vì
tính sáng
và

Plugin:
dùng
và

phép
và

plugin
Xoá nhoà

khác

thái quá
Cách

tính

,jQuery cho
plugin
khá
jQuery
ra

trình

là

c - L p CTL601 - Ngành: Công ngh thông tin
6

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

trình
có
các web designer là làm
trình
Cho nên
khi
trang web
JQuery giúp
thêm
quá trình này
ra dàng

riêng
nào
ta

trang web.
cho trang web có
làm
cho

khác

làm
trên
code
các trình
trình

và giúp

Luôn làm
Set: Ví
khi chúng ta yêu
jQuery tìm
các
thành
có class là delete và chúng
Chúng ta không
loop qua
thành
Thay vào

set thay vì
thành
có
là chúng ta không
chính vì
code
chúng ta

pháp

là hide ()
này
code
loop

ra
là vòng
mà nó

làm
thi,

tác
ra trên cùng
dòng:
tránh
các tác
gian ,jQuery cho phép
trình
là Chaining cho

các method
nó.
có
là
các tác
hành trên
thành
chính là thành
nó
sàng cho tác
theo
áp
lên nó.
nêu trên
giúp kích
jQuery
bé
trên
20Kb
nén.
cung
cho chúng ta
giúp code trên trang
và
Cho phép

Jquery
còn có
hoàn
jQuery

là
nhiên nó
yên tâm
cá nhân.
1.3

là do cách
và bên
v ngày ngày phát
thêm Plugin và
tính
tâm
jQuery. Cho dù
là
java Script hoàn toàn
phí cho
GNU Public License và MIT License,
có
nó trong
các

trang web

vì jQuery là
nó vào trang web thì
trang web.
1.3.1

nên

tiên
có

jQuery
Java Script do
Có hai cách

nó
i chèn
chèn jQuery vào

host jQuery

Vào trang
jQuery và download phiên
thì có 02
phiên
jQuery cho
download. Phiên
nén dành cho
phát
và
Còn phiên
nén kia dành cho
trên trang vì nó có dung
so
phiên
nén.
không
cài

jQuery,
link
là
khi nào
jQuery,
nó trong tài
HTML
nó trên host

c - L p CTL601 - Ngành: Công ngh thông tin
7

án t t nghi p

1.3.2 Dùng phiên

Tìm hi u v JQsuery UI Bootstrap và ng d ng

có

trên server

Google

Ngoài cách trên,
có
phiên
nén
jQuery có

trên server
Google. S
cách này có hai
là: 1thông
cho trang web
- jQuery
load nhanh
máy
dùng
cache jQuery.
Tuy nhiên trong
chúng ta
phiên
có
trên server
Google mà không n
download
máy. Cú pháp
chèn jQuery
file có
trên server
Google
sau:
<scriptsrc=" />pe="text/javascript"></script>
1.3.3

tài
Trong

javaScript

HTML
có ba
cho tài

HTML
các ví

trong
bài này thì có 3 thành
chính là tài
HTML, Stylesheet CSS và
tài
trên . Trong
tiên chúng ta
tài
header, sidebar, content và footer. Trong
content
và
class
có.
nhiên
CSS
HTML này.

html
PUBLIC
"-//W3C//DTD
XHTML
1.0

Transitional//EN"" /><html xmlns=" xml:lang="en" lang="en">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Introduction</title>
/>
<scriptsrc=" />pe="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">

jQuery Introduction

</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>

c - L p CTL601 - Ngành: Công ngh thông tin
8

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

<li>href="">Tutorials</a></li>
<li><a href="#">Photoshop</a></li>
<li>href="mailto:">Email</a></li>
</ul>
</div>
<div id="primary">

Lorem ipsum dolor sit amet

class="text">som
e text here

<div>

Lorem ipsum dolor sit amet

some text here

</div>

Lorem ipsum dolor sit amet

class="text">some
text here

</div>
</div>
<div id="footer">

</div>
</div><!-end#wrapper-->
</body>
</html>

code trên
dàng
jQuery
Stylesheet.
là
t
quan
mà
ý là
các file khi
Ban
là CSS load
khi trang web load xong
CSS thì chúng
ta
thêm vào
jQuery
cùng
là code jQuery chúng ta
ra.
không khi code jQuery
không làm
mong
jQuery
load.
1.3.4
Bây
file này

code jQuery

trình
code lên và
chúng ta chèn vào trong dòng code:

file tên là first-jquery.js và

c - L p CTL601 - Ngành: Công ngh thông tin
9

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

-

Gõvàofile

3dòngcoden

sau:
$(document).ready(
function() {
$('.text').addClass('i
mportant');
});
Thao tác
jQuery là

nào
tài
HTML.
hành
nó
cách
hàm $().
thì
()
là
tham
nó
có
làn
CSS Selectors. Trong ví
thành
nào có class =
cúp háp

này chúng ta
khi

tìm
code CSS

Hàm $() chính là
jQuery Object,
là
móng cho
gì

chúng ta
bây
Jquery Object bao
không
thành
DOM và cho phép chúng ta
tác
chúng
cách. Trong
này chúng ta
thay
cách
th
này trong trang, chúng ta
nó
cách thay
classc nó.
1.3.5 Thêm vào

class

pháp .addClass(),
các
pháp jQuery
khác,
tên theo
nó. Khi
nó thêm
class vào
thành

chúng ta
Tham
duy
nó là tên class
thêm
vào.
pháp này và
nó là .removeClass(), cho phép chúng ta
quan sát jQuery
nào khi chúng ta khám phá
pháp
có
jQuery. Còn bây
code jQuery
chúng ta
thêm
class =
và class này
khai báo trong stylesheet
các
tính
và
border: 1px solid red; background: pink;
class vào các
pháp jQuery,
và
có
Bây
có cùng class là .text

chúng ta không
vòng
nào thêm
có cùng chung class.
chính là vòng
các
trong ví
này là .addClass(), cho nên
thay
thành
trong tài
trang web
trên trình
2
tô
và có
màu

c - L p CTL601 - Ngành: Công ngh thông tin
10

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

JQUERY UI
JQ

ng

các plugwi
trên jquery.com
này.
s

ng d n nh
n c a jQueryUI Framework mà ta
có th s d
t o ra các ng d ng ph c t p giao di n web m t cách d
dàng
ng d
c chia thành các ph
u trúc jQueryUI,
jQueryUI CSS, jQueryUI Giao di n thành ph n và jQueryUI Plugins. M i ph n có ch
liên quan v i các ví d
n và h u ích.
2.1
Interactions)

Interactions:

u

Widget:
Effects:
Utilities:

-

M

JQ
c - L p CTL601 - Ngành: Công ngh thông tin
11

án t t nghi p

2.2.1

Tìm hi u v JQsuery UI Bootstrap và ng d ng

JQueryUI
Em

bsi

jQueryUI

Custom Download:
JqueryUI
Stable:
và jQueryUI

Legacy:
jQueryUI.
2.2.2 Tùy ch nt

c - L p CTL601 - Ngành: Công ngh thông tin

12

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

c - L p CTL601 - Ngành: Công ngh thông tin
13

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

các
plugin

-bó (development-bundle ).
.

Click vào nút
các

e

file

các
.

.
2.2.3

chocác máy bên ngoài.

này
trên cùng

CDN, nó s

.
CDN

lõi

c - L p CTL601 - Ngành: Công ngh thông tin
14

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

(demo)

<linkhref=" /><scriptsrc=" /><scriptsrc=" />Chi t
jQuery UI thông qua CSS. CSS này
phong cách (style)
D

D
<head>:
<scripttype="text/javascript">
$(function(){
$('#dialogMsg').dialog();
});
</script>
<body>thêm:
<body>
<formid="form1"runat="server">
<divid="dialogMsg"title="First JqueryUI Example">
.
</div>
</form>
</body>
JUI-1.html
c - L p CTL601 - Ngành: Công ngh thông tin
15

án t t nghi p

Giao di n ng

Tìm hi u v JQsuery UI Bootstrap và ng d ng

nh cho website s d ng JqueryUI có các thành ph

sau:

c - L p CTL601 - Ngành: Công ngh thông tin
16

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

c - L p CTL601 - Ngành: Công ngh thông tin
17

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

i phát tri n web có th s d ng các thành ph n m t cách phù h p ph
thu c vào m
u thi t k . Ph
em s gi i thi u m t s thành
ph
n và cách s d ng
2.3.1 T

n m u (autocomplet)

JqueryUI cho phép k t h p gi a jquery v i các css giao di
t o ra các ng
d ng web hi u qu . T
nm

i dùng nh p li u vào ô nh p, h
th ng s t
ng tìm các t phù h
c l y theo m u ho
h tr
i nh
u ki u t
nm
t ví d
n: d
li
c l y t CSDL

Mã ngu
<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">

c - L p CTL601 - Ngành: Công ngh thông tin
18

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

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.

The datasource is a simple JavaScript array, provided to the widget using the
source-option.

</div>
</body>
2.3.2 Hi u ng
Hi u ng cho phép n, hi n, chuy
và cách s d ng

ng các thành ph n web

t ví d

.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

return false;
});
});
</script>
</head>
<body>
<div class="toggler">

c - L p CTL601 - Ngành: Công ngh thông tin
20

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

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

Effect

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem
metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

</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>
c - L p CTL601 - Ngành: Công ngh thông tin
21

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

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

Click the button above to show the effect.

</div>
</body>
2.3.3 V trí
K thu t này cho phép tùy ch nh v
i dùng có th
n mã và cho ch y th

n ví d .

ki m ch ng.

<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;

c - L p CTL601 - Ngành: Công ngh thông tin
22

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

}
#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 );

c - L p CTL601 - Ngành: Công ngh thông tin
23

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

$( "select, input" ).bind( "click keyup change", position );
$( "#parent" ).draggable({
drag: position
});
position();
});
</script>
</head>
<body>
<div id="parent">

This is the position parent element.

</div>
<div class="positionable" id="positionable1">

to position

</div>
<div class="positionable" id="positionable2">

to position 2

</div>

c - L p CTL601 - Ngành: Công ngh thông tin
24

án t t nghi p

Tìm hi u v JQsuery UI Bootstrap và ng d ng

<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="center">center</option>
<option value="bottom">bottom</option>
</select>
</div>
<div style="padding-bottom: 20px;">
<b>at:</b>
<select id="at_horizontal">
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
<select id="at_vertical">
<option value="top">top</option>

c - L p CTL601 - Ngành: Công ngh thông tin