本文出自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框架的图文发布界面的更多相关文章

  1. SZhe_Scan碎遮：一款基于Flask框架的web漏洞扫描神器

    SZhe_Scan碎遮:一款基于Flask框架的web漏洞扫描神器 天幕如遮,唯我一刀可碎千里华盖,纵横四海而无阻,是谓碎遮 --取自<有匪> 写在前面 这段时间很多时间都在忙着编写该项目 ...

  2. rtvue-lowcode：一款基于uniapp框架和uview组件库的开源低代码开发平台

    rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app.小程序等项目 ...

  3. 一款基于SSM框架技术的全栈Java web项目(已部署可直接体验)

    概述 此项目基于SSM框架技术的Java Web项目,是全栈项目,涉及前端.后端.插件.上线部署等各个板块,项目所有的代码都是自己编码所得,每一步.部分都有清晰的注释,完全不用担心代码混乱,可以轻松. ...

  4. 分享一款基于jquery的圆形动画按钮

    之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...

  5. MindInsight:一款基于MindSpore框架的训练可视化插件

    技术背景 在深度学习或者其他参数优化领域中,对于结果的可视化以及中间网络结构的可视化,也是一个非常重要的工作.一个好的可视化工具,可以更加直观的展示计算结果,可以帮助人们更快的发掘大量的数据中最有用的 ...

  6. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  7. 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

    之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

  8. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  9. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

随机推荐

  1. H3C PPP会话建立过程

  2. Vue的filter过滤器

    一和二,请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html 三.index.html <!DOCTYPE html> <ht ...

  3. P1095 水仙花数

    题目描述 春天是鲜花的季节,水仙花就是其中最迷人的代表,数学上有个水仙花数,他是这样定义的:"水仙花数"是指一个三位数,它的各位数字的立方和等于其本身,比如:153=1^3+5^3 ...

  4. jquery超级简单的后台系统自适应框架

    系统后台自适应简单框架 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta http-equ ...

  5. Linux 内核 启动时间

    为见到 PCI 如何工作的, 我们从系统启动开始, 因为那是设备被配置的时候. 当一个 PCI 设备上电时, 硬件保持非激活. 换句话说, 设备只响应配置交易. 在上电时, 设备没有内存并且没有 I/ ...

  6. linux c函数参考手册

    一.字符测试 isalnum(测试字符是否为英文字母或数字) isalpha(测试字符是否为英文字母) isascii(测试字符是否为ascii码字符) isblank(测试字符是否为空格字符) is ...

  7. RNN，LSTM

    RNN: Vanilla Neural Network :对单一固定的输入给出单一固定输出 Recurrent Neural Network:对单一固定的输入给出一系列输出(如:可边长序列),例:图片 ...

  8. Python实现截图功能

    Python实现截图功能 Windows环境下需要用到PIL库,使用pip安装PIL库: pip install Pillow 安装完成,截图方法代码: from PIL import ImageGr ...

  9. 20191031-6beta week 1/2 Scrum立会报告+燃尽图 04

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9914 git地址:https://e.coding.net/Eustia/ ...

  10. 浅谈Redis的基本原理和数据类型结构的特性和应用开发场景

    一.Redis介绍 1,redis介绍(Redis安装在磁盘:Redis数据存储在内存) redis是一种基于键值对(key-value)数据库,其中value可以为string.hash.list. ...