您的位置:首页 - 教程 - web前端 - 正文
触屏端列表滑动删除插件hewenqi介绍
hewenqi是一个javascript插件,应用于触屏端,例如移动端触屏手机,实现了列表滑动删除功能。使用HTML5、JavaScript实现。文本末尾附有源代码下载。

效果体验:
http://hovertree.com/texiao/hewenqi/

请使用触屏设备体验效果。

或者扫描下面二维码:



应用示例HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>触屏手机移动端侧滑删除插件Hewenqi _ 何问起</title><base target="_blank" />
<meta charset="utf-8" />
<link href="http://hovertree.com/texiao/hewenqi/hewenqi.css" rel="stylesheet" type="text/css" />
<style>
.hewenqihead * {
padding: 0;
margin: 0;
list-style: none;
}
header.hewenqihead {
background: #f7483b;
border-bottom: 1px solid #ccc;
}
header.hewenqihead h2 {
text-align: center;
line-height: 54px;
font-size: 16px;
color: #fff;
}
a{color:blue;}
</style>
<script src="http://hovertree.com/texiao/hewenqi/hewenqi.js"></script>
</head>
<body>
<header class="hewenqihead">
<h2>消息列表(hewenqi插件)</h2>
</header>
<ul id="hewenqi" class="hewenqi">
<li class="hewenqi-li">
<div class="hewenqi-con">
hewenqi插件是一个javascript插件。
</div>
<div class="hewenqi-btn">删除</div>
</li>

<li id="li" class="hewenqi-li">
<div class="hewenqi-con">
官网:hovertree.com/texiao/hewenqi
</div>
<div class="hewenqi-btn">删除</div>
</li>

<li class="hewenqi-li">
<div class="hewenqi-con">
应用于触屏端的列表滑动删除
</div>
<div class="hewenqi-btn">删除</div>
</li>

<li class="hewenqi-li">
<div class="hewenqi-con">
请使用手机等触屏设备体验效果。
</div>
<div class="hewenqi-btn">删除</div>
</li>

<li class="hewenqi-li">
<div class="hewenqi-con">
欢迎使用 HovertreeImg 图片轮播插件
</div>
<div class="hewenqi-btn">删除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
何问起,你的快递到了,请到楼下签收<a href="http://hovertree.com/">详情</a>
</div>
<div class="hewenqi-btn">删除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
HoverClock是一款jQuery网页时钟。
</div>
<div class="hewenqi-btn">删除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
何问起你有一个到付快递,请到门口查收。
</div>
<div class="hewenqi-btn">删除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
柯乐义给你寄来了一张贺卡,请到门口查收。
</div>
<div class="hewenqi-btn">删除</div>
</li>
</ul>
<div style="text-align:center;">
<br />

体验效果请使用手机扫描二维码:<br />
<img src="http://hovertree.com/hvtimg/bjafab/x21kn3j2.png" alt="二维码" />
<br /> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/h/bjaf/rfsnyuyo.htm">说明</a>
</div>
<script>
$Hewenqi.Set({id:"hewenqi"});//指定ul的id,如果id为hewenqi的话可以屏蔽这条语句。
$Hewenqi.Hewenqi();//执行滑动删除等功能。
</script>
</body>
</html>

源码下载:
http://hovertree.com/h/bjaf/tbdxdrfw.htm

评论: