「jquery.pep.js」のデモ拡張 2
追記:以下の記事のプログラムにはたぶんバグがあります。修正案はこちら
今回は
[jwuery.pep.js-mastar]=>[demos]=>[constrain-to.html]
と
[jwuery.pep.js-mastar]=>[demos]=>[slider.html]
を合せて、ちょこちょこっと変更してみました。
前回のをちょちょいのチョイ!
主な機能としては
・クリックしたオブジェクトの高さをスライダーで変更
・クリックしたオブジェクトの幅をスライダーで変更
・オブジェクト増殖
出来たもののスクリーンショットがこんな感じです。
簡単な説明
※基本的にスマートフォンなどの端末に対応してると思います。
・[add]ボタンを押すと横にあるtextareaの文字を付加したオブジェクトが追加されます。
・青色のがアクティブなオブジェクトです。
・アクティブにするにはクリック or タップしてください。
・アクティブ後に大きさの調整が出来ます。
・ダブルクリックでオブジェクトが削除されます。(PCのみ)
使用ライブラリ
・jquery.pep.js
では、説明もそこそこにソースコードです。
html
<div> <input type="button" value="add" /> <input id="label-text" type="textarea" /> ( W : <span id="nowW">0px</span> , H : <span id="nowH">0px</span> ) </div> <div id="scaleW-parent"> <div class="pep scaleW"></div> </div> <div id="scaleH-parent"> <div class="pep scaleH"></div> </div> <div id="parent"> </div>
var boxH = 400; var boxW = 600; var $obj; $(document).ready(function(){ $("input[value=add]").click(function(){ var text = $('input#label-text').val(); $("div#parent").append('<div class="pep peppable">' + text + '</div>'); addPep(); deletePep(); touchObj(); }); }); function touchObj(){ $('.peppable').bind({ 'touchstart mousedown': function(e) { e.preventDefault(); this.pageX = e.pageX; this.pageY = e.pageY; //peppable全ての背景色を変更 $('.peppable').css("background", "rgba(0, 200, 0, 0.7)"); //今押しているpeppableの背景色を変更 $(this).css("background", "rgba(0, 0, 200, 0.7)"); }, 'touchmove mousemove': function(e) { e.preventDefault(); }, //peppableから離れた時のイベント処理 'touchend mouseup': function(e) { //高さ変更バーのつまみの位置を変更 var height = $("#scaleH-parent").height(); var objHeight = $(".scaleH").height(); var nowH = $(this).css("height").replace('px', ''); var now = (height-objHeight) * (1 - (nowH / boxH)); $('.scaleH').css('top', now); objScaleH($(this)); //幅変更バーのつまみの位置を変更 var width = $("#scaleW-parent").width(); var objWidth = $(".scaleW").width(); var nowW = $(this).css("width").replace('px', ''); now = (width-objWidth) * (1 - (nowW / boxW)); $('.scaleW').css('left', now); objScaleW($(this)); $('#nowW').text(nowW + "px"); $('#nowH').text(nowH + "px"); } }); } function addPep(){ //$('.scaleH').css('top', '0'); //$('.scaleW').css('left', '0'); $('.peppable').pep({ constrainToParent: true , debug: true}); } function deletePep(){ $('.peppable').dblclick(function(){ $('.scaleH').css('top', '0'); $('.scaleW').css('left', '0'); $(this).remove(); }); } function objScaleH($target){ $obj = $target; var $parent = $("#scaleH-parent"); var height = $parent.height(); var $pep = $(".scaleH"); var objHeight = $pep.height(); //pep追加 $('.scaleH').pep({ //親要素内のみの移動 constrainToParent: true, shouldEase: false, //ドラッグ移動したときのイベント内の処理 drag: function(ev, obj){ //移動したときのオブジェクトのパラメータ取得 var vals = obj.getMovementValues(); var percent = vals.pos.y / (height-objHeight); var nowH = Math.round(boxH * (1-percent)); $obj.css("height", nowH + "px"); $('#nowH').text(nowH + "px"); } }); } function objScaleW($target){ $obj = $target; var $parent = $("#scaleW-parent"); var width = $parent.width(); var $pep = $(".scaleW"); var objWidth = $pep.width(); $('.scaleW').pep({ //親要素内のみの移動 constrainToParent: true, shouldEase: false, //ドラッグ移動したときのイベント内の処理 drag: function(ev, obj){ //移動したときのオブジェクトのパラメータ取得 var vals = obj.getMovementValues(); var percent = vals.pos.x / (width-objWidth); var nowW = Math.round(boxW * (1-percent)); $obj.css("width", nowW + "px"); $('#nowW').text(nowW + "px"); } }); }
body{ padding: 0; margin: 0; } input[value="add"]{ margin: 30px 0 0 30px; } input#label-text{ width: 480px; } #scaleH-parent{ border: 5px solid #666; width: 20px; height: 500px; margin: 5px 0 0 30px; float: left; } .scaleH{ width: 100%; height: 60px; background: rgb(243, 200, 200); } #scaleW-parent{ border: 5px solid #666; width: 800px; height: 20px; margin: 5px 0 0 65px; } .scaleW{ width: 60px; height: 100%; background: rgb(243, 200, 200); } #parent{ border: 5px solid #666; width: 800px; height: 500px; margin: 5px 0 0 5px; float: left; } .peppable{ width: 600px; height: 400px; background: rgba(0, 200, 0, 0.7); }
今回はちょっとだけコメント入れておきました。
ってか、思いつき思いつきで書いていくからタラタラ長いな・・・
もっと、きれいなソースが書けるようになりたいw
わからない点などがあればコメントにお願いします。
スマートフォンではどうやってオブジェクトを消そうかな~。
ダブルタップとかは実装するのめんどそうだし・・・