jQuery UI是一個(gè)基于JavaScript的用戶界面庫，涵蓋了主題設(shè)計(jì)、交互、UI組件等功能。它可以與PHP語言結(jié)合使用完成動(dòng)態(tài)網(wǎng)頁的開發(fā)。
舉個(gè)例子，如果我們想要給一個(gè)表單添加自動(dòng)補(bǔ)全功能，可以使用jQuery UI的Autocomplete插件來實(shí)現(xiàn)。下面是相應(yīng)的PHP代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Autocomplete Example</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>上述代碼先引入了jQuery和jQuery UI的相關(guān)文件，然后設(shè)置了一個(gè)數(shù)據(jù)源availableTags，它是一個(gè)數(shù)組，包含了想要添加自動(dòng)補(bǔ)全的內(nèi)容。最后，使用Autocomplete插件將輸入框?qū)崿F(xiàn)自動(dòng)補(bǔ)全的功能。
另外，jQuery UI還提供了非常豐富的UI組件，如日期選擇器、對話框、標(biāo)簽頁等等。下面是一個(gè)使用標(biāo)簽頁組件的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabs Example</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
</body>
</html>這段代碼首先使用jQuery UI的tabs()函數(shù)將指定的元素轉(zhuǎn)化為標(biāo)簽頁組件，并在HTML中設(shè)置了三個(gè)標(biāo)簽和相應(yīng)的內(nèi)容。運(yùn)行效果如圖所示：
綜上所述，jQuery UI提供了多種UI組件和插件，可以很方便地實(shí)現(xiàn)各種交互功能，而結(jié)合PHP的優(yōu)勢，可以完成更加復(fù)雜的動(dòng)態(tài)網(wǎng)頁開發(fā)。
上一篇c php解析
下一篇jquery上傳 php