初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能


Posted in Javascript onDecember 26, 2011

解决思路:
1、 在标题处增加一个【—】【+】号,供用户点击。
2、 用户收缩和展开屏幕的行为保存在Cookie里面。页面重新加载或者用户重新登录系统,仍然能记住用户的行为。


优点:1、使用Jquery插件的形式来做,容易扩展。容易实现。

2、 保存在Cookie的行为,容易实现,减少工作量,用户也能接收。如保存在数据库,则增加页面的负载。

缺点:不能每个页面使用单独行为,既是:每次用户的收缩和扩展在系统都是全局的。并且到其他计算机登录、或者清除缓存之后,就不能记住用户的操作了。


首先使用js函数的方式实现。然后改成Jquery插件:代码

/* 
* TableToggle 0.1 
* Copyright (c) 2011 Novus_lee http://www.cnblogs.com/novus 
* Date: 2011-12-23 
* 在SageCRM的查询屏幕隐藏部分行的功能 
*/ 
(function($){ 
$.fn.TableToggle = function(options){ 
var defaults = { 
plussrc : "/upload/201112/20111226224658296.gif", //--[+]号图片 
minussrc : "/upload/201112/20111226224658809.gif", 
line : 2 
} 
var options = $.extend(defaults, options); 
var flip = 0, i = 0; 
this.each(function(){ 
var $thisTable = $(this); 
var claName = "btntoggle" + i; 
//--所在表格的上方增加图片按钮 
var $Title = $thisTable.parent().parent().parent().find("td.PANEREPEAT"); 
$Title.prepend("<a href='javascript:void(0);' class='" + claName + "' style='cursor:pointer;padding-right:10px;'><img style='border:0px;' src='" + options.minussrc + "'></a>"); 
var trlen = $thisTable.find("tr").length; 
options.line = (options.line > trlen ? trlen : options.line); 
$Title.find("a." + claName).click(function () { 
$thisTable.find("tr:gt(" + options.line + ")").toggle(flip++); 
if (flip % 2 == 0) 
{ 
$Title.find("img[src*='smallplus']").attr("src",options.minussrc); 
$.cookie(claName, "plus"); 
} 
else 
{ 
$Title.find("img[src*='smallminus']").attr("src",options.plussrc); 
$.cookie(claName, "smallminus"); 
} 
}); 
if ($.cookie(claName) == "smallminus" || $.cookie(claName) == "" || $.cookie(claName) == null) 
{ 
$("a." + claName).click(); 
} 
i++; 
}); 
}; 
})(jQuery);

插件还调用了一个jquery的Cookie插件。
调用的方法:
<script type="text/javascript" src="../scripts/jquery.js"></script> 
<script type="text/javascript" src="../scripts/cookie.js"></script> 
<script type="text/javascript" src="../scripts/toggleblock.js"></script> 
<script type="text/javascript"> 
<!-- 
$(function(){ 
$("table.CONTENT:eq(0)").TableToggle(2); 
}) 
//--> 
</script>

效果如图:

收缩:

初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能

展开:

初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能

PS: SageCRM是什么只支持IE7、 IE8的。所以这里的插件并没有测试浏览器兼容性。

Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
JS实现电商商品展示放大镜特效
Jan 07 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 #Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 #Javascript
关于跨站脚本攻击问题
Dec 22 #Javascript
js DOM的学习笔记
Dec 22 #Javascript
jquery 年会抽奖程序
Dec 22 #Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 #Javascript
jquery随机展示头像代码
Dec 21 #Javascript
You might like
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
PDO::exec讲解
2019/01/28 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python 弧度与角度互转实例
2020/04/15 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
洗车工岗位职责
2014/03/15 职场文书
团代会宣传工作方案
2014/05/08 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
党员检讨书范文
2014/12/27 职场文书
单位接收证明格式
2015/06/18 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
银行工作心得体会范文
2016/01/23 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers