Xeditableをスマホのタッチイベントで使う。hammer.js

2014年12月6日更新 view: 6 view
http://blog.iko.la/wp-content/uploads/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2014-02-04-22.53.34.png

Xeditableをスマホのタッチイベントに対応させる

まずはコードを読み込み

http://hammerjs.github.io/
https://github.com/hammerjs/jquery.hammer.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/jquery.hammer.min.js"></script>
スポンサードリンク

使い方

$('li').hammer().on('doubletap', function(event){
alert("hoge");
});

li要素をクリックしたら hoge と表示されるはず。

xeditableとhammer.jsの両方を使う

まずはメインコード。#hogemanの文字列を変更させる。
toggleをmanualにしておくのがコツ。

$("#hogeman").editable({
type: "textarea",
toggle: 'manual',
escape: false,
success: function(response, newValue) {
var v;
alert("hennkou");
newValue = escapeHTML(newValue);
v = newValue.replace(/\n/g, "<br>");
return {
newValue: v
};
},
tpl: "<textarea style=\"width:700px !important;height:500px !important;\"></textarea>"
});

HTML

<div id="hogeman">
ここがエディタブルされる
</div>
<a id="ho">編集ボタン</a>

javascript

settimeoutを使って処理を遅らせる。
でないとうまく反応しないので。

        $(function () {

$('#ho').hammer().on('doubletap', function(e){
e.stopPropagation(e);
setTimeout(function(){
$("#hogeman").editable('toggle');
},100);
});


});

これでxeditableをipadやiphoneから使うことができるようになりましたね。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

6月26日 ( 水 ) にアクセスが多かった記事はこちら!