类似QQ的列表右滑显示菜单
来源:互联网 发布:cmd登录oracle数据库 编辑:程序博客网 时间:2024/06/06 11:43
1.引入css样式
<link rel="stylesheet" type="text/css" href="../css/aui.css"/> <link rel="stylesheet" type="text/css" href="../css/aui-list-swipe.css"/>
2.设置列表样式 和显示
<!--section 列表分组标签--> <section class="aui-content" id="banner"> <ul class="aui-list-view"><!--aui-user-view-cell 设置 图片圆角、右侧详情cell的样式 --> <!--事件可以随便写 参数当前对象--> <li class="aui-user-view-cell aui-img" tapmode onclick="showMsg(this);"><!--aui-swipe-handle :cell 盒子 的div包含cell的内容 ,控制cell 可以拖动--> <div class="aui-swipe-handle"> <!--aui-img-object 设置 图片大小的样式--> <!--aui-pull-left 设置居左的样式--> <img class="aui-img-object aui-pull-left" src="../image/liulangnan.png"/> <!--<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。 在文本中加入强调也需要有技巧。如果强调太多,有些重要的短语就会被漏掉;如果强调太少,就无法真正突出重要的部分。这与调味品一样,最好还是不要滥用强调。 尽管现在 <em> 标签修饰的内容都是用斜体字来显示,但这些内容也具有更广泛的含义,将来的某一天,浏览器也可能会使用其他的特殊效果来显示强调的文本。 如果你只想使用斜体字来显示文本的话,请使用 <i> 标签。除此之外,文档中还可以包括用来改变文本显示的级联样式定义。 除强调之外,当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候,也可以考虑使用 <em> 标签。 例如,W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。--> <div class="aui-img-body"> <span>流浪男 <em>11M</em> </span> <p class="aui-ellipsis-1">山东 潍坊</p> </div> </div><!--aui-swipe-right-btn 指定右侧滑动菜单上的按钮 aui-bg-warning背景颜色--> <div class="aui-swipe-right-btn aui-bg-warning" tapmode onclick="rightClick(this)"><i class="aui-iconfont aui-icon-favor"></i></div> <div class="aui-swipe-right-btn aui-bg-danger"><i class="aui-iconfont aui-icon-comment"></i></div> <div class="aui-swipe-right-btn aui-bg-success"><i class="aui-iconfont aui-icon-delete"></i></div> </li> <li class="aui-user-view-cell aui-img" tapmode onclick="showMsg(this)"> <div class="aui-swipe-handle"> <img class="aui-pull-left aui-img-object" src='../image/demo4.png'/><!--aui-text-danger 设置文本颜色--> <div class="aui-img-body"> <span class="aui-text-danger">淡淡的忧伤<em>11.1KM</em></span> <p class="aui-ellipsis-1">山东 潍坊</p> </div> </div> <div class="aui-swipe-right-btn aui-bg-warning"><i class="aui-iconfont aui-icon-favor"></i></div> <div class="aui-swipe-right-btn aui-bg-danger">删除</i></div> </li> </ul></section>
3.设置js事件
首页引入:<script type="text/javascript" src="../script/aui-list-swipe.js"></script>//初始化 滑动菜单 ListSwipe var swipe = new ListSwipe();//showMsg 执行cell的点击事件 function showMsg(el){// el.classList :元素li中的class console.log('cell 点击事件' + el.classList.contains("aui-swipe-selected"));//el 当前元素对象 classList 获取class列表 contains 是否包含某个class if(!el.classList.contains("aui-swipe-selected")){ api.alert({ title: '提示消息', msg: '正常点击操作' }); } }
0 0
- 类似QQ的列表右滑显示菜单
- 类似QQ的列表右滑显示菜单
- android 二级listview菜单。类似QQ的好友显示
- 仿QQ右拉显示菜单(一)
- 类似QQ的Web菜单
- 类似QQ/Outlook的菜单
- 读书笔记之类似qq的侧滑菜单
- FireMonkey下类似手机QQ侧滑菜单的实现
- QQ分组,QQ侧滑菜单,右滑菜单
- React Native 实现类似QQ的侧滑列表效果
- 类似QQ的垂直菜单(动态)
- 类似QQ的垂直菜单(动态)
- 类似QQ的垂直菜单(动态)
- 类似QQ的垂直菜单(动态)
- 类似QQ的竖型目录菜单
- 类似QQ的竖型目录菜单
- 类似QQ列表的布局文件整理
- 类似QQ菜单
- JS 和 ajax 实现网络请求 和 对应的类封装 回调函数实现
- Oracle Sharding DB的高可用架构
- fragment 和viewpaper结合fragment生命周期减少
- 题目1106:数字之和
- 以码农的名义告诉你:Long类型的数据比较大小,请一定用equals,不要用==
- 类似QQ的列表右滑显示菜单
- 设计模式之迭代器模式
- codeforces711c Coloring Trees
- Linux open()函数练习
- 电脑访问一个主页过程:DNS IP HTTP TCP OSPF ARP
- 13-进程间通信-共享内存(功能:传输数据)
- You Don't Need jQuery
- leetcode 557. Reverse Words in a String III(easy)
- win10 连接不上wifi