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的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
随机推荐
- shell 5参数
shell传递参数 我们可以在执行shell脚本时,向脚本传递参数. $n n代表数字.0表示执行的脚本名称,1表示第1个参数,2是第2个参数 $# 传递到脚本的参数个数 $$ 脚本运行的当前进程的I ...
- CentOS 静态IP设置&修改网卡名
一.CentOS版本查看的方法 1. lsb_release -a (若报命令找不到,直接yum install lsb –y) 2. cat /etc/redhat-release 二.CentOS ...
- 1085 Perfect Sequence (25 分)
1085 Perfect Sequence (25 分) Given a sequence of positive integers and another positive integer p. T ...
- nginx配置详解(转)
Nginx 配置文件详解 user nginx ; #用户 worker_processes 8; #工作进程,根据硬件调整,大于等于cpu核数 error_log logs/nginx_error. ...
- ioi2016aliens
/* 首先考虑点在直线的两边效果一样 于是转移到一边 之后发现当我们覆盖某些点时,有其他的一些点一定会被覆盖 我们找出所有必须覆盖的点 之后我们发现我们找到的这些点 将其按照x递增排序 那么y也是递增 ...
- js常见兼容
滚动条的兼容写法(谷歌chrome) document.documentElement.scrollTop || document.body.scrollTop 阻止浏览器默认行为的兼容写法 e ...
- 并发基础(八) java线程的中断机制
文章转载自 详细分析Java中断机制 1. 引言 当我们点击某个杀毒软件的取消按钮来停止查杀病毒时,当我们在控制台敲入quit命令以结束某个后台服务时--都需要通过一个线程去取消另一个线程正在执行的任 ...
- navicate for mysql mac 含注册机 亲测可用
百度网盘:https://pan.baidu.com/s/1hrXnRes
- Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目
Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目 Spring Tool Suite 是一个带有全套的Spring相关支持功能的Eclipse插件包. ...
- MVC,MVP 和 MVVM 模式如何选择?
转摘:http://www.linuxidc.com/Linux/2015-10/124622.htm 前言 做客户端开发.前端开发对MVC.MVP.MVVM这些名词不了解也应该大致听过,都是为了解决 ...