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

3

Gi i thi u 4

- jQuery Error! Bookmark not defined. 1.1 Nh ng gì jQuery có th làm 5

các thành trong tài HTML 5

1.1.2 Thay 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

3.3.3 B 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

jQuery UI là giao di i dùng chính th n jQuery

Gi i thi u

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ó

trang, ta s nhanh chóng th y r ng m t s ki u CSS cho giao di i dùng s b

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

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? Chai 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 c s

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

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

phát mau Internet, dùng ngày càng quan tâm

1.1 gì Jquery có làm

DOM = Document Object Model) c a m t tài li u HTML và ch n ra các thành ph nliê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.3 tác dùng

designer

1.1.5 thông tin server mà không trang web

trong quá trình này và cho phép phát web có trung vào các tính

hoá các tác java Script Ngoài tính

1.2 jQuery làm

trình có riêng trang web làm

chính vì code chúng ta

và

cá nhân

trang web

1.3.1 host jQuery

nó trên host

1.3.2 Dùng phiên có trên server Google

cache jQuery

Google mà không n download máy Cú pháp chèn jQuery

file có trên server Google sau:

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>

chính là tài HTML, Stylesheet CSS và tài

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

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

e text here

</p>

<div>

<h3>Lorem ipsum dolor sit amet</h3>

<p>some text here</p>

</div>

<h3>Lorem ipsum dolor sit amet</h3>

<p class="text">some text here

1.3.4 code jQuery

file này chúng ta chèn vào trong dòng code:

1.3.5 Thêm vào class

border: 1px solid red; background: pink;

pháp jQuery, trong ví này là addClass(), cho nên

JQUERY UI

JQ

ng

các plug-

các plugin

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

sau:

<script>$(function() { var availableTags = [ "ActionScript",

"AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",

"COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell",

"Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby",

<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

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

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

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

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

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

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

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

<div style="padding: 20px; margin-top: 75px;">

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

xem ví d sau

<style>

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

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

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

<div class="demo-description">

<p>Hover the links above or use the tab key to cycle the focus on each element.</p>

</div>

Ba h c kh i t o trong cách khác nhau.Nh i màu n n c a chúng.Xem

// the widget definition, where "custom" is the namespace,

// "colorize" the widget name

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

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

// _setOptions is called with a hash of all options that are changing

// always refresh when changing options

// _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) ) {

red: 60,

blue: 60

});

// initialize with custom green value

// and a random callback to allow only colors with enough green

// 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", {

<div id="my-widget1">color me</div>

<div id="my-widget2">color me</div>

<div id="my-widget3">color me</div>

<button id="black">Go black</button>

</div>

<div class="demo-description">

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

b ng khai báo sau sau th <head>:

<! Latest compiled and minified CSS >

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

<! Optional theme >

<linktheme.min.css">

rel="stylesheet"href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-<! Latest compiled and minified JavaScript >

<scriptsrc="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Chú ý r ng t t c JavaScript plugins yêu c c include

less/,js/, và fonts/ cho CSS,

JS và icon fonts ( ) T dist/ bao

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title> Bootstrap 101</title>

<! Bootstrap >

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

<! HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries >

<! WARNING: Respond.js doesn't work if you view the page via file:// >

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

<! Custom styles for this template >

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

<! Just for debugging purposes Don't actually copy this line! >

<! [if lt IE 9]><script

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<h1>Bootstrap starter template</h1>

<p class="lead">Use this document as a way to quickly start any new project.<br> All

you get is this text and a mostly barebones HTML document.</p>

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

<! Custom styles for this template >

<link href="jumbotron.css" rel="stylesheet">

<! Just for debugging purposes Don't actually copy this line! >

<! [if lt IE 9]><script

src=" / /assets/js/ie8-responsive-file-warning.js"></script><![endif] >

<! HTML5 shim and Respond.js IE8 support of HTML5 elements and media

queries >

<! [if lt IE 9]>

<div class="navbar-collapse collapse">

<form class="navbar-form navbar-right" role="form">

<button type="submit" class="btn btn-success">Sign in</button>

<p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>

<p><a class="btn btn-default" href="#" role="button">View details

&raquo;</a></p>

</div>

<div class="col-md-4">

<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

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

<! Just for debugging purposes Don't actually copy this line! >

<! [if lt IE 9]><script

src=" / /assets/js/ie8-responsive-file-warning.js"></script><![endif] >

<! HTML5 shim and Respond.js IE8 support of HTML5 elements and media

queries >

<! [if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

<![endif] >

<! Custom styles for this template >

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

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</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>

<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="container">

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