初学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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
JS继承 笔记
Jul 13 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
非常有用的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
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
php数组一对一替换实现代码
2012/08/31 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
smarty中常用方法实例总结
2015/08/07 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
php读取本地json文件的实例
2018/03/07 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python定时截屏实现
2020/11/02 Python
会议开场欢迎词
2014/01/15 职场文书
电子工程求职信
2014/07/17 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
党校学习党性分析材料
2014/12/19 职场文书
财务工作失误检讨书
2015/02/19 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
小学教师求职信范文
2015/03/20 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
python实现简单的名片管理系统
2021/04/26 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android