Amaze UI

Web 组件

Footer 页脚


用于页面底部显示版本切换、版权等信息。

<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
  <div class="am-footer-switch">
    <span class="am-footer-ysp" data-rel="mobile" data-am-modal="{target: '#am-switch-mode'}">云适配版</span>
    <span class="am-footer-divider">|</span>
    <a id="godesktop" data-rel="desktop" class="am-footer-desktop"
    href="#">电脑版</a>
  </div>
  <div class="am-footer-miscs ">
    <p><a href="http://www.yunshipei.com/" title="诺亚方舟" target="_blank">诺亚方舟</a>提供技术支持</p>
    <p>CopyRight©2014 AllMobilize Inc.</p>
    <p>京ICP备13033158</p>
  </div>
</footer>
<div id="am-footer-modal" class="am-modal am-modal-no-btn am-switch-mode-m am-switch-mode-m-default">
  <div class="am-modal-dialog">
    <div class="am-modal-hd am-modal-footer-hd">
      <a href="javascript:void(0)" data-dismiss="modal" class="am-close am-close-spin"
      data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">您正在浏览的是
      <span class="am-switch-mode-owner">云适配</span>
      <span class="am-switch-mode-slogan">为您当前手机订制的移动网站。</span>
    </div>
  </div>
</div>

使用方法

直接使用

  • 拷贝演示中的代码,粘贴到 Amaze UI HTML 模板(点此下载<body> 区域;
  • 将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 footer,使用细节参照折叠面板组件

云适配 WebIDE

  • 将组件拖入编辑界面;
  • 点击右侧面板里的【数据采集】按钮,按以下格式采集数据。
var data = {
  "lang": context.__lang,     // 默认,无需改动。若改动赋值为“en”则为英文,否则为中文!
  "owner": "",                // 网站名字 可以填写公司名称或者其他内容。
  "companyInfo": [
    {                       // 网站信息
      "detail": ""        // 必要时可加 a 标签跳转到某个页面,网站的详细信息,在页面中的footer部分就可以看到这里的文字
    },
    {
      "detail": ""        // 必要时可加 a 标签跳转到某个页面,网站的详细信息,在页面中的footer部分就可以看到这里的文字
    }
  ]
};
return data;

数据说明:

  • switchName:可写:手机版等,默认 云适配版
  • owner:网站名字;
  • slogan:弹出层广告语;
  • companyInfo:填写公司相关信息,此为一对象数组,每一条信息通过对detail赋值来实现!

Add to Homescreen

  • 目前仅支持 iOS,需要在 header 里设置 icon。

参考链接:

添加到桌面图标功能默认开启,可以通过设置以下代码禁用:

window.AMUI_NO_ADD2HS = true;

数据接口

{
  "id": "",

  "className": "",

  "theme": "default",

  "options": {
     "modal": "",
     "addToHS": false,
     "techSupprtCo": "",
     "techSupprtNet": "",
     "textPosition": ""
  },

  "content": {
    "lang": "",
    "switchName": "",
    "owner": "",
    "slogan": "",
    "companyInfo": [
      {
        "detail": ""
      }
    ]
  }
}
侧栏导航
×
Amaze UI 微信
在微信上关注我们