私はSafariのiPodでFacebookを使用していました。メッセンジャーを使用していて、メッセージを右/左にスワイプすると、削除ボタンが表示されます。
誰かが私を導き、html / JS / jQueryでそれがどのように行われるかを教えてもらえますか？
どうもありがとう！
質問する
8107 次
3 に答える
3
これを行うためのより簡単な方法であるjQuerymobileについてはわかりませんが、単純な古いJSでそれを行う方法は次のとおりです。
document.body.addEventListener('touchstart',function(e)
{
e = e || window.event;//don't know how mobile browsers behave here
var startCoordinates = {x:e.changedTouches[0].clientX,
y:e.changedTouches[0].clientY};
var endHandler = function(e)
{
e = e || window.e;
var xDiff = Math.abs(Math.abs(startCoordinates.x) -
Math.abs(e.changedTouches[0].clientX));
//unbind handler, avoid double listeners
document.body.removeEventListener('touchend', endHandler, false);
if (xDiff >= 50)
{//assume small movement wasn't intended as swipe
//here a swipe was detected
if (confirm('Are you sure you want to delete X?'))
{//perform xhr request here, or whatever
}
}
};
document.body.addEventListener('touchend',endHandler,false);
},false);
jQmobileはおそらくはるかに簡単ですが、これは私がスクリプトを作成したすべてのモバイルブラウザーで機能すると思う基本的な考え方です（Android、iOS（4〜6）、タッチイベントをサポートする開発モードのクロムでさえも機能しますこのようなコード）。
更新：
特にスワイプを処理するコードを追加しました：
(function(G,und)
{
'use strict';
var load = function()
{
var tStart, body = document.body;
tStart = function(e)
{
e = e || G.event;
var coords = e.changedTouches[0].clientX,
tEnd = function(e)
{
e = e || G.event;
var currentX = e.changedTouches[0].clientX;
if (body.removeEventListener)
{
body.removeEventListener('touchend',tEnd,false);
}
else
{//shouldn't be possible, but I don't know all browsers, of course
body.detachEvent('ontouchend',tEnd);
}
if ((coords - currentX) <= 50)
{//too little movement
/*console.log*/alert('moved, but no real swipe');
}
else
{
/*console.log*/alert('SWIIIPEEE!');
}
};
if (body.addEventListener)
{
return body.addEventListener('touchend',tEnd,false);
}
body.attachEvent('ontouchend',tEnd);
};
if (G.removeEventListener)
{
body.addEventListener('touchstart',tStart,false);
return G.removeEventListener('load',load,false);
}
body.attachEvent('ontouchstart',tStart);
return G.detachEvent('onload',load);
};
if (G.addEventListener)
{
return G.addEventListener('load',load,false);
}
return G.attachEvent('onload',load);
}(this));
于 2013-02-15T09:28:25.683 に答える
1
これを行うためにJavascriptライブラリを作成しました-今日リリースしたばかりです！https://github.com/ankane/swipeout
于 2013-02-19T09:41:30.170 に答える
0
これにより、ユーザーはスワイプしてクリックできます。
これは、スタイリングのブートストラップおよびバインディングのノックアウトと組み合わせて使用されます（ただし、これはオプションであり、このデモでは使用されません）。
iOSおよびAndroid（Cordovaアプリ）で動作およびテストされています。アレイに重要な情報があるため、スワイプして削除ボタンを表示し、ユーザーがこのボタンをクリックできるようにすることにしました。これは、これを削除することを決定するユーザーとして機能します。
また、このコードは、削除だけでなく、アドオンボタンのスタイルを適切に設定するためにも使用します（「btn-success」など）。
必要なjqueryライブラリの拡張機能は' jquery.event.move '（https://github.com/stephband/jquery.event.move）です。
HTML：
<div class="col-xs-12 btn-group-vertical">
<!-- ko foreach: Alert -->
<a class="btn btn-lg btn-default mySwipe" role="button" style="height:45px;float:left;">This is also test</a>
<button class="btn btn-lg btn-danger btn-addOn" style="width:0px;display:none;right:0px;height:45px;margin-top:0px;padding:10px;">Delete Alert</button>
<!-- /ko -->
</div>
JS：
これは、配列が変更されるたびに呼び出されます（swipeButton（'。mySwipe'）;）
// THIS FUNCTION APPLIES THE SWIPE DELETE LOGIC TO LIST ITEMS (.btn)
function swipeButton(elementIdentifier) {
$(elementIdentifier).on('movestart', function (e) {
// If the movestart is heading off in an upwards or downwards
// direction, prevent it so that the browser scrolls normally.
if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {
e.preventDefault();
}
else {
if (e.distX < 0) {
// Left
$(e.currentTarget).css('border-bottom-right-radius', '0px');
$(e.currentTarget).css('border-top-right-radius', '0px');
}
}
}).on('move', function (e) {
var item = $(e.currentTarget);
var total = item.parent().width();
var btn = $(e.currentTarget.nextElementSibling);
if (e.distX < 0) {
// Left
var distance = e.distX * -1;
distance = distance > 120 ? 120 : distance;
btn.show();
// Move
var itemWidth = total - distance;
var btnWidth = distance < 35 ? 0 : distance;
if (btnWidth == 0) {
btn.hide();
itemWidth = total;
}
item.css('width', itemWidth + 'px');
btn.css('width', btnWidth + 'px');
}
else {
//Right
var distance = e.distX;
distance = distance > 120 ? 120 : distance;
var currentWidth = item.width();
// Move
var thisMove = e.deltaX == 0 ? distance : e.deltaX;
var itemWidth = currentWidth + thisMove;
itemWidth = itemWidth > total ? total : itemWidth;
var btnWidth = total - itemWidth;
btnWidth = btnWidth < 14 ? 0 : btnWidth;
if (btnWidth == 0) {
btn.hide();
itemWidth = total;
}
item.css('width', itemWidth + 'px');
btn.css('width', btnWidth + 'px');
}
}).on('moveend', function (e) {
var total = $(e.currentTarget).parent().width();
var itemWidth = $(e.currentTarget).width();
if (itemWidth == total) {
// End Right
$(e.currentTarget).css('border-bottom-right-radius', '');
$(e.currentTarget).css('border-top-right-radius', '');
var btn = $(e.currentTarget.nextElementSibling);
btn.hide();
}
});
}
このコードの動作デモ：http：//jsfiddle.net/3d9n9cdo/5/
于 2015-11-11T11:46:07.643 に答える