More 查看更多

使用说明

当文字较多或者空间较小的条件下,通常会折叠更多文字,末尾以“查看更多”结尾。

使用axMore属性即可使用插件,对块状元素和行内元素均有效。默认显示60个字,简单使用length属性可以控制显示字数。

                            <div axMore='length:60'>文字</div>
                        
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

JS调用

另外用户可通过js进行参数设置。根据自己需要设置字符长度,除了字符长度之外还可以设置“更多”按钮的文字和样式,使用方法如下:

                            <script type="javascript">
                            let instance = new axMore('#id',{
                                length: 60,
                                textFold: '展开',
                                textUnfold: '收起',
                                classFold: 'ax-color-primary',
                                classUnfold: 'ax-color-primary',
                            });
                            </script>
                        

更新参数

本插件可使用update方法更新参数,支持回调函数(无参数,可省略)。更新

中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
  •             var paraInstance = new axMore('#para');
                var btnPara = document.querySelector('#btnPara');
                btnPara.onclick = function () {
                    paraInstance.update({
                        length: 80,
                        textFold: 'More',
                        textUnfold: 'Close',
                    }, function () {
                        alert('更新了!');
                    });
                }
                                        
  •                                             <div id="update">
                                                    中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
                                                </div>
                                        

更新内容

如果插入异步内容,可使用updateContent方法初始化插件,第一个参数是传入更新的内容,可以是以下三种方式:

  • 1、id。可以是页面中的id,填写id后将获取该id下dom的内容。格式:"#id"
  • 2、字符串。纯文本字符串作为参数传入。格式:"abc123"
  • 3、DOM。可以是页面的节点对象。格式:"document.querySelector('#id')"

第二个参数是该方法的回调函数,该回调函数无参数,可省略。更新

中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
  •                                             var contentInstance = new axMore('#content');
                                                contentInstance.updateContent('中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。', function () {
                                                    alert('更新了!');
                                                });
                                        
  •                                             <div id="update">
                                                    中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
                                                </div>
                                        

监听方法

本插件有若干监听方法,以on为关键字,实例后监听和在参数中监听效果相同。基本写法是:instance.on('load',function(){});具体事件说明如下:

  • load:初始化渲染完成执行
  • fold:折叠后执行
  • unfold:展开后执行
  • updated:更新了内容或参数后执行
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
  •                                             var onInstance = new axMore('#on');
                                                onInstance.on('unfold',function(){
                                                    alert('已经展开!');
                                                }).on('fold',function(){
                                                    alert('已经折叠!');
                                                });
                                        
  •                                             <div id="on">
                                                    中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
                                                </div>
                                        

销毁实例

使用destroy方法可销毁实例,支持回调函数(无参数,可省略)。销毁

中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
  •             var destroyInstance = new axMore('#destroy');
                var btnDestroy = document.querySelector('#btnDestroy');
                btnDestroy.onclick = function () {
                    destroyInstance.destroy(function () {
                        alert('实例销毁了!');
                    });
                }
                                        
  •                                             <div id="destroy">
                                                    中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。
                                                </div>
                                        

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axMore('#id',{
        insName: '',//实例名称,字符串格式;如果填写了实例名称,那么该实例会被添加到实例合集当中,通过axInstance方法可获取本实例,详细请查看:ax-utils-instance.php
        length: 60,//文字数量,默认60个字
        textFold: '展开',//按钮展开状态文字
        textUnfold: '收起',//按钮折叠状态文字
        classFold: 'ax-color-primary',//按钮折叠状态className
        classUnfold: 'ax-color-primary',//按钮展开状态className
        breakpoints: {},//使用断点以适配终端,详情查看ax-utils-other.php页面
      });
});
                        
以axMenu插件为例,如果在元素上通过ax*使用属性,需要使用类似json的写法,属性不需要使用引号,如果值是字符串需要使用引号包裹,如果值是数字、布尔值、null或undefined不需要引号;比如要设置active,那么在元素的ax*属性中应该这样书写:axMenu="active:2"