您的位置：首页 > 网站推广 > 经验心得  >  mip-accordion 折叠节点详解

mip-accordion 折叠节点详解

 更新时间：2016年12月21日 21:00  点击：1260
本次一聚焦成为大家带来的是mip-accordion 折叠节点详解，mip-accordion 用来支持在 mip折叠隐藏的节点(可记录用户上次行为)，下面请看详细的介绍。

标题 内容
类型 通用
支持布局 responsive,fixed-height,fill,container,fixed 文档
所需脚本 https://mipcache.bdstatic.com/static/v1/mip-accordion/mip-accordion.js

示例

标题加内容形式

<mip-accordionsessions-key="mip_1">

<section>

<h4>下拉第一个</h4>

<p>我说你是人间的四月天；笑声点亮了四面风；轻灵在春的光艳中交舞着变。你是四月早天里的云烟，黄昏吹着风的软，星子在无意中闪，</p>

</section>

<section>

<h4>下拉第二个</h4>

<p>细雨点洒在花前。那轻，那娉婷，你是，鲜妍百花的冠冕你戴着，你是天真，庄严，你是夜夜的月圆。</p>

</section>

<section>

<h4>下拉第三个</h4>

<mip-img layout="responsive"width="400"height="200"src="http://filesimg.111cn.net/2016/12/17/20161217131228631.jpg">

</mip-img>

</section>

</mip-accordion>

标题加内容形式-手动

默认展开的节点此时要加 expanded 属性

<mip-accordion sessions-key="mip_1"type="manual">

<section>

<h4>下拉第一个</h4>

<p>我说你是人间的四月天；笑声点亮了四面风；轻灵在春的光艳中交舞着变。你是四月早天里的云烟，黄昏吹着风的软，星子在无意中闪，</p>

</section>

<section expanded>

<h4>下拉第二个</h4>

<p>细雨点洒在花前。那轻，那娉婷，你是，鲜妍百花的冠冕你戴着，你是天真，庄严，你是夜夜的月圆。</p>

</section>

<section>

<h4>下拉第三个</h4>

<mip-imglayout="responsive"width="400"height="200"

src="http://filesimg.111cn.net/2016/12/17/20161217131228631.jpg">

</mip-img>

</section>

</mip-accordion>

标题切换形式

<mip-accordion sessions-key="mip_2">

<section>

<h4>

<spanclass="show-more">显示更多</span>

<spanclass="show-less">收起</span>

</h4>

<p>显示显示收起收起显示显示收起收起显示显示收起收起显示显示收起收起</p>

</section>

</mip-accordion>

属性

sessions-key

说明：组件唯一标识符,用于区分同个页面中多个mip-accordion以还原用户上次操作

必选项：是

类型：字符串

type

说明：类型，区分自动根据session记录展开节点（automatic），还是手动配置默认展开节点（manual）

必选项：否

类型：字符串

单位：无

取值：automatic, manual

默认值：automatic

expanded

说明：默认展开的 mip-accordion 子节点需要配置此属性，只有在 mip-accordion 的 type 属性值为 manual 时才会生效

必选项：否

类型：字符串

单位：无

取值：无

默认值：无

mip-video视频是什么，mip-video 用来支持在 mip 中增加视频内容，是HTML <video>的直接包装。 功能与兼容性与HTML5
[!--infotagslink--]

相关文章

  • 关于JavaScript中name的意义冲突示例介绍

    在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31

  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31

  • JavaScript中的this关键字使用方法总结

    在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15

  • javascript的事件触发器介绍的实现

    事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07

  • JavaScript中逗号运算符介绍及使用示例

    有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15

  • ActiveX控件与Javascript之间的交互示例

    1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07

  • 详解JavaScript操作HTML DOM的基本方式

    通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23

  • JavaScript获取浏览器信息的方法

    Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24

  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24

  • JavaScript操作URL的相关内容集锦

    ---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 （2）this.locati...2015-10-30

  • javascript实现tab切换的四种方法

    tab切换在网页中很常见，故最近总结了4种实现方法。 首先，写出tab的框架，加上最简单的样式，代码如下： <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08

  • 基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式

    前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中， 私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使...2015-10-30

  • javascript实现数独解法

    生生把写过的java版改成javascript版，第一次写，很不专业，见谅。唉，我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15

  • javascript中的document.open()方法使用介绍

    document.open()方法打开一个新的文档，并用document.write()方法编写文档的内容，然后用document.close()方法关闭文档操作，使其内容显示出来。 例如： 复制代码 代码如下: <script type="text/javascript"> window.onloa...2013-10-13

  • javascript中slice(),splice(),split(),substring(),substr()使用方法

    1.slice（）；Array和String对象都有在Array中 slice(i,[j])i为开始截取的索引值,负数代表从末尾算起的索引值，-1为倒数第一个元素 j为结束的索引值，缺省时则获取从i到末尾的所有元素参数返回： 返回索引值从i到j的数组，原数组...2015-03-15

  • javascript如何实现暂停功能

    本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考，具体如下： Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实现此功能。 javascript作为弱对象语言，一个函数也...2015-11-08

  • JavaScript多并发问题如何处理

    经常在写代码的时候碰到这样的场景：页面初始化时显示loading页，同时启动多个ajax并发请求获取数据，当每个ajax请求返回时结束loading。 举个例子，一个下订单的页面，要查询常用地址信息、商品信息、地市信息…而这些请求都...2015-10-30

  • JavaScript制作淘宝星级评分效果的思路

    小编也是刚开始学JavaScript，觉得淘宝评星效果很棒，于是产生了自己写一个的想法，先给大家分享一下实现效果：现附上自己写的源代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script language="Java...2015-11-24

  • 开启Javascript中apply、call、bind的用法之旅模式

    我希望能够通过这篇文章，能够清晰的提升对apply、call、bind的认识，并且列出一些它们的妙用加深记忆。 apply、call 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为...2015-10-30

  • 浅析javascript中function 的 length 属性

    [1,2,3].length 可以得到 3， "123".length 也可以得到 3，这个略懂js的都知道。但是 eval.length，RegExp.length，"".toString.length，1..toString.length 会得到什么呢？分别得到 1，2，0，1，这些数字代表什么呢？这个是群里很多新...2014-05-31