<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> <!--<script type="text/javascript" src="jquery.ui.core.js"></script>--> <script type="text/javascript" src="jquery.ui.selectable.js"></script> <script type="text/javascript"> $(function(){ $(".ui-selectable > *").live("selectableselecting",function(){ console.log("要素の選択中"); }); $(".ui-selectable > *").live("selectableselected",function(){ console.log("要素の選択が完了"); }); $(".ui-selectable > *").live("selectableunselecting",function(){ console.log("要素の選択解除中"); }); $(".ui-selectable > *").live("selectableunselected",function(){ console.log("要素の選択解除が完了"); }); $(".ui-selectable > *").live("selectablestart",function(){ console.log("要素の選択を開始"); }); $(".ui-selectable > *").live("selectablestop",function(){ console.log("要素の選択を終了"); }); $("input:eq(0)").click(function(){ $("dl#selectable-filter").selectable({filter:"dt"}); }); $("input:eq(1)").click(function(){; $("dl#selectable-filter").selectable("destroy"); }); $("input:eq(2)").click(function(){ $("dl#selectable-filter").selectable("enable"); }); $("input:eq(3)").click(function(){ $("dl#selectable-filter").selectable("disable"); }); $("input:eq(4)").click(function(){ $("dl#selectable-filter").selectable("toggle"); }); }); </script> <style type="text/css"> /*初期デザイン*/ dl#selectable-filter{ border:1px solid #CCCCCC; padding:20px; } dl#selectable-filter dt{ border:2px dashed #CCCCCC; width:150px; height:30px; line-height:30px; margin:5px; padding-left:10px; color:#CCCCCC; background-color:#EEEEEE; } dl#selectable-filter dd{ margin:5px; } /*選択可能な要素*/ .ui-selectable{ border:1px solid #000000 !important; padding:20px !important; } /*ui-selectableの子要素*/ .ui-selectee{ border:2px dashed #FF0000 !important; width:150px !important; height:30px !important; line-height:30px !important; margin:5px !important; padding-left:10px !important; color:#000000 !important; } /*選択中の要素*/ .ui-selecting{ background-color:#CCFF99 !important; } /*選択済みの要素*/ .ui-selected{ background-color:#FFCC99 !important; font-weight:bold !important; } /*選択が解除される要素*/ .ui-unselecting{ background-color:#99CCFF !important; } /*selectableが無効になている要素*/ ui-selectable-disabled{ color:#333333 !important; } </style> </head> <body> <dl id="selectable-filter"> <dt>HTML</dt> <dd>タグでWebページの構造を記述する</dd> <dt>CSS</dt> <dd>HTMLタグに対応するデザインを設定する</dd> <dt>JavaScript</dt> <dd>Webページの内容をユーザーの操作などに応じて追加/変更する</dd> <dt>jQuery</dt> <dd>CSSセレクターあAjaxに対応したコンパクトなJavaScriptライブラリ</dd> <dt>Webサーバー</dt> <dd>アクセスしてきたWebブラウザとデータの送受信を行う</dd> </dl> <input type="button" value="子要素を選択可能にする"> <input type="button" value="selectableを解除する"> <input type="button" value="selectableを有効にする"> <input type="button" value="selectableを無効にする"> <input type="button" value="selectableを有効/無効を切り替えるにする(?)"> </body> </html>