リスト1. Draggable
jQuery('#Sample21').draggable();
実装例
リスト2. Droppable
jQuery('#Sample22').droppable({ drop: function(evt, ui){ alert('ドロップされました!!'); } });
実装例
リスト3. Resizable
jQuery('#Sample23').resizable();
実装例
リスト4. Selectable
jQuery('#Sample24').selectable();
実装例
※県名をクリックしてください。
リスト5. Sortable
jQuery('#Sample25').sortable();
実装例
※県名を入れ替えてください。
リスト6. Accordion
jQuery('#Sample26').accordion({ header : 'h5' });
実装例
リスト7. Autocomplete
jQuery('#inp27').autocomplete({ source: prefectures });
実装例
※都道府県名を最初の漢字1文字を入力して「↓」を押してみてください。
リスト8. Button
jQuery('#Sample28 *').button();
実装例
※上は要素が異なるのですが、全部ボタンになります。
リスト9. Datepicker
jQuery('#inp29').datepicker();
実装例
リスト10. Dialog
jQuery('#Sample210').dialog({ autoOpen : false, modal : true, buttons : { OK : function(){ jQuery(this).dialog('close'); } } }); jQuery('button.Sample210').click(function(){ jQuery('#Sample210').dialog('open'); });
実装例
ここにダイアログの内容が入ります。
色もこのように変更できます。
リスト11. Progressbar
jQuery('#Sample211').progressbar(); jQuery('button.Sample211').click(function(){ var value = 0; var timer = setInterval(function(){ if(value >= 100) { clearInterval(timer); value = 0; } else { value = value + 1; } $("#Sample211").progressbar("option", "value", value); }, 1000); });
実装例
リスト12. Slider
jQuery('#Sample212').slider();
実装例
リスト13. Tabs
jQuery('#Sample213').tabs();
実装例
視覚効果、アニメーション効果を加えます。
以下は、エフェクトのデモンストレーションです。