当前位置: 代码迷 >> Web前端 >> 容易的 jquery工具栏 插件
  详细解决方案

容易的 jquery工具栏 插件

热度:205   发布时间:2012-08-27 21:21:56.0
简单的 jquery工具栏 插件
一个小小的工具栏插件,效果如下,可以任意绑定jquery方式的命名的事件,实现自定义各种操作。



首先还是引入文件:
<!--基本css样式-->
<link href="css/tools.css" rel="stylesheet" type="text/css"></link>
<!--按钮图标css样式-->
<link href="css/icon.css" rel="stylesheet" type="text/css"></link>
<!--jquery-1.4.2库-->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!--tools-bar 插件js-->
<script type="text/javascript" src="tools-bar-1.0.js"></script>


可以如下方式使用,可以按照jquery绑定的事件名称,任意添加事件,
可以根据按钮的ID disable 按钮和 enable 按钮,进而控制一些交互效果。

<script type="text/javascript">

$(function(){
		var tools = $("#toolsbar").initToolsBar({
			items:[{id:"add",text:"新增",icon:"icon-grid-add",disabled:false,click:function(){
						alert('icon-grid-add');
					},mouseover:function(){
						alert("mouseover");
					}},
					{id:"modify",text:"修改",icon:"icon-grid-modify",disabled:false,click:function(){
						alert('icon-grid-modify');
					}},
					{id:"del",text:"删除",icon:"icon-grid-del",disabled:false,click:function(){
						alert('icon-grid-del');
					}},
					{id:"refresh",text:"刷新",icon:"icon-grid-refresh",disabled:false,click:function(){
						alert('icon-grid-refresh');
					}}
				]
		});
		
		tools.disable("add");

		$("#disable").click(function(){
			tools.disable("add");
		});

		$("#enable").click(function(){
			tools.enable("add");
		});
});
</script>


body中如下:
<div id="toolsbar" ></div>
<input value="disable" type="button" id="disable">
<input value="enable" type="button" id="enable">


  相关解决方案