avalon.js 文字显示更多与收起
isShowMore: function (content) {
if(content && content.length >= 124){
var shortContent = content.substring(0,124);
var showMoreContent = "<pre>"+shortContent+"<div class='showMoreContent'><span>...</span><a class='btnShowMore' ms-click='showToggle(event,$index,\".questionSegment2\",question.content)'>显示全部</a></div></pre>"
return showMoreContent;
}else {
return content;
}
},
/**
* 显示和隐藏按钮回调
* @param e
* @param index
* @param _class 额外的样式
*/
showToggle: function (e, index, _class,content) {
_class = _class || '';
var eTxt = e.target.innerHTML
var p = $('.textBox' + _class + '.' + index)[0]
if (eTxt === '显示全部') {
e.target.innerHTML = '收起'
p.classList.add('showMore')
$(this).prev('span').html('');
var pre = e.target.parentElement.parentElement
pre.firstChild.remove()
var div = pre.querySelector('div')
var elm = document.createElement('text')
elm.innerText = content
pre.appendChild(elm)
pre.insertBefore(elm,div)
} else {
e.target.innerHTML = '显示全部'
p.classList.remove('showMore')
$(this).prev('span').html('...');
var shortContent = content.substring(0,124);
var pre = e.target.parentElement.parentElement
pre.firstChild.remove()
var div = pre.querySelector('div')
var elm = document.createElement('text')
elm.innerText = shortContent
pre.appendChild(elm)
pre.insertBefore(elm,div)
}
},
<div class="textBox questionSegment2 no-height" ms-class="{{$index}}" ms-html="isShowMore(question.content)"></div>
avalon.js 文字显示更多与收起的更多相关文章
- three.js 文字显示不出来
试了下使用three.js加载文字,首先是报了一个这样的错误: Cross origin requests are only supported for HTTP.” 当时很懵逼,去网上查了查,发现是 ...
- Android编程之仿微信显示更多文字的View
微信朋友圈中,如果好友发表的文字过长,会自动收缩起来,底下有提示,当点击“显示更多”时才会展开. 首先定义布局文件(很简单,不解释): <?xml version="1.0" ...
- js点击更多显示更多内容效果
我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...
- Android开发之仿微信显示更多文字的View
最近开发需求中要模仿微信朋友圈文章的展开收起功能,网上找了找,发现都有问题,于是乎自己在前辈的基础上进行了一定量的修改,下边将源码贴出来供大家参考:1.主Activity布局文件就不粘贴了,很简单,就 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- avalon.js实践 svg地图配置工具
MVVM模式,在很多复杂交互逻辑下面,有很大的优势.现在相关的框架也很多,现在项目中使用了avalon.js,选择它的原因,是兼容性的考虑,当然也要支持下国内开发大牛,至于性能方面的,没有实际测试过, ...
- ExpandableListView实现展开更多和收起更多
[需求]: 如上面图示 当点开某个一级菜单的时候,其他菜单收起: 子级菜单默认最多5个: 多于5个的显示"展开更多" 点击"展开更多",展开该级所有子级菜单,同 ...
- j-query应用---鼠标悬停不同文字显示不同背景图片banner动画
源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
随机推荐
- bzoj3631 松鼠的新家
Description 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他居然真的住在“树”上.松鼠想邀 ...
- spring boot学习(2) SpringBoot 项目属性配置
第一节:项目内置属性 application.properties配置整个项目的,相当于以前的web.xml: 注意到上一节的访问HelloWorld时,项目路径也没有加:直接是http://loca ...
- 转转转!java继承中的this和super
学习java时看了不少尚学堂马士兵的视频,还是挺喜欢马士兵的讲课步骤的,二话不说,先做实例,看到的结果才是最实际的,理论神马的全是浮云.只有在实际操作过程中体会理论,在实际操作过程中升华理论才是最关键 ...
- [转]NSIS:常量大全
原文链接 http://www.flighty.cn/html/bushu/20140915_251.html ;轻狂志www.flighty.cn ;运行后会在桌面生成NSIS常量大全.txt文件 ...
- call和apply,bind的区别专讲
可以干什么? 改变函数内的this指向: 什么时候使用? 构造函数使用this 为什么使用? 为了生成对象 类(函数名不可以带括号).call() 因为this指向对象,所以call的第一个 ...
- Vcenter5.5+vmwarePowercli6.5+powershell5批量创建虚拟机
另存为xxx.ps1 ##########################通过模版批量部署虚拟机以下内容需要人工定义变量####################### #Vcenter的IP $vce ...
- 在ubuntu中如何向U盘复制粘贴文件 Read-only file system
1. 重新挂载被操作分区的读写权限,如U盘 $ sudo mount -o remount,rw /media/lenmom/00093FA700017B96 #U盘挂载目录,如果是系统中的其他盘, ...
- C++ 无锁队列实现
上源码 #ifndef __GLOBAL_LOCK_FREE_QUEUE_H__ #define __GLOBAL_LOCK_FREE_QUEUE_H__ #include <atomic> ...
- Spark wordcount开发并提交到集群运行
使用的ide是eclipse package com.luogankun.spark.base import org.apache.spark.SparkConf import org.apache. ...
- linnux-shell知识
awk 是单行处理文本 正则: cat test.py | awk '/a/ {print $1}' # 如果test.py中存在a这个字母,就打印所在行的第一列(注意是该列,不是该词).匹配成功, ...