0
0
0
آموزش jQuery UI قسمت هشتم کار با Tabs
آموزش jQuery UI قسمت هشتم کار با Tabs
در این پست در ادامه آموزش jQuery UI به مبحث Tabs می پردازیم.
برای ایجاد تب با jQuery UI ابتدا یک div با آی دی tabs در صفحه قرار می دهیم سپس یکul و به تعداد تبی که می خواهید داشته باشیم li قرار می دهیم و همچنین بین تگ های li باید تگ a قرار دهیم و href آنها را با id های که برای تگ های div در ادامه قرار می دهیم باید برابر باشند و بعد از تگ بستهul به تعداد li ی که بین تگ باز و بسته ul قرار دادیم تگ div قرار می دهیم و همچنین id آنها را برابر مقدارهای که در بالا برای href مشخص کردیم قرار می دهیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="content/jquery-ui.css" rel="stylesheet" />
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">This is first tab</div>
<div id="tabs-2">This is first second</div>
<div id="tabs-3">This is first third</div>
</div>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال