PDA

View Full Version : سوال: jquery dock menu



Z.Abdollahi
پنج شنبه 25 فروردین 1390, 12:02 عصر
با سلام.
من تصميم دارم از يه dock menu تو صفحه ام استفاده كنم. تو همين صفحه من از دو تا ui-jquery widget به نام هاي tab و accordion menu استفاده كردم. اينجا (http://www.ndesign-studio.com/blog/css-dock-menu)كدي هست براي پياده سازي اين من به صورت افقي. اين كد در يك صفحه كه از widget ها استفاده نشده باشه كار مي كنه. ولي با انتقال به صفحه اصلا ديگه اجرا نميشه.
اين يكي (http://www.wizzud.com/jqDock/) هم كدي هست كه همين منو رو به صورت عمودي توليد مي كنه. اين يكي كه اصلا تو همون صفحه خالي هم اجرا نميشه.
من الان دو تا سئوال دارم. در مورد اون منوي افقي، آيا اين اجرا نشده به خاطر ناسازگار بودن ورژن كتابخانه هايي است كه استفاده شده؟ ورژن كتابخانه منو 1.1.2 و كتابخانه ui نسخه 1.4.4 هست.
دومين سئوال هم اينه كه روش به كار بردن كد منوي عمودي با توجه به كدي كه ارسال مي كنم درسته؟ اگر بله چرا اجرا نميشه؟



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="jquery-ui/Menu/js/jquery.jqDock.min.js" type="text/javascript"></script>
<script src="jquery-ui/Menu/js/jquery.jqDock.js" type="text/javascript"></script>
<link href="jquery-ui/Menu/style.css" rel="stylesheet" type="text/css" />

<title></title>
</head>
<body>
<form id="form1" runat="server">

<div id='page'>
<div id='menu' class="jqDock" style="visibility: visible; display: block;">
<img src='jquery-ui/Menu/Images/home.png' title='home' alt='' />
<img src='jquery-ui/Menu/Images/email.png' title='contact' alt='' />
<img src="jquery-ui/Menu/Images/portfolio.png" title='portfolio' alt='' />
<img src="jquery-ui/Menu/Images/video.png" title='video' alt='' />
<img src="jquery-ui/Menu/Images/history.png" title='history' alt='' />
</div>
</div>
</form>

<script type="text/javascript">
jQuery(document).ready(function($){
// set up the options to be used for jqDock...
var dockOptions =
{ align: 'right' // vertical menu, with expansion LEFT from a fixed RIGHT edge
, labels: true // add labels (defaults to 'tl')
};
// ...and apply...
$('#menu').jqDock(dockOptions);
});
</script>

</body>
</html>