bootstrap鼠标右键菜单上下文配置插件



112 444 149



特效描述:bootstrap 鼠标右键菜单 上下文配置插件,bootstrap鼠标右键菜单上下文配置插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">

2. 引入JS

<script src="bootstrap/js/bootstrap.min.js"></script>
<script src='js/class2context.js'></script>

3. HTML代码

<div class="zzsc-container">
	<div class="container">
		<div class='centralBox'>
			<div class='class1 box1' style='background: #0FA3B1;'>
				<h4>A</h4>
				This is a demo
				<br>
				Just need to include the files:
				<ul>
					<li>class2context.js</li>
					<li>class2context.css</li>
				</ul>
			</div>
			<div class='class2 box1' style='background: #FF9B42;'>
				<h4>Get started!</h4>
				Right click over me!
				<div class='classSub2 box1' style='background: #5797CC; width: 130px; height: 180px!important;'>
					element inside element with diferent class
				</div>
			</div>
			<div class='class3 box1' style='background: #8BC34A;'>
				<h4>Use</h4>
				when html is charged, call the function
			</div>
			<div class='class4 box2' style='background: #9375A3;'>
				<h4>Use</h4>
				when html is charged, call the function:<br>
				<div class='codeFont'>
					<b>class2context</b>(
					<br> 'className',
					<br> "title",
					<br> [["option1", "functionoption1()"], ["option 2","functionoption2()"]]
					<br>);
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	array=[["<img src='img/iMac-icon.png' width='25px' /> A1", "function1()"], ["<img src='img/Autodesk-Alias-Design-icon.png' width='25px' /> A2","function2()"]];
	class2context('class1', "titleA", array);
	class2context('class3', "titleC", [["<img src='img/123D-Design-icon.png' width='25px' /> C1", "function1()"], ["<img src='img/Actions-draw-brush-icon.png' width='25px' /> C3","function3()"]]);
	class2context('class2', "titleB", [["<img src='img/3d-material-drop-tool-icon.png' width='25px' /> B2", "function2()"], ["<img src='img/Design-Briefs-icon.png' width='25px' /> B3","function3()"]]);
	class2context("classHeader", "titleTableMenu", [["header function 1", "function1()"], ["header function 2", "function2()"]]);
	class2context('class4',"title",[["option1", "function1()"], ["option 2","function2()"]]);
	class2context('mainimg', "Image context menu", [["<img src='img/123D-Design-icon.png' width='25px' /> C1", "function1()"], ["<img src='img/Actions-draw-brush-icon.png' width='25px' /> C3","function3()"]]);
	class2context('classSub2', "sub element context inside other element", [["<img src='img/123D-Design-icon.png' width='25px' /> C1", "function1()"]]);
	function function1(){
		alert("function 1 clicked");
	}
	function function2(){
		alert("function 2 clicked");
	}
	function function3(){
		alert("function 3 clicked");
	}
	function ContextMenus(){
		console.log("context menu called");
	}
	$(document).ready(function(){
		$('[data-toggle="tooltip"]').tooltip();
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字标签 文字提示框 彩色文字 提示框/弹出层 文字闪烁 layer 打字机 lightbox 文字列表 Tooltip工具提示框 文字弹幕 浮动提示框 文字高亮 html5弹窗动画 文字叠加 文字拖动 文字提示框 文字收缩展开 文字放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 文字延迟加载 360全景 html5文字动画 文字滚动 文字滑动 文字切换 弹出层拖动 窗口提示框 图片文字 文字导航菜单 文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到