本文出自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. Scrapy项目注意事项

  2. H3C 路由计算

  3. 初学ServiceMix

    因为老板给的毕业题目是ESB相关,需要学下ServiceMix(版本7.0.1) 但是SOA这东西技术上比较旧,加上主要是企业在用,个人学习的不多,所以资料比较少 CSDN上看到篇文章不错但是有些地方 ...

  4. H3C 计算子网内可用主机地址数

  5. linux 定时器 API

    内核提供给驱动许多函数来声明, 注册, 以及去除内核定时器. 下列的引用展示了基本的 代码块: #include <linux/timer.h> struct timer_list { / ...

  6. gif 格式

    现在使用gif的场景有很多,很多老师喜欢在课件添加 gif 图片 在开始讲gif之前,先告诉大家 gif 的格式. 请看图片,gif 图分为图片文件头(File Header),gif信息(GIF D ...

  7. css3 移动端旋转动画暂停

    音乐播放图片旋转动画 ios不支持暂停: animation-play-state: paused; @-webkit-keyframes rotate{ 100% { transform: rota ...

  8. Find工具

    Find工具主要用于操作系统文件.目录的查找, 1.语法参数格式为: Find工具的语法格式:find path(路径) -option(参数) action(动作): PATH路径:可以任意路径.绝 ...

  9. CUBA 框架2019年回顾

    对于 CUBA 框架,2019年最重要的事件应该是 CUBA 7 的发布, 这是 CUBA 框架的一次巨大进化,CUBA 7 引入了一系列全新的 UI 和更灵活的数据访问机制,并且发布了基于 Inte ...

  10. 个人项目之数独的生成与数独残局求解——C语言实现

    点击获取项目文件 1.对项目的分析与初步计划: 起初拿到这个项目是非常懵逼的,因为涉及到很多个人的知识盲区,诸如:C语言文件的操作.命令行参数.Code Quality Analysis工具.性能分析 ...