Article 正文
使用说明
article标签表示正文内容，在标签内的图片、文字、视频、音频、列表等样式都已经做了预设。已经优化的标签如下：
img 最大宽度是100%video 最大宽度是100%audio 最大宽度是100%blockquote 引用h2 二级标题h3 三级标题ol和li 有序列表ul和li 无序列表dl、dt和dd 二级列表a和span display属性为inline
article标签之外常配合使用的标签如下：
h1 一级标题address 来源出处time 发布时间
伟大的中国
来自AXUI编辑部
一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。
一、简介
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。
二、词义
中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。
“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。
三、历史
- 古代史
- 近代史
- 现代史
四、地理
- 中国地势西高东低，山地、高原和丘陵约占陆地面积的67%，盆地和平原约占陆地面积的33%。
- 几百万年前，青藏高原隆起，地球历史上此一重大地壳运动形成了中国的地貌。
五、人口
- 北京
- 2184.3万人
- 上海
- 2475.9万人
- 北京
- 1766.2万人
<div class="ax-padding">
<h1>伟大的中国</h1>
<address>来自AXUI编辑部</address>
<time>2022年4月12日发布</time>
</div>
<article>
<blockquote>
<p>一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。</p>
</blockquote>
<h2>一、简介</h2>
<p> 中国，是以<a href="###">华夏文明</a>为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<img src="https://src.axui.cn/v2.0/public/images/full01.jpg" />
<p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
<video controls="controls">
<source src="https://src.axui.cn/v2.0/public/media/video.mp4" type="video/mp4">
您的浏览器不支持播放该视频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
</video>
<p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
<audio src="https://src.axui.cn/v2.0/public/media/audio.mp3" controls="controls">
您的浏览器不支持播放该音频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
</audio>
<p> 中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
<h2>二、词义</h2>
<p> 中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
<p> “华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
<h2>三、历史</h2>
<ol>
<li>古代史</li>
<li>近代史</li>
<li>现代史</li>
</ol>
<h2>四、地理</h2>
<ul>
<li>中国地势西高东低，山地、高原和丘陵约占陆地面积的67%，盆地和平原约占陆地面积的33%。</li>
<li>几百万年前，青藏高原隆起，地球历史上此一重大地壳运动形成了中国的地貌。</li>
</ul>
<h2>五、人口</h2>
<dl>
<dt>北京</dt>
<dd>2184.3万人</dd>
<dt>上海</dt>
<dd>2475.9万人</dd>
<dt>北京</dt>
<dd>1766.2万人</dd>
</dl>
</article>
出处
一般介于标题和正文中间，包含作者、发布时间、信息来源等。
2020年04月24日 23:16:37
来自：纽约时报
258人查看195条评论
2020年04月24日 23:16:37
来自：纽约时报
258人查看195条评论
<div class="ax-from">
<div class="ax-left">
2020年04月24日 23:16:37<br>来自：纽约时报
</div>
<div class="ax-right"><br><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<div class="ax-from">
<a href="###" class="ax-avatar ax-lg ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a>
<div class="ax-left">
2020年04月24日 23:16:37<br>来自：纽约时报
</div>
<div class="ax-right"><br><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<div class="ax-from">
<div class="ax-left">
编辑：庄自强/2天前
</div>
<div class="ax-right"><a href="###" class=""><i class="ax-iconfont ax-icon-edit"></i> 纠错</a></div>
</div>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<div class="ax-from">
<a href="###" class="ax-avatar ax-xs ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head02.jpg)"></a>
<div class="ax-left">
编辑：庄自强/2天前
</div>
<div class="ax-right"><a href="###" class=""><i class="ax-iconfont ax-icon-edit"></i> 纠错</a></div>
</div>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<div class="ax-from">
<a href="###" class="ax-avatar ax-xs ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head03.jpg)"></a>
<div class="ax-left">
编辑：庄自强/2天前
</div>
<div class="ax-right"><a href="###" class="ax-btn ax-primary ax-sm ax-round"><i class="ax-iconfont ax-icon-plus"></i> 关注</a></div>
</div>
作者
一般放在正文底部，包含作者、职位、评论数等。本框架做了几个简单的风格供参考使用。
<div class="ax-author">
<div class="ax-left">
<div class="ax-title">庄自强</div>
<div class="ax-des">新华日报社高级编辑</div>
</div>
<div class="ax-right"><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<div class="ax-author">
<a href="###" class="ax-avatar ax-md ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a>
<div class="ax-left">
<div class="ax-title">庄自强</div>
<div class="ax-des">新华日报社高级编辑</div>
</div>
<div class="ax-right"><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<hr/>
<div class="ax-break"></div>
<div class="ax-author">
<a href="###" class="ax-avatar ax-md ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head02.jpg)"></a>
<div class="ax-left">
<div class="ax-title">庄自强 <span class="ax-badge ax-badge-success ax-badge-border">推荐</span></div>
<div class="ax-des">新华日报社高级编辑</div>
</div>
<div class="ax-right"><a href="###" class="ax-btn ax-primary ax-round"><i class="ax-iconfont ax-icon-plus"></i> 关注</a></div>
</div>
点赞
一般放在正文底部，有默认和已点赞两种状态。ax-good表示点赞，ax-done表示已经赞过了。
<div class="ax-good">
<a href="###"><i class="ax-iconfont ax-icon-good-f"></i><span class="num">0</span><span class="ax-text"></span></a>
</div>
<div class="ax-good ax-done">
<a href="###"><i class="ax-iconfont ax-icon-good-f"></i><span class="ax-num">16</span><span class="ax-text">您已经点赞了！</span></a>
</div>
借助框架的ax-btn类和ax-line类制作点赞按钮，用户可自由发挥。
<a href="###" class="ax-btn ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-round ax-long"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-long"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-round ax-long ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-long ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
分享按钮
分享按钮是根据框架普通按钮制作的，详见按钮制作方法：按钮。另外可以结合layout布局制作等宽均分的分享按钮，用户可自由发挥。
<!--ax-btn-->
<div class="ax-share">
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-line-->
<div class="ax-share">
<a href="###" class="ax-btn ax-line ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-line ax-question ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-line ax-error ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-line ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-line ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-line ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn加颜色-->
<div class="ax-share">
<a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-question ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-error ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn大-->
<div class="ax-share">
<a href="###" class="ax-btn ax-success ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-question ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-error ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-info ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn小-->
<div class="ax-share">
<a href="###" class="ax-btn ax-success ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-question ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-error ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-info ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn ax-text-->
<div class="ax-share">
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn ax-text颜色-->
<div class="ax-share">
<a href="###" class="ax-btn ax-text ax-success ax-icon"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-text ax-question ax-icon"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-text ax-error ax-icon"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-text ax-primary ax-icon"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-text ax-primary ax-icon"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-text ax-info ax-icon"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--layout-->
<div class="ax-row ax-share">
<div class="ax-col"><a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-question ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-error ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a></div>
</div>
<!--layout定宽-->
<div class="ax-row ax-share" style="width: 600px;">
<div class="ax-col"><a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-question ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-error ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a></div>
</div>
分享插件
百度分享插件已经不再维护也不再提供使用，本团队在浏览github中意外发现国人自主创作的分享插件share.js，觉得思路挺好，想到中国的网站喜欢使用分享平台功能，于是借鉴了精髓创作了axShare。
使用具有axShare属性的div作为父层，内部放置具有share="*"属性的a作为子元素，即可实现分享功能。
<div axShare>
<a href="###" class="ax-btn ax-error ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
</div>
分享按钮只要是a标签即可，不管是文字还是图标均可。
<div axShare>
<a href="###" class="ax-btn ax-error ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
</div>
分享平台
目前支持以下平台分享：
- qq
- weibo
- qzone
- wechat
- facebook
- twitter
- google
- pinterest
- tumblr
如果需要使用微信二维码分享功能，请在页面中ax.js前面加载qrcode.min.js
-
<div class="ax-share ax-align-left-center">
分享到：
<div axShare data-url="https://www.axui.cn">
<a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="qq"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-question ax-icon ax-round" target="_blank" share="qzone"><i class="ax-iconfont ax-icon-qzone-f"></i></a>
<a href="###" class="ax-btn ax-error ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-success ax-icon ax-round" share="wechat"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="facebook"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-info ax-icon ax-round" target="_blank" share="twitter"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="google"><i class="ax-iconfont ax-icon-google-f"></i></a>
<a href="###" class="ax-btn ax-error ax-icon ax-round" target="_blank" share="pinterest"><i class="ax-iconfont ax-icon-pinterest-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="tumblr"><i class="ax-iconfont ax-icon-tumblr-f"></i></a>
</div>
</div>
-
<script src="https://src.axui.cn/v2.0/dist/plugins/qrcode/v1.0.0-ax/qrcode.min.js"></script>
分享前窗口
点击分享按钮直接调走会显得突兀，有时候用户仅仅是好奇点一下而已并不是真正想跳转页面，所以在跳转前使用对话框询问以便于撤销分享是蛮有用的。
如果要启用分享前对话框询问，值需要再分享按钮上加上confirm属性即可。
<div axShare>
<a href="###" class="ax-btn ax-error ax-icon ax-round" target="_blank" share="weibo" confirm><i class="ax-iconfont ax-icon-weibo-f"></i></a>
</div>
页面跳转方式
用户可对分享按钮使用target="*"属性实现新页面跳转或当页跳转。
也可以使用newPage属性修改跳转方式，默认为true即新页面跳转分享，可设为false当页跳转分享。
<div axShare='newPage:false'>
<a href="###" share="weibo" class="ax-color-error" confirm>点击分享到微博</a>
<a href="###" share="qq" class="ax-color-primary">点击分享到QQ</a>
</div>
回调函数
本插件支持onShare回调函数，在点击分享按钮后触发。支持参数name，也就是平台名称。
-
<div id="callback">
<a href="###" share="weibo" target="_blank" class="ax-color-error">点击分享到微博</a>
</div>
-
new axShare('#callback',{
onShare:function(name){
alert(name+'已经分享了！');
}
});
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axShare({
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
source: '',//类似分享页面的标题
title: '',//分享页面的标题
des: '',//分享页面的简介
url: window.location.href,//分享的页面，默认是当前页面的网址，比如：http://www.axui.cn/examples/index.html
image: '',//分享的图片，数量一张
key: '',//微博的key，仅微博分享使用
origin: window.location.origin,//根域名，默认是当前页面的根域名,比如：http://www.axui.cn
qrTitle: '在微信里点击“发现”，再点击“扫一扫，”
便可将本文分享至朋友圈。
',//微信分享中的文字
qrSize: 180,//QR系统中尺寸单位是px
newPage: true,//点击后是否在新页面打开分享页面，默认打开新页面
dialogText: '确定分享本页面？',//跳转提示窗口的文字
onShare: '',//回调函数
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"
