分享一款基于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>

复制代码