時々社内ニートのメモ 目指せ非プログラマー

案件がない時は社内ニートなだけだよ (もう何でもごじゃれ c, c++, c#, VB, java, php, javascript, sql, html, css 他)

「jquery.pep.js」のデモ拡張

仕事で、スマートフォンでもオブジェクトをドラッグ&ドロップでスムーズに動くjavascriptライブラリをが必要になりました。

作るのはめんどくさいしね。

 

jQuery UIとかあるけど、スマートフォンには対応していなかった気がするし、確か重かった気がする。

 

そこで見つけたのがjquery.pep.js

 

これいい!

ライセンスもMITライセンスなので楽ちん

 

ってことで、さっそくGithubからソースをダウンロード!

ちなみにZIPって書いてあるボタンからダウンロードできます。

 

ダウンロードしたファイルの中にはjQuery v1.7.2も入ってました。

[jwuery.pep.js-mastar]=>[demos]をさっそくいろいろ動かしてみると、ホームページにはないデモもいっぱい。

 

そこで、さっそくその中の一つ

[jwuery.pep.js-mastar]=>[demos]=>[constrain-to.html]

をいじってみました。

 

作ったものの機能は以下のものです。

・addボタンでオブジェクトの追加

・オブジェクトのダブルクリックでそのオブジェクトを削除

後は、pepのデモにあったのを流用

以上!www

 

以下がそのソースの一部になります。

 

htmlのbody以下のソース

    	<input type="button" value="add" />
<div id="parent">
<div class="pep peppable">constrained to parent</div>
</div>

 

javascript

$(document).ready(function(){
    addPep();
	deletePep();
});

function addPep(){
	$('.peppable').pep({ constrainToParent: true , debug: true});
}

function deletePep(){
	$('.peppable').dblclick(function(){
		$(this).remove();
	});
}

$(function(){
	$("input[value=add]").click(function(){
		$("div#parent").append('<div class="pep peppable">constrained to parent</div>');
		addPep();
		deletePep();
	});
});

 

CSS

body{ padding: 0; margin: 0; }
input[value="add"]{ margin: 30px 0 0 30px;}
#parent{ border: 5px solid #666; width: 800px; height: 500px; margin: 5px 0 0 30px; }
.pep{ width: 200px; height: 200px; background: rgb(243, 200, 200); color: white; }

簡単だな~。

ってか、jquery.pep.js自体のソースコード800行ないってすごいね。