jQuery Bootstrap鼠標右鍵菜單



71 283 95



特效描述:jQuery Bootstrap 鼠標右鍵菜單,jQuery Bootstrap鼠標右鍵菜單

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/toastr.css">
<link rel="stylesheet" href="css/highlight-8.6.default.min.css">
<link rel="stylesheet" type="text/css" href="css/default.css">

2. 引入JS

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/BootstrapMenu.min.js"></script>
<script src="js/toastr.js"></script>
<script src="js/highlight-8.6.default.min.js"></script>

3. HTML代碼

<div class="container">
	<h1>1</h1>
	<h4 id="demo1">Demo 1</h4>
	<p>在這個例子中,在下面的矩形區域內右鍵點擊就可以打開上下文菜單。</p>
	<div class="row collapsibleContainer">
		<div class="col-md-6">
			<div id="demo1Box" class="text-center" style="height: 300px; border:1px solid #ddd">
				<span style="line-height: 300px">在這個區域內的任何位置點擊右鍵</span>
			</div>
		</div>
	</div>
</div>
<script>
var menu = new BootstrapMenu('#demo1Box', {
  actions: [{
	name: 'jQuery特效',
	onClick: function() {
	  toastr.info("'jQuery特效");
	}
  }, {
	name: '51前端',
	onClick: function() {
	  toastr.info("'1前端");
	}
  }, {
	name: '前端特效',
	onClick: function() {
	  toastr.info("'前端特效");
	}
  }]
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 右鍵菜單
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子