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的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
随机推荐
- Zeroc Ice 3.6.1 生成 vs2015 c++ 版本库及相关配置
背景: 目前发布的Ice最新版本为3.6.0,使用的vs2013编译的,vs2015版本正在开发,发布只是时间问题: 不过官方实在给力,github上的源码已经支持vs2015编译了.源码版本为3.6 ...
- excel 怎么添加超链接
1.只能对单元格添加超链接 2.如果要对单元格里面个别字做成超链接,可以使用图形工具,设置一个图形在里面,对这个图形做超链接 参考:https://jingyan.baidu.com/article/ ...
- 杂项-Java:jar 包与 war 包介绍与区别
ylbtech-杂项-Java:jar 包与 war 包介绍与区别 1.返回顶部 1. 做Java开发,jar包和war包接触的挺多的,有必要对它们做一个深入的了解,特总结整理如下: 1.jar包的介 ...
- 9-16Jenkins-4节点
1.Jenkins-系统管理-全局安全配置,设置代理端口和协议类型,保存 2.Jenkins-系统管理-节点管理,建立节点 设置节点名称,节点工作目录.标签.用法.启动方式设置如下: 标签用于管理节点 ...
- 战争迷雾Fog Of War
参考:https://forums.unrealengine.com/community/community-content-tools-and-tutorials/26436-tutorial-fo ...
- unicode 转码 ansi
#include "stdafx.h"#include <Windows.h>#include <stdio.h> HRESULT SomeCOMFunct ...
- javaScript语言的预编译与运行
JS代码执行的过程: 1.预编译 ---- 事先对js代码做一个预处理 2.代码运行---开始执行JS代码. JS编程: 1.加载DOM的最好在/BODY之前 2.与DOM渲染无关的放在Head里面 ...
- /PROC/MEMINFO之谜
网站转自:http://linuxperf.com/?p=142 非常技术的网站,够看上一阵子的(一篇文章) /proc/meminfo是了解Linux系统内存使用状况的主要接口,我们最常用的”fre ...
- nodejs中https请求失败,无报错
今天群里一位同学在做练习的时候,采用https例子: // curl -k https://localhost:8000/ const https = require('https'); const ...
- JS 传各种文件到后端
由于要写一个前端上传文件按钮功能,本人前端是小白,所以在网上搜索了许多,发现FileReader非常好用. 不多BB,直接来. 1,前端只需要一个input标签, <input type=&qu ...