一个小小的工具栏插件,效果如下,可以任意绑定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">