ANDREW UI手机端移动端插件集合效果代码-html代码-BFW代码库

代码语言：html
代码描述：ANDREW UI手机端移动端插件集合效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="renderer" content="webkit" />
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <title>ANDREW UI</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/ionicons.min.css">

    <style>
    
@import url("//repo.bfw.wiki/bfwrepo/css/andrew.mobile.style.css"); /*公共样式引入*/
@import url("//repo.bfw.wiki/bfwrepo/css/andrew.animate.css"); /*动画库样式引入*/
        /******Iconfont图标样式全局设置 （该样式使用iconfont图标库的时候有用）******/
        .iconfont {
            display: inline-block;
            speak: none;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            text-rendering: auto;
            line-height: 1;
        }

        /*********************常用颜色相关样式*********************/
        .c_pink {
            color: #f63d8b !important;
        }
        .c_red {
            color: #d71b1c !important;
        }
        .c_red-orange {
            color: #fc3403 !important;
        }
        .c_orange {
            color: #fd6404 !important;
        }
        .c_orange-yellow {
            color: #fccd05 !important;
        }
        .c_yellow {
            color: #f9fc19 !important;
        }
        .c_yellow-green {
            color: #94fc05 !important;
        }
        .c_green {
            color: #349d05 !important;
        }
        .c_green-blue {
            color: #22d2ae !important;
        }
        .c_blue {
            color: #1495e9 !important;
        }
        .c_blue-violet {
            color: #3504fd !important;
        }
        .c_violet {
            color: #6404fc !important;
        }

        .bg_pink {
            background-color: #f63d8b !important;
        }
        .bg_red {
            background-color: #d71b1c !important;
        }
        .bg_red-orange {
            background-color: #fc3403 !important;
        }
        .bg_orange {
            background-color: #fd6404 !important;
        }
        .bg_orange-yellow {
            background-color: #fccd05 !important;
        }
        .bg_yellow {
            background-color: #f9fc19 !important;
        }
        .bg_yellow-green {
            background-color: #94fc05 !important;
        }
        .bg_green {
            background-color: #349d05 !important;
        }
        .bg_green-blue {
            background-color: #22d2ae !important;
        }
        .bg_blue {
            background-color: #1495e9 !important;
        }
        .bg_blue-violet {
            background-color: #3504fd !important;
        }
        .bg_violet {
            background-color: #6404fc !important;
        }

        .bor_pink {
            border-color: #f63d8b !important;
        }
        .bor_red {
            border-color: #d71b1c !important;
        }
        .bor_red-orange {
            border-color: #fc3403 !important;
        }
        .bor_orange {
            border-color: #fd6404 !important;
        }
        .bor_orange-yellow {
            border-color: #fccd05 !important;
        }
        .bor_yellow {
            border-color: #f9fc19 !important;
        }
        .bor_yellow-green {
            border-color: #94fc05 !important;
        }
        .bor_green {
            border-color: #349d05 !important;
        }
        .bor_green-blue {
            border-color: #22d2ae !important;
        }
        .bor_blue {
            border-color: #1495e9 !important;
        }
        .bor_blue-violet {
            border-color: #3504fd !important;
        }
        .bor_violet {
            border-color: #6404fc !important;
        }

        /*********************常用第三方平台主色调*********************/
        .c_wechat {
            color: #19d100 !important;
        }
        .c_weibo {
            color: #d94945 !important;
        }
        .c_qq {
            color: #4cafe9 !important;
        }
        .c_taobao {
            color: #ff7e00 !important;
        }
        .c_alipay {
            color: #0398e1 !important;
        }
        .c_jd {
            color: #f10215 !important;
        }
        .bg_wechat {
            background-color: #19d100 !important;
        }
        .bg_weibo {
            background-color: #d94945 !important;
        }
        .bg_qq {
            background-color: #4cafe9 !important;
        }
        .bg_taobao {
            background-color: #ff7e00 !important;
        }
        .bg_alipay {
            background-color: #0398e1 !important;
        }
        .bg_jd {
            background-color: #f10215 !important;
        }
        .bor_wechat {
            border-color: #19d100 !important;
        }
        .bor_weibo {
            border-color: #d94945 !important;
        }
        .bor_qq {
            border-color: #4cafe9 !important;
        }
        .bor_taobao {
            border-color: #ff7e00 !important;
        }
        .bor_alipay {
            border-color: #0398e1 !important;
        }
        .bor_jd {
            border-color: #f10215 !important;
        }

        /*********************关闭和删除颜色样式*********************/
        .c_close {
            color: #f16a6a !important;
        }
        .bg_close {
            background-color: #f16a6a !important;
        }
        .bor_close {
            border-color: #f16a6a !important;
        }
        .c_delete {
            color: #e93234 !important;
        }
        .bg_delete {
            background-color: #e93234 !important;
        }
        .bor_delete {
            border-color: #e93234 !important;
        }

        /*********************按钮点击颜色变化效果*********************/
        button.bg_close:active {
            background-color: #f13a3a !important;
        }
        button.c_close.bor_close:active {
            background-color: #f16a6a !important;
        }
        button.bg_delete:active {
            background-color: #b73138 !important;
        }
        button.c_delete.bor_delete:active {
            background-color: #e93234 !important;
        }

        /*********************body区域颜色样式*********************/
        body {
            background-color: #eeeeee;
            color: #333333;
        }

        /*********************头部区域*********************/
        header {
            width: 100%;
            height: 3.2em;
            line-height: 3.2em;
            position: fixed;
            z-index: 6;
            top: 0;
        }
        header>* {
            height: 100%;
        }
        header h1 {
            width: 100%;
            font-size: 1.36em !important;
            font-weight: 600;
        }
        header button {
            cursor: pointer;
            position: absolute;
            top: 0;
        }
        header button, header>* i {
            vertical-align: middle;
        }

        /******内容区域样式******/
        main {
            /*container 容器*/
            overflow-x: hidden;
            overflow-y: auto;
        }

        /*********************模块布局结构*********************/
        .module {
            display: block;
            overflow: hidden;
            position: relative;
        }
        .module li {
            position: relative;
        }
        .module li i {
            line-height: inherit;
        }
        .module li input {
            background-color: transparent !important;
        }
        .module li input.fr {
            width: inherit;
            height: inherit;
            line-height: 100%;
            text-align: right;
            padding: 0;
        }
        .module li input.fl {
            width: inherit;
            height: inherit;
            line-height: 100%;
            text-align: left;
        }
        .module li input.fr + label {
            text-align: right;
            right: 0;
        }
        .module li input.fl + label {
            text-align: left;
            left: 0;
        }
        .list li:last-child , .list dl:last-child {
            /*列表中最后一个线条隐藏*/
            border-bottom: none !important;
        }

        /*********************最新消息图标*********************/
        .new_icon::after {
            content: '●';
            color: red;
            margin: 0 0.5em;
        }

        /*********************底部固定菜单*********************/
        footer, .tail {
            position: fixed;
            overflow: hidden;
            padding: 0;
            bottom: 0;
            width: 100%;
        }
        footer menu {
            display: block;
            height: 3.2em;
            overflow: hidden;
        }
        footer menu i, footer menu em {
            display: block;
        }
        footer {
            z-index: 6;
        }
        .tail {
            z-index: 7;
        }
    </style>
   

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/andrew.theme.default.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/andrew.mobile.plugin.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/andrew.data.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/andrew.mobile.plugin.min.js"></script>

    <script type="text/javascript">

        /*-----------------------------------------------Andrew_Router (路由全局设置）使用方法-------------------------------------------*/
        $(document).ready(function() {
            Andrew_Router({
                //路由配置管理
                Router: true, //是否开启路由（开启路由URL中带#的路径访问页面不刷新页面形式跳转 (开启 true, 停用 false）
                tailClass: ".tail", //内页的底部区域通过设置Class名固定到底部（内页的底部固定区域建议不要使用footer元素）
                changePage: function (hash) {
                    //路由初始化调用和页面变化时的回调
                    Andrew_Menu({
                        //底部菜单的图标以及文字样式变化设置
                        active_color: "c_title", //被选中的文字和图标的颜色
                        menu_icon: new Array(//每个菜单的默认显示图标设置 （为了正常的显示布局最多设置5个）
                            "ion ion-ios-list-outline", //第1个按钮的图标
                            "ion ion-ios-chatbubble-outline", //第2个按钮的图标
                            "ion ion-ios-clock-outline", //第3个按钮的图标
                            "ion ion-ios-browsers-outline" //第4个按钮的图标
                        ),
                        menu_icon_active: new Array(//每个菜单的被选中后的图标设置 （为了正常的显示布局最多设置5个）
                            "ion ion-ios-list", //第1个按钮的图标
                            "ion ion-ios-chatbubble", //第2个按钮的图标
                            "ion ion-ios-clock", //第3个按钮的图标
                            "ion ion-ios-browsers" //第4个按钮的图标
                        )
                    });
                    if (!hash) {
                        //首次访问的页面您要跳转到哪个URL？（前面必须加#符号）
                        location.replace("#");
                    }
                },
                success: function (hash) {
                    //请求加载页面成功后的回调
                    if (hash) {
                        //获取hash的参数值，当前的判断是hash有值的情况（公共插件引入的区域）
                        /*-----Andrew_Loader 使用方法-----*/
                        Andrew_Loader({
                            autoMode: true, //是否开启指定的时间后自动消失功能 (开启 true, 关闭 false）
                            timeToHide: 1000, //毫秒时间设置 (automode必须开启才能有效)
                            iconColor: "#79c34a", //图标颜色设置
                            maskBG: true, //是否开启遮挡背景 (开启 true, 关闭 false）
                            Loader: "load_2" //loading效果选择（load_1~7）
                        });
                        $(".ak-mask").on("click", function () {
                            Andrew_Loader("destroy"); //关闭loading窗
                        });
                    }
                },
                error: function (hash) {
                    //请求加载页面失败后的回调
                    webToast("请求URL:"+hash+" 加载页面失败！", "middle", 3000);
                    setTimeout(function () {
                        //请求加载页面失败时3秒跳转到上一个页面
                        window.history.go(-1);
                    }, 3000);
                }
            });
        });

        /*-----------------------------------------------Andrew_Config (全局设置）使用方法-------------------------------------------*/
        $(function () {
            Andrew_Config({
                //环境配置管理
                MaskStyle: ["style3",
                    "opacity07"],
                //1.所有弹窗背景图案选择（样式style1~6）、2.遮挡层背景的透明度（opacity01~09）
                touchstart: true,
                //是否开启移动端active效果, 建议开启 （元素的class里加touchstart即可用）(使用 true,不使用 false）
                ButtonLink: false,
                //通过元素中加data-href属性的方式跳转界面, 建议开启路由功能后使用。(使用button超链接 true,不使用button超链接 false）
                WechatHeader: false,
                //是否通过微信浏览器访问时自动隐藏应用的头部区域, 可以通用建议开启 (使用隐藏 true, 不使用隐藏 false）
                Topdblclick: true,
                //是否开启点击应用的头部让页面回头顶部 (开启 true, 停用 false）
                fixedBar: true,
                //输入信息时应用的头部绝对固定在屏幕最上方，底部有输入框时不被虚拟键盘遮挡 （不通过微信访问才生效，开启WechatHeader的参数时请关闭该参数）
                Orientation: true,
                //是否开启应用只允许竖屏浏览 (使用 true, 不使用 false）
                Prompt: "为了更好的视觉体验，请在竖屏下进行操作。" //应用横屏是提示文字 (必须开启Orientation的选项才能生效)
            });
        });

        /*-----------------------------------------------Andrew_Form (全局设置）使用方法-------------------------------------------*/
        $(function() {
            $("form").Andrew_Form({
                //输入框右侧加删除文字按钮
                btn_delete: ".plug_Delete",
                //输入文字的删除按钮class名
                btn_delete_ico: "ion ion-android-close",
                //输入文字的删除按钮的图标
                btn_password: ".plug_Password",
                //输入的密码可显示和隐藏功能的按钮class名
                btn_password_ico_hide: "ion ion-.........完整代码请登录后点击上方下载按钮下载查看