ligerui中toolbar添加split的做法(作废)

来源：互联网发布：淘宝开店关键词编辑：程序博客网时间：2024/04/27 18:06

ligerui V1.1.1有添加line属性来做split

本文作法属旧版作法，可作废

在线例子:http://vazumi.net.s1.kingidc.net/example/gridex.aspx

效果图:

ligerui版本:1.0.2

toolbar中没有split分割条，怎么做最简单，这里提供2种方法，一种是只要页面上加一句话，一种是一劳永逸，是改源码

方法一:

通过jquery的改dom方法来搞，比较简单，一个分割条加一句话

            //工具条            $("#toptoolbar").ligerToolBar({ items: [                                                        {text: '刷新',id:'t1',icon:'refresh'},                                                        {text: '新增',id:'t2',icon:'add'},                                                        {text: '修改',id:'t3',icon:'modify'},                                                        {text: '删除',id:'t4',icon:'delete'},                                                        {text: '查询',id:'t5',icon:'search2'},                                                        {text: '打印',id:'t8',icon:'print'}                                                   ]                                          });                        $("div[toolbarid='t1']","#toptoolbar").after("<div style='float:left;margin-left:2px;'><hr width='1' size='10'/></div>"); //在t1后面加一个隔条            $("div[toolbarid='t3']","#toptoolbar").after("<div style='float:left;margin-left:2px;'><hr width='1' size='10'/></div>");             $("div[toolbarid='t5']","#toptoolbar").before("<div style='float:left;margin-left:2px;'><hr width='1' size='10'/></div>"); //在t5前面加一个隔条            $("div[toolbarid='t8']","#toptoolbar").before("<div style='float:left;margin-left:2px;'><hr width='1' size='10'/></div>");

此法还可以添加其它html,比如在线例子里面，我又加了文本框，日期框，标签等等

方法二:

这是由ligerui交流群3里面的 java-呼唤兄弟共享的，改源码方法，也很简单，这里也一并贴出来

$("#toptoolbar").ligerToolBar({items : [ {text : '增加',icon : 'add',line : true,click : itemclick}, {text : '修改',icon : 'modify',line : true,click : itemclick}, 加了一个line:true属性

然后在ligerToolBar里找到 ditem.hover(function ()在上面添加：if (item.line)                    {                     g.toolBar.append('<div class="l-toolbar-yline"></div>');                 } 然后，这个class l-toolbar-yline当然要自己定义啦.l-toolbar-yline {background: url('../images/menu/toolbar_split.gif') repeat-y;width: 1px;height: 22px;float: left;margin-left:2px;}