分享一款基于aui框架的图文发布界面
本文出自APICloud官方论坛，
感谢论坛版主 川哥哥 的分享。
分享一款基于aui框架的图文发布界面，可以添加多张图可以删除，类似qq空间发布说说，没做服务器后端，只演示前端操作。
需要用到UIMediaScanner模块
项目源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style>
.sm textarea {
color: #979797;
height: 6.4rem
}
.aui-list {
border-top: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.aui-list {
border: none;
background-size: 100% 0px;
}
}
.aui-list .aui-list-item:active {
background-color: #FFFFFF;
}
.imglist {
width: 100%;
clear: both;
margin: 1rem auto;
}
.imglist img {
width: 4rem;
height: 4rem;
}
.add {
width: 4rem;
height: 4rem;
background: url(../res/add.png) no-repeat;
background-size: 100% 100%;
float: left;
margin-right: 1rem;
}
.addimg {
float: left;
height: 4rem;
width: 4rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
.addimg img {
width: 4rem;
height: 4rem;
}
.addimg .x img {
width: 0.8rem;
height: 0.8rem;
position: relative;
top: -4.4rem;
left: -0.5rem;
}
/*遮罩层*/
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: none;
}
.alert {
width: 12rem;
height: 7.42rem;
border-radius: 0.2rem;
background: #fff;
font-size: 0.75rem;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -6rem;
margin-top: -4.2rem;
}
.alert p:nth-child(1) {
line-height: 5rem;
border-bottom: 1px solid #EBEBEB;
font-size: 0.9rem;
}
.alert p:nth-child(2) span {
display: inline-block;
width: 49%;
height: 2.4rem;
line-height: 2.4rem;
float: left;
font-size: 0.8rem;
}
.cancel {
border-right: 1px solid #EBEBEB;
color: #00BB3D;
}
.sure {
color: #F60;
}
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav">
<a class="aui-btn aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> 返回</a>
<div class="aui-title">
新生指引
</div>
<a class="aui-pull-right" >发 表</a>
</header>
<div class="aui-card-list">
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-form-list">
<li class="aui-list-item">
<div class="aui-list-item-inner sm">
<textarea id="sm" placeholder="说点什么吧" ></textarea>
</div>
</li>
<li class="aui-list-item">
<div class="imglist">
<div class="add" onclick="upimg()"></div>
</div>
<div class="mask">
<div class="alert">
<p>
确定要删除这张图片吗？
</p>
<p>
<span class="cancel">取消</span>
<span class="sure">确定</span>
</p>
</div>
</div>
</li>
</ul>
<ul class="aui-list aui-list-in">
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-location aui-text-success"></i>
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-title">
地址
</div>
<div class="aui-list-item-right">
<input type="checkbox" checked class="aui-switch" id="ts">
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function() {
$api.fixStatusBar($api.dom('.aui-bar'));
};
function upimg() {
api.actionSheet({
title : '上传照片',
cancelTitle : '取消',
buttons : ['拍照', '相册']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);
}
});
}
function getPicture(sourceType) {
if (sourceType == 1) {
api.getPicture({
sourceType : 'camera',
encodingType : 'png',
mediaValue : 'pic',
allowEdit : false,
saveToPhotoAlbum : false
}, function(ret, err) {
var imgs = $api.dom(".imglist");
var imgList = document.getElementsByClassName("addimg");
if (!ret.data.length) {
} else {
if (imgList.length >= 6) {
api.toast({
msg : '不能再添加啦',
duration : 3000,
location : 'bottom'
});
} else {
var dcc = document.createElement("div");
dcc.setAttribute("class", "addimg");
dcc.setAttribute("onclick", "yichu(this)");
dcc.innerHTML = '<div onclick="yichu(this)"><img src="' + ret.data + '"/><div class="x" ><img src="../res/x.png"/></div></div>';
prependChild(dcc, imgs)
}
}
});
} else if (sourceType == 2) {
var obj = api.require('UIMediaScanner');
obj.open({
type : 'picture',
column : 4,
max : 6,
classify : true,
sort : {
key : 'time',
order : 'desc'
},
texts : {
stateText : '已选择*项',
cancelText : '取消',
finishText : '完成'
},
styles : {
bg : '#fff',
mark : {
icon : '',
position : 'top_right',
size : 28
},
nav : {
bg : '#eee',
stateColor : '#000',
stateSize : 16,
cancleBg : 'rgba(0,0,0,0)',
cancelColor : '#000',
cancelSize : 16,
finishBg : 'rgba(0,0,0,0)',
finishColor : '#000',
finishSize : 16
}
}
}, function(ret) {
var imgs = $api.dom(".imglist");
var imgList = document.getElementsByClassName("addimg");
if (ret.eventType == 'cancel') {
} else if (ret.list.length > 0) {
if (imgList.length >= 6) {
api.toast({
msg : '不能再添加啦',
duration : 3000,
location : 'bottom'
});
} else {
for (var i = 0; i < ret.list.length; i++) {
var dcc = document.createElement("div");
dcc.setAttribute("class", "addimg");
dcc.setAttribute("onclick", "yichu(this)");
dcc.innerHTML = '<img src="' + ret.list[i].thumbPath + '"/><div class="x" ><img src="../res/x.png"/></div>';
prependChild(dcc, imgs)
}
}
}
});
}
}
function yichu(el) {
$api.css($api.dom(".mask"), 'display:block');
$api.dom(".cancel").onclick = function() {
$api.css($api.dom(".mask"), 'display:none');
};
$api.dom(".sure").onclick = function() {
$api.css($api.dom(".mask"), 'display:none');
$api.remove(el);
};
}
function prependChild(html, el) {
if (el.hasChildNodes()) {
el.insertBefore(html, el.firstChild);
} else {
el.appendChild(html);
}
}
</script>
</html>
复制代码
分享一款基于aui框架的图文发布界面的更多相关文章
- SZhe_Scan碎遮：一款基于Flask框架的web漏洞扫描神器
SZhe_Scan碎遮:一款基于Flask框架的web漏洞扫描神器 天幕如遮,唯我一刀可碎千里华盖,纵横四海而无阻,是谓碎遮 --取自<有匪> 写在前面 这段时间很多时间都在忙着编写该项目 ...
- rtvue-lowcode：一款基于uniapp框架和uview组件库的开源低代码开发平台
rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app.小程序等项目 ...
- 一款基于SSM框架技术的全栈Java web项目(已部署可直接体验)
概述 此项目基于SSM框架技术的Java Web项目,是全栈项目,涉及前端.后端.插件.上线部署等各个板块,项目所有的代码都是自己编码所得,每一步.部分都有清晰的注释,完全不用担心代码混乱,可以轻松. ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- MindInsight:一款基于MindSpore框架的训练可视化插件
技术背景 在深度学习或者其他参数优化领域中,对于结果的可视化以及中间网络结构的可视化,也是一个非常重要的工作.一个好的可视化工具,可以更加直观的展示计算结果,可以帮助人们更快的发掘大量的数据中最有用的 ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- JVM基础--JVM参数之堆栈空间配置
目录 堆配置 年轻代 Eden区 永久代(JDK1.7) 元空间(JDK1.8) 栈空间 直接内存 总结 参考资料 JVM系列目录 JVM 中最重要的一部分就是堆空间了,基本上大多数的线上 JVM 问 ...
- Python--day31--黏包(不熟...)
- 模板——Treap实现名次树
Treap 是一种通过赋予结点随机权值的一种满足堆性质的二叉搜索树,它很好的解决了二叉搜索树顺序插入组成链式的局限性. 名次树是指在treap的每个结点中添加附加域size,表示以它为根的子树的总结点 ...
- 2018-8-10-WPF-可获得焦点属性
title author date CreateTime categories WPF 可获得焦点属性 lindexi 2018-08-10 19:16:53 +0800 2018-05-15 15: ...
- 如何让in/exists 子查询(半连接)作为驱动表？
一哥们问我,怎么才能让子查询作为驱动表? SQL如下: select rowid rid from its_car_pass7 v where 1 = 1 and pass_datetime > ...
- 洛谷 P1972"[SDOI2009]HH的项链"（离线+树状数组 or 在线+主席树）
传送门 •题意 给你一个包含 n 个数的数组 $a$: 有 m 此操作,每次操作求区间 [l,r] 中不同数的个数: •题解(离线+树状数组) 以样例 $[1,2,3,4,3,5]$ 为例,求解区间 ...
- Vue-route页面切换过渡动画
重点: 1.判断路由前进还是后退 2.切换时动画如何实现 1.需要给各个页面定义层级,切换路由时判断进入哪个层级页面,如果进入层级高页面做前进动画,否则做后退动画在路由定义中添加meta自定义参数 ...
- VJhrbustacm0304专题一题解
L:搬果子 用一般的priority_queue做就可以了. 优先队列//扔进去就能自动排序的序列,记得T组数据要pop干净 #include<iostream> #include< ...
- dotnet 获取用户设备安装了哪些 .NET Framework 框架
从注册表可以拿到当前用户安装的 .NET Framework 版本,本文告诉大家如何解析这些信息 在注册表的当前设备的 SOFTWARE\Microsoft\NET Framework Setup\N ...
- jq 技巧汇总
1,jQuery方法$()实际上是拥有两个参数的 $('li','.firstEl').onclick(function(){.......}) 这里,第二个参数用来限制第一个参数给定的查找结果 ...