ANDREW UI手机端移动端插件集合效果代码
代码语言：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-eye-disabled",
//输入的密码可显示和隐藏功能的按钮(隐藏按钮图标)
btn_password_ico_show: "ion ion-eye",
//输入的密码可显示和隐藏功能的按钮(显示按钮图标)
placeholder: true,
//是否开启点击输入框后提示文字消失功能，建议开启 (开启 true, 停用 false）
keyboard: true,
//是否输入框内设置的maxlength自定的限制字数后手机键盘自动消失或者input元素加readonly属性不显示键盘，建议开启 (开启 true, 停用 false）
passchek: ".plug_PassCheck",
//两次输入密码确认时需要加的class名
passCallback: function() {
//通过回调进入两次输入的密码不一致状态 （passchek的参数空值时不走当前的回调）
console.log("两次输入的密码不一致");
$ak.alert("两次输入的密码必须一致！", {
icon: "error", //图标类型（warning，error，info，question，success）
button_ok: "确定", //弹窗的确定按钮文字
title: "提示" //弹窗的标题文字
});
},
butCallback: function(form) {
//点击提交按钮后的回调，获取当前表单的元素
console.log(form);
}
});
});
/*-----------------------------------------------Andrew_Textarea (全局设置）使用方法-------------------------------------------*/
$(function () {
$(".plug_textarea").Andrew_Textarea({
//多行输入框设置
maxlength: 200,
//文字最多输入限制
rows: "6",
//输入框的行高
topButton: "c_title",
//提交按钮在头部显示后的样式 （设置为空，代表不使用该功能）
onTextVal: function(val) {
//通过回调获取实时输入的值
console.log(val);
},
TopbtnOK: function(val) {
//通过回调获取点击头部的提交按钮后的最终值
console.log(val);
webToast("提交成功！", "middle", 2000);
}
});
});
/*-----------------------------------------------Andrew_Lazyload (全局设置）使用方法-------------------------------------------*/
$(function() {
$("img").Andrew_Lazyload({
effect: "fadeIn" //图片延迟加载效果
});
});
/*-----------------------------------------------Andrew_Slider 使用方法-------------------------------------------*/
$(function() {
$(".plug_slider").Andrew_Slider({
start: 1,
//默认显示的图片排号
speed: 500,
//图片切换的速度
interval: 5000,
//图片切换间隔毫秒
autoPlay: true,
//幻灯片是否自动播放（true，false）
dotShow: true,
//是否显示幻灯片位置按钮（true，false）
arrShow: false,
//是否显示左右切换按钮（true，false）
dotClass: "fl wh_08em bg_gray_333 border bor_white mr_05em bor_rad_50 pointer",
//底部图片位置的样式设置
arrClass: "wh_24em c_white bg_black05 bor_rad_50 pointer",
//左右切换按钮的样式设置
ActiveClass: "bg_title",
//底部图片位置的当前样式
afterSlider: function(num) {
//回调获取当前的数
//console.log(num);
}
});
});
/*-----------------------------------------------Andrew_ScrollFixed 使用方法-------------------------------------------*/
$(function () {
$(".plug_tabs nav").Andrew_ScrollFixed({
ScrollFixed: true,
//是否开启指定的元素区域固定在屏幕的上方位置 (开启 true, 关闭 false）
zPosition: "4",
//浮动元素的z-index数值
animated: "slideInDown ani_05s",
//滚动后的显示的动画效果 (css动画库：andrew.animate.css)
top: 0 //屏幕上方和滑动后的元素固定的上下间距
});
});
/*-----------------------------------------------Andrew_Tabs 使用方法-------------------------------------------*/
$(function () {
$(".plug_tabs").Andrew_Tabs({
curDisplay: 1,
//当前显示哪张
autoPlay: false,
//自动播放 (true/false)
playDelay: 2000,
//自动播放延迟时间 （必选 autoPlay: true）
boxheight: false,
//切换内容区域的高度设置px；建议vertical方式时使用 （不使用高度：false）
navlength: 4,
//切换导航的数量设置（文字屏幕对齐）
fullclass: "bor_bottom2 bor_title c_title minus_mt_1px",
//被选中状态的class
emptyclass: "bor_bottom bor_gray_ddd",
//未选中状态的class
mouse: "click",
//鼠标事件 (click/hover)
touchmode: true,
//是否开启触屏滑动切换功能 (true/false)
changeMethod: "horizontal",
//切换方式 (default/vertical/horizontal/opacity)
callback: function(ele) {
//通过回调获取当前显示的元素
console.log(ele);
}
});
});
$(function () {
$(".plug_tabs_sub").Andrew_Tabs({
curDisplay: 1,
//当前显示哪张
autoPlay: false,
//自动播放 (true/false)
playDelay: 2000,
//自动播放延迟时间 （必选 autoPlay: true）
boxheight: false,
//切换内容区域的高度设置px；建议vertical方式时使用 （不使用高度：false）
navlength: 0,
//切换导航的数量设置（文字屏幕对齐）
fullclass: "bor_bottom2 bor_title c_title minus_mt_1px",
//被选中状态的class
emptyclass: "bor_bottom bor_gray_ddd",
//未选中状态的class
mouse: "click",
//鼠标事件 (click/hover)
touchmode: false,
//是否开启触屏滑动切换功能 (true/false)
changeMethod: "horizontal",
//切换方式 (default/vertical/horizontal/opacity)
callback: function(ele) {
//通过回调获取当前显示的元素
console.log(ele);
}
});
});
/*-----------------------------------------------Andrew_Ajax 使用方法-------------------------------------------*/
$(function () {
$("#plug_tab1").each(function() {
//默认显示Ajax请求后的页面
Andrew_Ajax({
to: "#plug_ajax1", //加载内容的区域(定义ID)，如果只加载数据不加载HTML页面，把这个to参数设为空。
type: "POST", //GET或POST
url: "./ajax/tab_test1.html", //需要加载的URL
data: {}, //传入参数
async: false, //异步方式：true，同步方式：false
success: function (flag) {
//ajax请求加载成功后的回调 （状态：flag=true）
console.log(flag);
webToast("请求加载数据成功！", "middle", 2000);
},
error: function (flag) {
//ajax请求加载失败后的回调 （状态：flag=false）
console.log(flag);
webToast("请求加载数据失败！", "middle", 2000);
}
});
});
});
$(function () {
$("#plug_tab1").click(function() {
//通过点击事件后请求加载Ajax页面
Andrew_Ajax({
to: "#plug_ajax1", //加载内容的区域(定义ID)，如果只加载数据不加载HTML页面，把这个to参数设为空。
type: "POST", //GET或POST
url: "./ajax/tab_test1.html", //需要加载的URL
data: {}, //传入参数
async: false, //异步方式：true，同步方式：false
success: function (flag) {
//ajax请求加载成功后的回调 （状态：flag=true）
console.log(flag);
webToast("请求加载数据成功！", "middle", 2000);
},
error: function (flag) {
//ajax请求加载失败后的回调 （状态：flag=false）
console.log(flag);
webToast("请求加载数据失败！", "middle", 2000);
}
});
});
});
$(function () {
$("#plug_tab2").click(function() {
//通过点击事件后请求加载Ajax页面
Andrew_Ajax({
to: "#plug_ajax2", //加载内容的区域(定义ID)，如果只加载数据不加载HTML页面，把这个to参数设为空。
type: "POST", //GET或POST
url: "./ajax/tab_test2.html", //需要加载的URL
data: {}, //传入参数
async: false, //异步方式：true，同步方式：false
success: function (flag) {
//ajax请求加载成功后的回调 （状态：flag=true）
console.log(flag);
webToast("请求加载数据成功！", "middle", 2000);
},
error: function (flag) {
//ajax请求加载失败后的回调 （状态：flag=false）
console.log(flag);
webToast("请求加载数据失败！", "middle", 2000);
}
});
});
});
$(function () {
$("#plug_tab3").click(function() {
//通过点击事件后请求加载Ajax页面
Andrew_Ajax({
to: "#plug_ajax3", //加载内容的区域(定义ID)，如果只加载数据不加载HTML页面，把这个to参数设为空。
type: "POST", //GET或POST
url: "./ajax/tab_test3.html", //需要加载的URL
data: {}, //传入参数
async: false, //异步方式：true，同步方式：false
success: function (flag) {
//ajax请求加载成功后的回调 （状态：flag=true）
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0