初学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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
js实现tab切换效果
Feb 16 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript函数式编程实例分析
2015/04/25 Javascript
javascript数组排序汇总
2015/07/07 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
react的hooks的用法详解
2020/10/12 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python for循环及基础用法详解
2019/11/08 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
投资协议书范本
2014/04/21 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
大学生入党自传2015
2015/06/26 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python