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

分享一款基于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>
复制代码

原文地址:https://blog.51cto.com/9334358/2422480

时间: 2024-11-05 22:44:05

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

分享一款基于TP框架的CMS,前端已修改使用Bootstrap

不想弄了.真心累.已把 shuipfcms 前端修改成 bootstrap ,学习其他框架. 这是首页. 还有栏目页.文章详情页.图片详情页.软件下载页,tag标签页.tag列表页.下载最终页.  遗憾的是, 搜索未完成. 有兴趣的人可以继续完成这个项目,可以作个人独立博客. shuipfcms ,是水平凡的产品(版权). 附件有详细的图片.SQL备份.readme(内有后台账号.密码) 云盘下载:http://pan.baidu.com/s/1hshiR1E 本人,仅修改了前端的布局,以及增加

jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div class="

萌音影视:一款基于laravel框架的在线影视应用

简介 萌音影视是一款基于文雅的laravel框架和一点都不妹子的妹子UI的在线影视应用,特性是交关据库.无后台形式,仅除非一个配置文件(config/web.php),同时无海报,支持vip解析,官方源,速率快,多频道,多分类.同时行将新增独立的频道.首页电视台直播.多解析接口等功能,观望时不走伏笔VPS服务器流量,感触挺不错的,有兴趣的可以搭建个玩玩. 部署 Github地址:https://github.com/178146582/moeins 环境要求:Nginx/Apache.PHP 5

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

概述 此项目基于SSM框架技术的Java Web项目,是全栈项目,涉及前端.后端.插件.上线部署等各个板块,项目所有的代码都是自己编码所得,每一步.部分都有清晰的注释,完全不用担心代码混乱,可以轻松.简单.放心全面学习(也不需要版本控制配置).下载后遇到任何问题,我将全力进行解答. 此项目:快编(kuaib)是一款方便快速全能的编辑系统,竭尽全力地将编写.查找.比对.修改.文件下载.上传.查重等所有功能整合于单个页面操作综合操作系统.--另外,此项目已部署:http://yws233.cn:80

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

之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: 在线预览   源码下载 实现的代码. html代码: <figure class='red'> <div class='icon'> i</div> <div class='circle'> </div> </figure> <f

分享10款基于jquery和css3的web前端的动画特效

1.响应式圆形动画导航菜单 响应式的移动导航栏,现在我发现了一个新的技术(有关HTML5)可以在没有使用Javascript的情况下做一个响应式菜单.这个菜单可以自动排列到左边.中间或者右边).不像之前的教程需要点击某"开关"来显示或隐藏菜单,现在只需要把鼠标移到菜单按钮就会出现菜单列表(而且会提示当前所在的导航位置). 在线演示 源码下载 2.Canvas 示例:4种超炫的网站动画背景效果 今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段

分享10款web前端基于css3和jquery的源码预览

1.基于jquery和css3实现的摩天轮式分享按钮 之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮挂在摩天轮上. 在线演示 源码下载 2.纯css3实现的动画加载导航 之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现. 在线演示 源码下载 3.纯css3实现的鼠标经过图片显示

分享10款web前端基于css3和HTML5的源码预览下载

1.纯CSS3模拟烧烤动画 今天要来分享一款非常有创意的CSS3动画,这款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧烤架还会冒烟,模拟了烧烤时的情景. 在线演示 源码下载 2.纯CSS3实现人物跑步动画 还记得之前给大家分享的这款CSS3人物行走动画吗?动画效果确实棒极了.今天我们再分享一款基于CSS3的人物跑步动画,跑步动画非常简单,跑步的人物仅仅用一些线条勾勒出来,通过这些线条的弯曲和移动形成跑步的动画效果

10款基于html5+css3实现的动画的源码

1.CSS3简易清新的下拉菜单 对于CSS3菜单我们已经在以前分享过很多了,有华丽的动画菜单,也有冲击视觉的3D菜单,今天要介绍的是一款简易而实用的下拉菜单,绿色的主题风格,让菜单的外观看上去非常清新,下拉菜单的颜色和主菜单的颜色搭配也非常不错. 在线演示 源码下载 2.HTML5自定义背景图片的文字特效 在HTML5和CSS3标准出来之前,文字的背景只能是纯色,更不用说是自定义背景图片了.然而,强大的HTML5不仅让文字背景支持渐变颜色,而且支持自定义的背景图片,这些图片就像遮罩层,让文字的背