javascript查看详情与收起详情
直接上代码。
调用方法：
<div id='content_div'>详情内容
</div>
调用方法:
$("#content_div").detailControl({maxSize:100});<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<style type="text/css">*{margin:0;padding:0;font-family:微软雅黑;font-size:10pt}.content{width:150px;border:1px solid #AFAFAF;margin:100px auto;border-radius:4px;padding:4px}
</style>
</head><body><div class="content">啊打算离开解放啦看设计大方接撒看得见骄傲的上课林凤娇奥斯卡大家看法垃圾啊离开的睡觉了放假的了看风景啊看电视减肥了空间阿斯顿老卡机发啦快点就富利卡撒娇大连开发机啊打算离开房间啦看电视解放啦看的富利卡都是解放啦看电视剧富利卡介绍的立刻就发了看电视解放啦看的时间富利卡时间地方了卡机收到了付款</div></body>
<script type="text/javascript">
;(function($){//详情控制,请传入一个jQuery对象,options:参数列表//@author:xuzengqiang//@since :2015-3-16 13:57:02jQuery.fn.detailControl = function(options){var defaultOptions = {//详情最大字数maxSize:50,//链接颜色color:'#3399CC',//内容content:$(this).text()}; var settings = jQuery.extend(defaultOptions,options||{}),node,outer=$(this);var Control = {//执行execute:function(){if(settings.content.length > settings.maxSize) {outer.text(settings.content.substr(0,settings.maxSize)+"...");outer.append("<a href='javascript:void(0)' class='content-control'>∨查看详情</a>"); node = outer.find("a.content-control");node.css("color",settings.color);node.click(function(){Control.show();});} },//显示详情show:function(){outer.text(settings.content).append(node);node.text("∧收起详情");node.unbind("click").click(function(){Control.hide();});},//关闭详情 hide:function(){outer.text(settings.content.substr(0,settings.maxSize)+"...").append(node); node.text("∨查看详情");node.unbind("click").click(function(){Control.show();});}};return this.each(function(){Control.execute();});};
})(jQuery);
$(".content").detailControl();
</script>
</html>
javascript查看详情与收起详情相关推荐
- linux下查看GPU版本和详情信息 CUDA版本信息 anaconda版本信息
查看GPU型号 lspci | grep -i nvidia 查看NVIDIA驱动版本 sudo dpkg --list | grep nvidia-* # lspci | grep -i nvidi ...
- 【Linux 内核 内存管理】内存管理架构 ⑤ ( sbrk 内存分配系统调用代码示例 | 在 /proc/pid/maps 中查看进程堆内存详情 )
文章目录 一.sbrk 内存分配系统调用代码示例 二.在 /proc/pid/maps 中查看进程堆内存详情 本篇博客调用 sbrk 系统调用函数 , 申请并修改 堆内存 , 并在 /proc/pid ...
- 小孩发烧怎么办 - 强烈建议查看转载内容的详情，看视频介绍
小孩发烧怎么办 - 强烈建议查看转载内容的详情,看视频介绍 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...
- vue中“展开详情”“收起详情”
第一步: <div v-show="showregion"></div> 第二步: <div class="col-md-12 text-c ...
- linux下查看bios命令,Linux查看BIOS版本/信息详情
Linux查看BIOS版本/信息详情 命令如下: #dmidecode -t 0 例子: root@DS:~# dmidecode -t 0 # dmidecode 2.12 # SMBIOS ent ...
- kafka 基础概念、命令行操作（查看所有topic、创建topic、删除topic、查看某个Topic的详情、修改分区数、发送消息、消费消息、 查看消费者组 、更新消费者的偏移位置）
文章目录 前言 1. 基础概念 Broker Producer Consumer Consumer Group Topic Partition Replica 2. 命令行操作 2.1 查看所有top ...
- python + selenium +pyquery 爬虫 爬取 1688详情图片 阿里巴巴详情图片 与标题 下载图片并进行压缩
python + selenium +pyquery 爬虫 爬取 1688详情图片 阿里巴巴详情图片 与标题 下载图片并进行压缩 用到的库和源码下载地址 需要用到chromedriver 包含wi ...
- 如何生成api接口获取宝贝商品详情，商品详情接口，产品详情
API (Application Programming Interface)是指应用程序接口,它是一种通过编写一组统一的规则,开发一个软件来与其他应用程序进行通讯的技术.API可以方便应用程序之间的 ...
- 微信小程序文本查看更多和收起
微信小程序文本查看更多和收起 微信小程序中,有时候文本需要实现这样的功能: 1.文本超过n行显示省略号 2.省略时,显示 展开/收起 按钮 3.文本不超过n行时,不显示省略号和展开/收起按钮 实现功能 ...
- java jmap jc_利用jmap命令查看JVM内存使用详情
介绍 打印出某个java进程(使用pid)内存内的,所有'对象'的情况(如:产生那些对象,及其数量).它的用途是为了展示java进程的内存映射信息,或者堆内存详情. 可以输出所有内存中对象的工具,甚至 ...
最新文章
- 旷视MegEngine核心技术升级
- 关于在SVG中如何实现gif动画的问题？
- 55种网页常用小技巧(javascript) （转）
- My1stServlet
- Activity之launchMode：singleTop，singleTask与singleInstance
- C#托管代码调用C++非托管代码
- 1 D触发器verilog与Systemverilog编码
- java 报表_2020 最新流行的Java Web报表工具比对
- SAP License：BW/BCS（BO）难在那里--SAP中的公司和会计凭证
- Nginx Lua读取redis 进行权限认证操作
- JAVA 如何反编译JAR文件
- YouTube视频推荐系统总结
- Apple（苹果）忘记安全问题答案怎么办？
- 小样本不符合正态_尿液样本HPV分型检测用于宫颈癌筛查的可能性
- 淘宝七天自动确认收货，让你设计，可以怎么实现？（附源码）
- http://www.csee.wvu.edu/~xinl/source.html 突然发现无法登陆，现备份内容以便后续查询
- 一点点读懂cpufreq（一）
- 腾讯地图api_让数据跃然“图”上！腾讯位置服务数据可视化API正式发布
- java 9宫格抽奖_九宫格抽奖
- Android面试题精选——再聊Android-Handler机制-2，android物联网开发李天祥源代码