APP开发平台 > Blog > 分享一款基于aui框架的图文发布界面

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

                       .smtextarea {

                              color: #979797;

                              height: 6.4rem

                       }

                      .aui-list {

                              border-top: none;

                       }

                       @mediascreen 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;

                       }

                       .imglistimg {

                              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;

                       }

                       .addimgimg {

                              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;

                       }

                       .alertp:nth-child(1) {

                              line-height: 5rem;

                              border-bottom: 1px solid #EBEBEB;

                              font-size: 0.9rem;

                       }

                       .alertp: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>

                       <aclass="aui-btn aui-pull-left"> <span></span>  返回</a>

                       <divclass="aui-title">

                              新生指引

                      </div>

                       <aclass="aui-pull-right" >发 表</a>

               </header>

               <div>

                       <divclass="aui-content aui-margin-b-15">

                              <ul>

                                      <liclass="aui-list-item">

                                             <div class="aui-list-item-inner sm">

                                                     <textareaid="sm" placeholder="说点什么吧"></textarea>

                                             </div>

                                      </li>

                                      <liclass="aui-list-item">

                                             <div>

                                                     <divonclick="upimg()"></div>

                                             </div>

                                             <!--遮罩层-->

                                             <div>

                                                     <!--弹出框-->

                                                     <div>

                                                            <p>

                                                                    确定要删除这张图片吗?

                                                            </p>

                                                            <p>

                                                                    <spanclass="cancel">取消</span>

                                                                    <spanclass="sure">确定</span>

                                                            </p>

                                                     </div>

                                             </div>

                                      </li>

                              </ul>

                              <ul>

                                      <liclass="aui-list-item">

                                             <div>

                                                     <iclass="aui-iconfont aui-icon-location aui-text-success"></i>

                                             </div>

                                             <div>

                                                     <divclass="aui-list-item-title">

                                                            地址

                                                     </div>

                                                     <div>

                                                            <input type="checkbox" checkedclass="aui-switch"  id="ts">

                                                     </div>

                                             </div>

                                      </li>

                              </ul>

                      </div>

               </div>

       </body>

       <script type="text/javascript"src="../script/api.js"></script>

        <scripttype="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 ><imgsrc="../res/x.png"/></div></div>';

                                                     prependChild(dcc,imgs)

                                             }

                                      }

                              });

                       } elseif (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 ><imgsrc="../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>


2018-04-09 来源:APICloud

aui框架

高效的App定制平台,标准化、便宜、快!

提交APP定制开发需求
x