正在看SurrealToDo的程式碼，其中右鍵選單就是用Jeegoo來完成，讓我很想要去瞭解Jeegoo用法。
- 開啟右鍵選單的用法：
//開啟右鍵選單的方法
$('selector').jeegoocontext('menu_id'[,'options']);
//關閉右鍵選單
$('selector').nojeegoocontext(); - 從Basic改寫成自己練習的右鍵選單範例：
<head>
...
<!-- 右鍵選單會用到的css -->
<link href="jeegoocontext/skins/cm_default/style.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jeegoocontext/jquery.jeegoocontext.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#content').jeegoocontext('menu');
$('#menu li').click(function(){
alert('You Click - '+$(this).html());
});
});
</script>
...
</head>
<body>
...
<!-- 提供可以使用右鍵選單的目標 -->
<span id='content'>可以在我上面按右鍵。</span>
...
<!-- 右鍵選單內容 -->
<ul id="menu" class="jeegoocontext cm_default">
<li id="option_a">Option A</li>
<li>Option B</li>
<li>Option C</li>
<li>Option D</li>
</ul>
...
</body> - 建立子選單只要從nested ul著手改寫就能完成！可以參考範例Opera。
- 在選單增加小圖示，範例Advanced是插入預設的圖片。
- 範例Behavior開始出現互動效果，更改文字內容的css、移除右鍵選單功能，以及整段文字刪除。
- 範例Multple只是說明可以多個段落加入不同的右鍵選單。
關於options properties和options callback可以參考官方的documentation，文件裡面有很詳細的解說，而且還提供DEMO可以學習。
沒有留言:
張貼留言