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 文字显示更多与收起的更多相关文章

  1. three.js 文字显示不出来

    试了下使用three.js加载文字,首先是报了一个这样的错误: Cross origin requests are only supported for HTTP.” 当时很懵逼,去网上查了查,发现是 ...

  2. Android编程之仿微信显示更多文字的View

    微信朋友圈中,如果好友发表的文字过长,会自动收缩起来,底下有提示,当点击“显示更多”时才会展开. 首先定义布局文件(很简单,不解释): <?xml version="1.0" ...

  3. js点击更多显示更多内容效果

    我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...

  4. Android开发之仿微信显示更多文字的View

    最近开发需求中要模仿微信朋友圈文章的展开收起功能,网上找了找,发现都有问题,于是乎自己在前辈的基础上进行了一定量的修改,下边将源码贴出来供大家参考:1.主Activity布局文件就不粘贴了,很简单,就 ...

  5. 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 的目的是 ...

  6. avalon.js实践 svg地图配置工具

    MVVM模式,在很多复杂交互逻辑下面,有很大的优势.现在相关的框架也很多,现在项目中使用了avalon.js,选择它的原因,是兼容性的考虑,当然也要支持下国内开发大牛,至于性能方面的,没有实际测试过, ...

  7. ExpandableListView实现展开更多和收起更多

    [需求]: 如上面图示 当点开某个一级菜单的时候,其他菜单收起: 子级菜单默认最多5个: 多于5个的显示"展开更多" 点击"展开更多",展开该级所有子级菜单,同 ...

  8. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  9. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

随机推荐

  1. VMware NAT模式下设置网络

    一.虚拟机NAT模式原理 NAT模式在VMware下又称VMnet8.在这种模式下,宿主机有两块网卡,一块是真实的物理网卡(即NAT device),连接Network:一块是 VMware Netw ...

  2. vmware linux NAT CON

    NAT上网 vmware设置nat上网: 1.设置本地可提供上网网卡为共享方式到vmware 8(NAT)如下图: 2.设置本地虚拟网卡vmware8 IP地址如下图: 3.设置vmware网络设置启 ...

  3. 利用x-requested-with判断请求是否是Ajax请求

    在服务器端判断request来自Ajax请求(异步)还是传统请求(同步):         两种请求在请求的Header不同,Ajax 异步请求比传统的同步请求多了一个头参数 1.传统同步请求参数 a ...

  4. 实验七 c字符数组和字符串函数

    7.1 #include<stdio.h>#include<string.h> int main(){ char a[40]; int i; gets(a); //输入字符串进 ...

  5. Spring IOC - 控制反转(依赖注入) - 配置初始化和销毁的方法

    在Spring中如果某个bean在初始化之后,或销毁之前要做一些额外操作可以为该bean配置初始化和销毁的我方法,在这些方法中完成需要的功能. 实验: 通过断点调试模式,测试初始化方法和销毁方法的执行 ...

  6. 廖雪峰Java1-2Java程序基础-2变量和数据类型

    1.变量 变量是可以持有某个基本类型的数值,或者指向某个对象. 变量必须先定义后使用 定义: 变量类型 变量名 = 初始值; 2.java基本数据类型 整数类型:long int short byte ...

  7. 【H3C交换机】cpu各个进程的详细说明

    display cpu-usage命令用来查看设备CPU占用率的统计信息,以及各个进程的cpu占用率. 各个进程详细说明如下,不同软件版本.盒式和框式的cpu进程略有不同,详细信息可以查看手册中的命令 ...

  8. KuDu论文解读

    kudu是cloudera在2012开始秘密研发的一款介于hdfs和hbase之间的高速分布式存储数据库.兼具了hbase的实时性.hdfs的高吞吐,以及传统数据库的sql支持.作为一款实时.离线之间 ...

  9. android studio 简介 (上)

    自从android官方宣布不再提供eclipse adt的更新之后,android studio的推进速度超乎想象得快,不管是github上的源码分享,还是stackoverflow上的问题提问,几乎 ...

  10. Python - Django - 登录页面

    登录页 login.html: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...