[jQuery] Hello, World!
01／tooltip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<!-- Bootstrap css -->
<link rel="stylesheet" href="1.11.4/jquery-ui.css" />
<script src="2.1.4/jquery.min.js"></script>
<script src="1.11.4/jquery-ui.min.js"></script>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
});
</script>
</head>
<body>
<!-- HTML -->
<label for="name">Name:</label>
<input id="tooltip-1" title="Enter You name">
<p><a id="tooltip-2" href="#" title="Nice tooltip">
I also have a tooltip
</a></p>
</body>
</html>
02／Pagination (一次撈足資料筆數，再切分頁)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Title of the document</title>
<style>
.pagination {
display: inline-block;
padding: 0;
margin : 0;
}
.pagination li {
display:inline-block;
}
.pagination li a {
color : #337AB9;
float : left;
padding : 8px 16px;
text-decoration: none;
transition : background-color .3s;
border : 1px solid #ddd;
}
.pagination li a.active {
background-color: #4CAF50;
color : white;
border : 1px solid #4CAF50;
}
.pagination li a:hover:not(.active) {
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="test-list">
<input type="text" class="search" />
<ul class="list">
<li><p class="name">Guybrush Threepwood</p></li>
<li><p class="name">Elaine Marley</p></li>
<li><p class="name">LeChuck</p></li>
<li><p class="name">Stan</p></li>
<li><p class="name">Voodoo Lady</p></li>
<li><p class="name">Herman Toothrot</p></li>
<li><p class="name">Meathook</p></li>
<li><p class="name">Carla</p></li>
<li><p class="name">Otis</p></li>
<li><p class="name">Rapp Scallion</p></li>
<li><p class="name">Rum Rogers Sr.</p></li>
<li><p class="name">Men of Low Moral Fiber</p></li>
<li><p class="name">Murray</p></li>
<li><p class="name">Cannibals</p></li>
<li><p class="name">Guybrush Threepwood</p></li>
<li><p class="name">Elaine Marley</p></li>
<li><p class="name">LeChuck</p></li>
<li><p class="name">Stan</p></li>
<li><p class="name">Voodoo Lady</p></li>
<li><p class="name">Herman Toothrot</p></li>
<li><p class="name">Meathook</p></li>
<li><p class="name">Carla</p></li>
<li><p class="name">Otis</p></li>
<li><p class="name">Rapp Scallion</p></li>
<li><p class="name">Rum Rogers Sr.</p></li>
<li><p class="name">Men of Low Moral Fiber</p></li>
<li><p class="name">Murray</p></li>
<li><p class="name">Cannibals</p></li>
</ul>
<ul class="pagination"></ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/list.js"></script>
<script src="js/list.pagination.js"></script>
<script>
var monkeyList = new List('test-list', {
valueNames: ['name'],
page: 8,
plugins: [ ListPagination({}) ]
});
</script>
</body>
</html>
03／Autocomplete (google搜尋)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Title of the document</title>
<link rel="stylesheet" href="jquery-ui.css">
<style>
.ui-autocomplete {
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
font-size : 16px;
}
</style>
<script src="jquery_2.1.4.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#fruit').autocomplete({
source: "auto.php",
minLength: 1,
select: function (event, ui) {
$("#txtColor").val(ui.item.Color);
$("#txtEn").val(ui.item.En);
$("#txtDesc").val(ui.item.Desc);
$("#txtStar").val(ui.item.Star);
}
});
});
</script>
</head>
<body>
<p><label>請輸入水果名稱： </label><input id="fruit" name="fruit" /></p><hr/>
<p><label>這個水果的顏色： </label><span id="txtColor" /></p>
<p><label>這個水果的英文名稱： </label><input id="txtEn" /></p>
<p><label>這個水果的描述： </label><input id="txtDesc" /></p>
<p><label>這個水果的喜好程度： </label><input id="txtStar" /></p>
</body>
</html>
auto.php
<?php
#----------------------------------------------------
# from: http://docs.jquery.com/UI/Autocomplete
# the local data can be a simple array of strings,
# or it contains objects for each item in the array,
# with either a 'label' or 'value' property, or both.
#----------------------------------------------------
$ak = array('label' => '蘋果', 'Color' => '紅色', 'En' => 'Apple' , 'Desc' => '圓圓的' , 'Star' => '★★★☆☆');
$al = array('label' => '香蕉', 'Color' => '黃色', 'En' => 'Banana', 'Desc' => '長長的' , 'Star' => '★☆☆☆☆');
$ar = array('label' => '葡萄', 'Color' => '紫色', 'En' => 'Grape' , 'Desc' => '一顆一顆的', 'Star' => '★★★★★');
$arr[0] = $ak;
$arr[1] = $al;
$arr[2] = $ar;
# echo the json data back to the html web page
echo json_encode($arr);
?>
☞ How to Create a jquery-ui Autocomplete Step by Step
☞ AJAX autocomplete with jQuery, PHP, and JSON
☞ jQuery UI autocomplete- no results message
☞ How to highlight input words in autocomplete jquery ui
〔範例下載〕
☞ ajaxForm()☞ Pagination (一次撈足資料筆數，再切分頁)
☞ JQuery 日期時間選擇器
☞ kendo 日期時間選擇器
☞ jQuery Nice Select
沒有留言: