0
0
0
آموزش jQuery UI قسمت پنجم کار با Menu
آموزش jQuery UI قسمت پنجم کار با Menu
در این پست در ادامه آموزش jQuery UI به مبحث Menu ها در jQuery UI می پردازیم.
یکی دیگر از کارهای که در jQuery UI می توان انجام داد ایجاد منو می باشد.
در مثال زیر ابتدا با استفاده از ul و li منوی مورد نظر خود را ایجاد کردیم و سپس توسط دستور jQuery تابع menu را صدا زدیم و همچنین با استفاده از css عرض منو را مشخص کردیم.
نکته:
ui-menu از خود کلاس های پیش فرض jQuery UI می باشد.
<!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 () {
$("#menu").menu();
});
</script>
<style type="text/css">
.ui-menu {
width: 300px;
}
</style>
</head>
<body>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
در مثال زیر که همانند مثال قبل است با این تفاوت که خواستیم آیکون و محل نمایش زیر منو را تغییر دهیم.
<!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 () {
$("#menu").menu({
icons: { submenu: "ui-icon-circle-triangle-e" },
position: { my: "right top", at: "right-10 top+5" }
});
});
</script>
<style type="text/css">
.ui-menu {
width: 300px;
}
</style>
</head>
<body>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال