目指せ非プログラマー

もう何でもごじゃれ言語

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

追記:以下の記事のプログラムにはたぶんバグがあります。修正案はこちら

 

今回は

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

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

を合せて、ちょこちょこっと変更してみました。

 

前回のをちょちょいのチョイ!

 

主な機能としては

・クリックしたオブジェクトの高さをスライダーで変更

・クリックしたオブジェクトの幅をスライダーで変更

・オブジェクト増殖

 

出来たもののスクリーンショットがこんな感じです。

f:id:micronwave:20130531192702j:plain

 

簡単な説明

※基本的にスマートフォンなどの端末に対応してると思います。

・[add]ボタンを押すと横にあるtextareaの文字を付加したオブジェクトが追加されます。

・青色のがアクティブなオブジェクトです。

・アクティブにするにはクリック or タップしてください。

・アクティブ後に大きさの調整が出来ます。

・ダブルクリックでオブジェクトが削除されます。(PCのみ)

 

使用ライブラリ

jQuery

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>

 

javascript

    		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");
					}
				});
			}

 

css

    		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

 

わからない点などがあればコメントにお願いします。

 

スマートフォンではどうやってオブジェクトを消そうかな~。

ダブルタップとかは実装するのめんどそうだし・・・