简单的 jquery工具栏 插件

一个小小的工具栏插件，效果如下，可以任意绑定jquery方式的命名的事件，实现自定义各种操作。



首先还是引入文件：
Java代码  
<!--基本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>  

<!--基本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 按钮，进而控制一些交互效果。

Java代码  
<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>  

<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中如下：
Java代码  
<div id="toolsbar" ></div>   
<input value="disable" type="button" id="disable">   
<input value="enable" type="button" id="enable">  

<div id="toolsbar" ></div>
<input value="disable" type="button" id="disable">
<input value="enable" type="button" id="enable">



简单的_jquery工具栏.rar (86.6 KB)
下载次数: 316

不支持IE6?

不支持IE7

对于我来说很高深