请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 450|回复: 0

ActionSheet——制作图片上传选择页

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
    发表于 2017-6-15 11:24:57 | 显示全部楼层 |阅读模式

    在微信中选择图片发送时,一般会给出多个图片来源的选项。例如,从相册中选择,或者直接用相机进行拍照。首先新建文件index.html,搭建基本的页面框架后,在body中增加以下代码:

    1. <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">上传图片</a>
    2. <div class="weui_mask_transition weui_fade_toggle" id="coverDiv" style="display: none ;"></div>
    3. <div class="weui_actionsheet weui_actionsheet_toggle" id="weui_actionsheet" style="display:none">
    4.     <div class="weui_actionsheet_menu">
    5.         <div class="weui_actionsheet_cell"><i class="weui_icon_download"></i> 手机相册</div>
    6.         <div class="weui_actionsheet_cell"><i class="weui_icon_info_circle"></i> 拍照</div>
    7.     </div>
    8.     <div class="weui_actionsheet_action">
    9.         <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
    10.     </div>
    11. </div>
    复制代码

    其中,id属性为coverDiv的div为半透明的遮罩层,在classs属性为weui_actionsheet_menu的div中可以定义多个子菜单。完成页面样式后,使用jQuery的动画效果实现菜单从屏幕的下方快速弹出。给按钮绑定相关事件的代码如下:

    1. <script type="text/javascript">
    2.         $(function(){
    3.         $('#showActionSheet').click(function(){
    4.             $('#weui_actionsheet').slideToggle("fast");// 快速弹出菜单
    5.             $('#coverDiv').show();                     // 显示遮罩层
    6.         })
    7.         })
    8. </script>
    复制代码

    注意:在jQuery中可以使用animate()方法来实现更多的自定义动画效果。



    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2021-3-8 10:50 , Processed in 0.081455 second(s), 29 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表