分享一款基于aui框架的图文发布界面

本文出自APICloud官方论坛，

感谢论坛版主 川哥哥 的分享。

分享一款基于aui框架的图文发布界面，可以添加多张图可以删除，类似qq空间发布说说，没做服务器后端，只演示前端操作。
需要用到UIMediaScanner模块

项目源码：

<!DOCTYPE html>

<html>

<head>

<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>

新生指引

</div>

</header>

</div>

</li>

</div>

<p>

确定要删除这张图片吗？

</p>

<p>

</p>

</div>

</li>

</ul>

</div>

地址

</div>

</div>

</li>

</ul>

</div>

</body>

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.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

随机推荐

Python--day28--摘要算法
摘要算法:
Python--day40--全局解释器锁
1,起一百个线程和起一百个进程所花的时间对比(开启效率的较量): import time from threading import Thread from multiprocessing impor ...
P1054 全组合
题目描述给定n,m,按字典序输出所有从1-n里面取出m个数的组合.比如从1-3里面取出2个的组合是: 1 2 1 3 2 3 输入格式输入两个数n,m.其中 \(0<n<=10,0&l ...
Total Commander 显示文件包含文件名扩展
在默认的 Total Commander 是分开文件名和文件扩展,如果想要让文件名同时显示扩展,可以通过设置合并文件名和扩展两列点击配置,在选项的制表修改显示 How to configure To ...
post提交方式为什么要序列化，而Get提交方式就不用？序列化做了什么？
这是因为后台能够直接处理的数据格式,是一种经过序列化的键值对数据,比如前端要向后台提交三个参数,分别是a=1,b=2,c=3,那么后台接收到的数据就应该是a=1&b=2&c=3(可以看 ...
linux ioctl 接口
大部分驱动需要 -- 除了读写设备的能力 -- 通过设备驱动进行各种硬件控制的能力. 大部分设备可进行超出简单的数据传输之外的操作; 用户空间必须常常能够请求, 例如, 设备锁上它的门, 弹出它的 ...
51nod 挑剔的美食家
挑剔的美食家基准时间限制:1 秒空间限制:131072 KB 分值: 5 与很多奶牛一样,Farmer John那群养尊处优的奶牛们对食物越来越挑剔,随便拿堆草就能打发她们午饭的日子自然是一 ...
51nod 天气晴朗的魔法 - (Kruskall最小生成树)
题目: 基准时间限制:1 秒空间限制:131072 KB 51nod魔法学校近日开展了主题为“天气晴朗”的魔法交流活动. N名魔法师按阵法站好,之后选取N - 1条魔法链将所有魔法师的魔力连接 ...
ZR979B. 【十联测 Day 9】唯一睿酱
ZR979B. [十联测 Day 9]唯一睿酱题目大意: 给定一个数组$r_i$,表明对于第$i$个数来说,他是$[max(1,i - r_i),min(n,i+r_i)]$中最大的,求 ...
【52.55%】【BZOJ 4520】K远点对
Time Limit: 30 Sec Memory Limit: 512 MB Submit: 588 Solved: 309 [Submit][Status][Discuss] Descript ...

分享一款基于aui框架的图文发布界面

分享一款基于aui框架的图文发布界面的更多相关文章

随机推荐

热门专题