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

解决思路：
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>

效果如图：

收缩：

展开：

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

赞 (0)

相关推荐

  • 一个简单的jQuery插件制作 学习过程及实例

    一,首先,制作jQuery插件需要一个闭包 复制代码 代码如下: (function ($) { //code in here })(jQuery); 这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢? a) 避免全局依赖. b) 避免第三方破坏. c) 兼容jQuery操作符'$'和'jQuery ' 二,有了闭包,在其中加入插件的骨架 复制代码 代码如下: $.fn.dBox = function (options) { var defaults = { //各种属性

  • firefox扩展插件制作方法详细介绍

    首先第一步 说一下怎么样查看firefox插件的源码, 就我上边写的那个东西,把它下载下来.将它的扩展名改为zip并解压.会得到一个blueideaserach的文件夹, 这个文件夹中便是我做的这个插件的源码[attach]62937[/attach] 这个目录中除了 chrome目录  chrome.manifest install.rdf  这三个以外都不是必须的. chrome.manifest   这个文件中是对所有文件的一个列表. install.rdf             这个是

  • jquery tab插件制作实现代码

    jquery插件的基本格式: 复制代码 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称.可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults, options); this.each(function(){ //实现的功能设置 }); }; })(jQuery); 我这里是做一个tab的插件,我来完善以上代码

  • JQuery 插件制作实践 xMarquee插件V1.0

    JQuery 插件制作实践 xMarquee插件V1.0

    插件需求 1,向左或者右移动列表中的元素.(注,上下方向也一样的,用css控制列表元素float的方向即可-) 2,鼠标移动到某个元素上时,改元素突出显示(css控制),播放器停止滚动.移开后继续跑马.. 3,可选左右手工导航按钮.  实现原理 移动列表末尾元素到第一个元素前面即可. 将来的扩展(以后用到的话再看吧) 多个元素同时移动:移动时的效果:移动后的回调函数:(注:利用移动后的回调函数可以方便做一个相册插件,有兴趣的自己写下).做开发的人要记住一句话:Do the simplest th

  • jquery插件制作简单示例说明

    一.先从一个简单的实例,不需要带参数的一个方法开始 复制代码 代码如下: //创建一个匿名函数 (function($){ //给jQuery附加一个新的方法(详细见备注1) $.fn.extend({ //插件的名字 MyFirstName: function() { //迭代当前匹配元素集合 return this.each(function() { var obj = $(this); //自己的代码 }); } }); )(jQuery); 备注1:理解$.fn.extend和$.ext

  • Jquery 插件学习实例1 插件制作说明与tableUI优化

    Jquery 插件学习实例1 插件制作说明与tableUI优化

    一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. 1.1.jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子: 复制代码 代码如下: $.fn.extend({ check: function() { return this.each(function()

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

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

    解决思路:1. 在标题处增加一个[-][+]号,供用户点击. 2. 用户收缩和展开屏幕的行为保存在Cookie里面.页面重新加载或者用户重新登录系统,仍然能记住用户的行为. 优点:1.使用Jquery插件的形式来做,容易扩展.容易实现. 2. 保存在Cookie的行为,容易实现,减少工作量,用户也能接收.如保存在数据库,则增加页面的负载. 缺点:不能每个页面使用单独行为,既是:每次用户的收缩和扩展在系统都是全局的.并且到其他计算机登录.或者清除缓存之后,就不能记住用户的操作了. 首先使用js函数

  • jQuery插件制作之参数用法实例分析

    本文实例讲述了jQuery插件制作之参数用法.分享给大家供大家参考.具体分析如下: 1.无参数实现文字阴影效果 jQuery.fn.shadow =function(){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 0;i < 5;i++){ $originalElement.clone() .css({ position :"absolute", left :$ori

  • jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

    select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自

  • jQuery插件制作之全局函数用法实例

    本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数 (1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性. jQuery.five =function(){ alert("直接继承方式不一样"); } 调用: 复制代码 代码如下: $.five(); (2)添加多个函数 jQuery.five =func

  • jQuery插件制作的实例教程

    一.jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势. 2. 全局函数法 可以把自定义的功能函数独立附加到jQuery命名空间下,从而作为jQuery作用域下的一个公共函数使用. 但全局函数没有被绑定到jQuery对象上,故不能在选择器获取的jQuery对象上调用.需要通过jQuery.fn()或$.fn()方式进行引用. 3.

  • jquery插件制作 图片走廊 gallery

    首先创建jquery.gallery.js的插件文件,构建程序骨架. 复制代码 代码如下: (function ($) { $.fn.gallery = function () { return this.each(function () { var self = $(this); self.click(function () { }); }); } })(jQuery); 创建html文件,使用我们创建的插件. 复制代码 代码如下: <!DOCTYPE html> <html xmln

  • jquery插件制作 自增长输入框实现代码

    首先还是看html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title&

随机推荐