简单的 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>
<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>
<div id="toolsbar" ></div><input value="disable" type="button" id="disable"><input value="enable" type="button" id="enable">