2009-12-02

jQuery-UI sortable オプション2「axis」

sortableのオプション２つ目

axis
用途：移動できる方向を指定できる。
デフォルト：false
値：x, y

$('.selector').sortable({ axis: 'x' });

ドラッグ後、移動できる方向がx軸方向に限定される。
（つまり、横移動のみになる。）
縦方向（y指定）はあまり想定されるケースが浮かびませんが、x方向はある気がします。

利用頻度：★★★☆☆

2009-11-30

jQuery-UI sortable appendTo

sortableのオプション１つ目

appendTo
用途：ソート対象をドラッグ後、移動できる範囲の指定。
デフォルト：parent

$('.selector').sortable({ appendTo: 'body' });

この指定の場合、移動可能部位がbody限定となる。

利用頻度：★★☆☆☆

2009-11-18

jQuery-UI sortable 基本属性

sortableで利用できる属性

属性	意味
ui.helper	ソート対象要素。
ui.position	ソート対象の位置。
ui.item	ソート対象要素のオブジェクト。
ui.placeholder	並び替えの土台となる場。
ui.sender	土台連結時に他の土台から移った際に、移動元の土台を示す。

■使用例
ドラッグした際に、ソート対象要素を赤くする。

$(function() {
	$("#sortable").sortable({
		start: function(event, ui){
			ui.helper.css("background", "red");
		}
	});
	$("#sortable").disableSelection();
});

startイベントが発生した際に、ui.helper要素（ドラッグした要素）に処理を行う。

2009-11-15

jQueryプラグイン sortable

jQuery + sortable で簡単にドラッグ&ドロップによる並び替えが可能になります。
これを一から手製で作ろうとすると想像すると冷や汗ものです。。

■本家サイト
http://jqueryui.com/demos/sortable/

上記サイトからダウンロードして設置するだけで利用可能になります。
使い方等はググれば山ほど出てきます。

使用できるオプションについて書かれているものはあまりなかったので、
次回からはsortableで指定できるオプションについて書こうかと思います。

2009-11-04

jQuery ColorPicker サブウィンドから親ウィンドを操作

jQuery

前回に引き続き、jQueryのプラグイン、ColorPickerについて。
今回はポップアップでサブウィンドを表示し、そこから表示元の親ウィンドのcolorを操作します。

■親ウィンド（index.html）■

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<title>jQuery - Color Picker </title>   
<link href="./css/colorpicker.css" rel="stylesheet" type="text/css" />   
<link href="./css/layout.css" rel="stylesheet" type="text/css" />   
<script src="../lib/jquery-1.3.1.min.js" type="text/javascript"></script>   
<script src="../lib/colorpicker.js" type="text/javascript"></script>     
<script type="text/javascript">   
function pop(){
	window.open("popup.html", "", "width=400 height=400");
}
function setColor(color){
	$(".style_1").css("background-color", "#"+color);
}
</script>

<style type="text/css">
.style_1{
	width: 200px;
	height:200px;
	background-color:red;
}
</style>
  
</head>   
<body>
<input type="button" value="popup" onclick="pop();">
<div class="style_1"></div>
</body>   
</html>

■サブウィンド（popup.html）■

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<title>jQuery - Color Picker </title>   
<link href="./css/colorpicker.css" rel="stylesheet" type="text/css" />   
<link href="./css/layout.css" rel="stylesheet" type="text/css" />   
<script src="../lib/jquery-1.3.1.min.js" type="text/javascript"></script>   
<script src="../lib/colorpicker.js" type="text/javascript"></script>     
<script type="text/javascript">   
$(function() {   
	$('#colorText').ColorPicker({
		color: '#0000ff',
		onShow: function(colpkr) {   
			$(colpkr).fadeIn(500);   
			return false;
			},
		onHide: function(colpkr) {   
		$(colpkr).fadeOut(500);   
		return false;   
	},
	onChange: function(hsb, hex, rgb) {   
		$('#colorSelector div').css('backgroundColor', '#' + hex);
		$('#colorText').attr("value", hex);
		opener.setColor(hex);
		}   
	});
});

function pop(){
	window.open(popup.html);
}
</script>   
  
</head>   
<body>   
 class : style_1
<div class="wrapper">
<input type="text" id="colorText" value="" size="">      
</div>   
     
</body>   
</html>

2009-10-24

jQueryプラグインその２：jquery-colorpicker

よくサイトで色を選択可能なツールチップをみます。
そんなものを手軽におけるプラグインです。

本家サイト：ColorPicker - jQuery plugin

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
  <title>jQuery - Color Picker </title>   
  <link href="./css/colorpicker.css" rel="stylesheet" type="text/css" />   
  <link href="./css/layout.css" rel="stylesheet" type="text/css" />   
  <script src="../lib/jquery-1.3.1.min.js" type="text/javascript"></script>   
  <script src="../lib/colorpicker.js" type="text/javascript"></script>     
  <script type="text/javascript">   
    $(function() {   
  
      $('#colorpickerHolder2').ColorPicker({   
        flat: true,   
        color: '#00ff00',   
        onSubmit: function(hsb, hex, rgb) {   
          $('#colorSelector2 div').css('backgroundColor', '#' + hex);   
        }   
      });   
  
      $('#colorpickerHolder2>div').css('position', 'absolute');   
      var widt = false;   
      $('#colorSelector2').bind('click', function() {   
        $('#colorpickerHolder2').stop().animate({ height: widt ? 0 : 173 }, 500);   
        widt = !widt;   
      });   
  
  
      $('#colorSelector').ColorPicker({   
        color: '#0000ff',   
        onShow: function(colpkr) {   
          $(colpkr).fadeIn(500);   
          return false;   
        },   
        onHide: function(colpkr) {   
          $(colpkr).fadeOut(500);   
          return false;   
        },   
        onChange: function(hsb, hex, rgb) {   
          $('#colorSelector div').css('backgroundColor', '#' + hex);   
        }   
      });       
       
           
    });   
  </script>   
  
</head>   
<body>   
  
  <div class="wrapper">   
    <div id="customWidget">   
      <div id="colorSelector2">   
        <div style="background-color: #00ff00">   
        </div>   
      </div>   
      <div id="colorpickerHolder2">   
      </div>   
    </div>   
  
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />   
        
    <p>   
      <div id="colorSelector">   
        <div style="background-color: #0000ff">   
        </div>   
      </div>   
    </p>   
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />           
  </div>   
     
</body>   
</html>

こんな感じ。↓

2009-10-21

javascriptでz-indexを変更する

例えば、javascriptを使ってstyleを変更する際、

document.getElementById("id").style.color = "red";

みたい書きます。

で、z-indexを変更しようとした。

document.getElementById("id").style.z-index = "1";

エラー…。

このように書くらしいです。

document.getElementById("id").style.zIndex = "1";

ググったらすぐ出てきましたが、、。

そういえば、colspanの変更の際にも、
「colSpan」と書かされた気が（うる覚え）