More 查看更多

使用说明

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

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

                            <div axMore data-length="">文字</div>

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史，距今约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方法更新参数，支持回调函数（无参数，可省略）。更新

            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')"

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

                                            var contentInstance = new axMore('#content');
                                            contentInstance.updateContent('中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。', function () {
                                                alert('更新了！');
                                            });

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

监听方法

借鉴jQuery的写法，本插件有若干监听方法，基本写法是：instance.on('load',function(){})；具体事件说明如下：

load：初始化渲染完成执行
fold：折叠后执行
unfold：展开后执行
updated：更新了内容或参数后执行

                                            var onInstance = new axMore('#on');
                                            onInstance.on('unfold',function(){
                                                alert('已经展开！');
                                            }).on('fold',function(){
                                                alert('已经折叠！');
                                            });

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

销毁实例

使用destroy方法可销毁实例，支持回调函数（无参数，可省略）。销毁

            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>

参数汇总

名称	类型	默认值	说明
length	string	60	默认60个字符；等同于data-length=''属性；标签属性优先，js属性次之，建议不要叠加使用。
textFold	text	收起	展开时候的指示文字，等同于标签data-textFold=''属性；标签属性优先，js属性次之，建议不要叠加使用。
textUnfold	text	全部	折叠时候的指示文字，等同于标签data-textUnfold=''属性；标签属性优先，js属性次之，建议不要叠加使用。
classFold	string	ax-color-primary	折叠时候按钮的类名，等同于标签data-classFold=''属性；标签属性优先，js属性次之，建议不要叠加使用。
classUnfold	string	ax-color-primary	展开时候按钮的类名，等同于标签data-classUnfold=''属性；标签属性优先，js属性次之，建议不要叠加使用。

如果在MORE元素上通过data-*使用属性，层级使用短横区分，比如要设置length，那么在MORE元素的data属性中应该这样书写：data-length="60"。

操作方法

名称	说明	参数说明	回调函数
init()	初始化	无参数	无回调函数
update(setting, callback)	更新所有参数	setting是用户自定义参数，是一个对象；callback是回调函数，可不填	function(){} 无参数
updateContent(text, callback)	更新内容	text是内容元素，可以是id、字符串或Dom；callback是回调函数，可不填	function(){} 无参数
destroy(callback)	销毁实例	无参数	function(){} 无参数
on(type, handler)	监听实例	type是监听事件，具体可看前文的：监听方法；handler是回调函数	function(){} 无参数
axInstance(axMores, name)	获取实例	axMores是当页创建的所有实例；name是指插件元素axMore属性的name值	无回调函数

在回调函数中this均指向实例本身，所以在回调函数中可默认使用如下变量：

this：实例本身
this.targetDom：实例的Dom
this.options：实例的参数