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. bzoj2464 小明的游戏

    Description 小明最近喜欢玩一个游戏.给定一个n * m的棋盘,上面有两种格子#和@.游戏的规则很简单:给定一个起始位置和一个目标位置,小明每一步能向上,下,左,右四个方向移动一格.如果移动 ...

  2. mysql分区表之一:分区原理和优缺点【转】

    1.分区表的原理 分区表是由多个相关的底层表实现,这些底层表也是由句柄对象表示,所以我们也可以直接访问各个分区,存储引擎管理分区的各个底层表和管理普通表一样(所有的底层表都必须使用相同的存储引擎),分 ...

  3. 杂项-frame:Rails框架

    ylbtech-杂项-frame:Rails框架 Rails框架首次提出是在2004年7月,它的研发者是26岁的丹麦人David Heinemeier Hansson.不同于已有复杂的Web 开发框架 ...

  4. ubuntu14.04 login loop issue

    无法进入图形界面的所有问题几乎都碰到了,可惜尝试所有办法,还是各种broken packages 等,无法重装 ubuntu-desktop 成功. 耽误了2天,果断决定重装系统算了..尽管很多软件, ...

  5. 《Linux内核精髓:精通Linux内核必会的75个绝技》一HACK #19 ext4的调整

    HACK #19 ext4的调整 本节介绍可以从用户空间执行的ext4调整.ext4在sysfs中有一些关于调整的特殊文件(见表3-6).使用这些特殊文件,就不用进行内核编译.重启,直接从用户空间确认 ...

  6. Jenkins Error cloning remote repo 'origin', slave node

    使用jenkins pull git上的代码,在job中配置好源码管理后,构建时出现如题错误提示: 网上的资料几乎都是在说SSH的配置问题,因为博主项目建立在本地的git服务器上,所以在源码管理中选择 ...

  7. Bogart gData.vb

    Imports System Imports System.Data Imports System.Data.OleDb Imports Microsoft.VisualBasic Imports S ...

  8. C++官方文档-this

    #include <iostream> using namespace std; class Dummy { public: int x; Dummy() : x() { } ; Dumm ...

  9. python进度条

    #!/usr/bin/env python# -*- coding:utf-8 -*- import urllib url = "http://www.163.com/" #htm ...

  10. windows脚本测试

    一. C:\Users\smc892h>systeminfo | findstr 物理内存物理内存总量:     12,167 MB可用的物理内存:   2,103 MB 二.截取字段 参考网站 ...