easyui-tabs图标(获取焦点时显示图标,失去焦点时隐藏图标)

获取焦点时显示图标,失去焦点时隐藏图标

    <script type="text/javascript">

        $(‘#_progress‘).tabs({
            onSelect: function (title) {
                var tab = $(‘#_progress‘).tabs(‘getSelected‘);  // get selected panel

                var index = $(‘#_progress‘).tabs(‘getTabIndex‘, tab);
                //alert(index + title);
                var tabs = $(‘#_progress‘).tabs().tabs(‘tabs‘);
                for (var i = 0; i < tabs.length; i++) {
                    if (index == i) {
                        //alert(i);
                        $(‘#_progress‘).tabs(‘update‘, {
                            tab: tabs[i],
                            options: {
                                title: ‘<img src=\‘images/accordion_arrows.png\‘/>‘ + title
                                //href: ‘get_content.php‘  // the new content URL
                            }
                        });
                    }
                    else {
                        if (i == 0) {
                            $(‘#_progress‘).tabs(‘update‘, {
                                tab: tabs[i],
                                options: {
                                    title: ‘柱状图‘
                                    //href: ‘get_content.php‘  // the new content URL
                                }
                            });
                        }
                        else {
                            $(‘#_progress‘).tabs(‘update‘, {
                                tab: tabs[i],
                                options: {
                                    title: ‘曲线图‘
                                    //href: ‘get_content.php‘  // the new content URL
                                }
                            });
                        }
                    }
                }

            }
        });

        $(function () {
            var tabs = $(‘#_progress‘).tabs().tabs(‘tabs‘);
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].panel(‘options‘).tab.unbind().bind(‘mouseenter‘, { index: i }, function (e) {
                    $(‘#_progress‘).tabs(‘select‘, e.data.index);
                });
            }
        });

    </script>

时间: 2024-10-23 22:49:46

easyui-tabs图标(获取焦点时显示图标,失去焦点时隐藏图标)的相关文章

基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这样给我们扩展使用有很多的不方便.基于这个原因,我想如果能够独立一个模块,自动根据图标生成图标CSS样式文件,并存储相应的记录到数据库里面,方便我们查询显示,那样我们使用起来就很方便了,最后有了这些数据,只需要做一个通用的图标选择界面,并可以在很多地方重用了.本文正是基于这个思路,开发了一个图标管理模

基于MVC+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这样给我们扩展使用有很多的不方便.基于这个原因,我想如果能够独立一个模块,自动根据图标生成图标CSS样式文件,并存储相应的记录到数据库里面,方便我们查询显示,那样我们使用起来就很方便了,最后有了这些数据,只需要做一个通用的图标选择界面,并可以在很多地方重用了.本文正是基于这个思路,开发了一个图标管理模

笔记本上任务栏显示电池电量使用情况的图标不见了怎么办?

带着笔记本电脑出门虽然方便,但总是担心用到一半会没电,所以需要不时的关注一下剩余电量.偶然一次发现Win7任务栏右下角通知区域里的电池状态图标不见了,完全不知道电量用到什么程度,太没安全感.可是打开Win7通知区域图标管理,却看到电源选项处是灰色不可更改的,这是怎么回事?试试用下面的方法来解决. Win7电源选项不可更改状态 点击Win7开始按钮,在搜索框中输入gpedit.msc并按回车,打开本地组策略编辑器. 打开Win7本地组策略编辑器 在“用户配置”下依次打开“管理模板”->“开始菜单和

实现easyui datagrid在没有数据时显示相关提示内容

本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

EasyUI 使用tabs切换后datagrid显示不了内容

今天刚遇到这个问题,找了下各群的深度合作伙伴,没有好的答案,那就自己研究吧. 问题点在于打开tab1时,快速切到tab2,这时tab1的datagrid渲染未完成,再次回到tab1,因为是在不可见区域完成的渲染,所以datagrid的窗体计算size时给的height为0. 解决思路:在tab重获焦点时,对datagrid resize一次. 在tabs的onSelect里注册事件,事件里面的代码: try { $(".tabs-panels .panel").eq($('.tabs-

密码框失去焦点且为空时显示汉字“密码”、获取焦点时输入内容显示为密码“**********”的实现方法

想要达到的效果: 失去焦点时: 选中输入时时: 通过js动态改变input 的type的属性: 网上已经有相关资料了.这里做一下笔记.原文章地址:http://www.jb51.net/article/43140.htm <input name=”password” type=”password” id=”password” class=”input” style=”display: none;” /> $(“#showPwd”).focus(function() {var text_valu

实例:SSh结合Easyui实现Datagrid的分页显示(JAVA版)

近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. 首先看一下要实现的效果:当每页显示5行数据: 当每页显示10行数据,效果如下: 具体步骤: 1.下载Easyui,并搭建环境.可参照博客 http://blog.csdn.net/lhq13400526230/article/details/9148299 2.搭建SSH工程,整个工程的目录结构如

Easyui tabs的herf和content属性

在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ $('#msg').tabs('select',t); }else{ $('#msg').tabs('add',{ title:t, href:h }); }}在body方法中有一个超连接<a id="admins">查看管理员信息</a>方法调用$("

Easyui datebox单击文本框显示日期选择 eayui版本1.5.4.1

Easyui默认是点击文本框后面的图标显示日期,体验很不好,所以我想单击文本框就显示日期选择框,网上很多版本是1.3,1.4的,于是自己就比葫芦画瓢改了一个1.5.4.1的版本. 我参考了网上这个帖子,基本一样.只是1.5.4.1增加了一些代码,所以行号有些差异,并且编码后的数字有些变化.Easyui datebox单击文本框显示日期选择 eayui版本1.5.3 修改jQuery.easyui.min.js文件,在文件中查找:tb._size(opts, 保存,成功. 原文地址:https:/