Article 正文

使用说明

ax-article表示正文内容,在标签内的图片、文字、视频、音频、列表等样式都已经做了预设。已经优化的标签如下:

  • img 最大宽度是100%
  • video 最大宽度是100%
  • audio 最大宽度是100%
  • blockquote 引用
  • h1 一级标题
  • h2 二级标题
  • olli 有序列表
  • ulli 无序列表
  • aspan display属性为inline

伟大的中国

一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。

一、简介

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

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

  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

  中国文化渊远流长、博大精深、绚烂多彩,是东亚文化圈的文化宗主国,在世界文化体系内占有重要地位,由于各地的地理位置、自然条件的差异,人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等,而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。

二、词义

  中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国,自之辟民”,同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。

  “华夏”一词最早见于周朝《尚书·周书·武成》,“华夏蛮貊,罔不率俾”。 《书经》曰:“冕服采装曰华,大国曰夏”。《尚书正义》注:“冕服华章曰华,大国曰夏”。“华”,是指华丽、兴旺;也有说上古华、夏同音,本一字。《左传》曰:“中国有礼仪之大,故称夏;有服章之美,谓之华。” 华是指汉服,夏指行周礼的大国,故中国有礼仪之邦、衣冠上国之美誉。

三、历史

  1. 古代史
  2. 近代史
  3. 现代史

四、地理

  • 中国地势西高东低,山地、高原和丘陵约占陆地面积的67%,盆地和平原约占陆地面积的33%。
  • 几百万年前,青藏高原隆起,地球历史上此一重大地壳运动形成了中国的地貌。
                        <div class="ax-article">
                            <h2>标题</h2>
                            <blockquote>引用</blockquote>
                            <p>内容</p>
                            <video></video>
                            <audio></audio>
                            <ol>
                                <li>列表</li>
                                <li>列表</li>
                            </ol>
                            <ul>
                                <li>列表</li>
                                <li>列表</li>
                            </ul>
                        </div>
                        

出处

一般介于标题和正文中间,包含作者、发布时间、信息来源等。

2020年04月24日 23:16:37
来自:纽约时报

258人查看195条评论
2020年04月24日 23:16:37
来自:纽约时报

258人查看195条评论
编辑:庄自强/2天前
编辑:庄自强/2天前
编辑:庄自强/2天前
                                <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>
                                <div class="ax-break-line"></div>
                                <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>
                                <div class="ax-break-line"></div>
                                <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>
                                <div class="ax-break-line"></div>
                                <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>
                                <div class="ax-break-line"></div>
                                <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>
                        

作者

一般放在正文底部,包含作者、职位、评论数等。本框架做了几个简单的风格供参考使用。

庄自强
新华日报社高级编辑
258人查看195条评论
庄自强
新华日报社高级编辑
258人查看195条评论
庄自强 推荐
新华日报社高级编辑
                                <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>
                                <div class="ax-break-line"></div>
                                <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>
                                <div class="ax-break-line"></div>
                                <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-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
                                    <a href="###" class="ax-btn ax-line ax-danger 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-secondary 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-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
                                    <a href="###" class="ax-btn ax-danger 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-secondary 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-ad ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
                                    <a href="###" class="ax-btn ax-danger 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-secondary 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-ad ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
                                    <a href="###" class="ax-btn ax-danger 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-secondary 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-ad ax-icon"><i class="ax-iconfont ax-icon-qq-f"></i></a>
                                    <a href="###" class="ax-btn ax-text ax-danger 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-secondary 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-ad 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-danger 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-secondary 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-ad 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-danger 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-secondary 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-danger 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-danger 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-ad ax-icon ax-round" target="_blank" share="qzone"><i class="ax-iconfont ax-icon-qzone-f"></i></a>
                                                <a href="###" class="ax-btn ax-danger 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-secondary 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-danger ax-icon ax-round" target="_blank" share="pinterest"><i class="ax-iconfont ax-icon-pinterest-f"></i></a>
                                                <a href="###" class="ax-btn ax-secondary 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-danger 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 data-newPage="false">
                                <a href="###" share="weibo" class="ax-color-danger" 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-danger">点击分享到微博</a>
                                        </div>
                                            
  •                                             new axShare('#callback',{
                                                    onShare:function(name){
                                                        alert(name+'已经分享了!');
                                                    }
                                                });
                                            

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axShare({
          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: '',//回调函数 }); });

本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数,参数层级使用短横区分,比如要设置student:{name:'',school:''}中的name参数,那么在插件元素的data属性中应该这样书写:data-student-name="Lily"。