[jQuery UI] 基本メモ: Tabs[jQuery UI] 基本メモ: Tabs
サンプルコード <div id="tabs"> <ul> <li><a href="#menu1">menu1</a></li> <li> […]
月: 2015年3月
[jQuery UI] 基本メモ: Slider[jQuery UI] 基本メモ: Slider
サンプルコード スライダーの動きに併せてプログレスバーを変化させてみる。 <div id="bar" style="width:200px"></div> <div id="slider" […]
[jQuery UI] 基本メモ: Progressbar[jQuery UI] 基本メモ: Progressbar
サンプルコード <div id="bar" style="width:200px"></div> $('#bar').progressbar({ value: 40, }) 参考サイト Progr […]
[jQuery UI] 基本メモ: Dialog[jQuery UI] 基本メモ: Dialog
サンプルコード <button>open</button> <div id="msg">hello</div> $('button').click(function() { […]
[jQuery UI] 基本メモ: Datepicker[jQuery UI] 基本メモ: Datepicker
サンプルコード <input type="text" id="datepicker"> $('#datepicker').datepicker(); オプションを追加してみる。 $('#datepicker' […]
[jQuery UI] 基本メモ: Button[jQuery UI] 基本メモ: Button
サンプルコード <button>click</button> <input type="checkbox" id="check"> <label for="check">c […]
[jQuery UI] 基本メモ: Autocomplete[jQuery UI] 基本メモ: Autocomplete
サンプルコード <input type="text" id="langs"> var langs = ['ja','en','cn','fr','sp']; $('#langs').autocomplete( […]
[jQuery UI] 基本メモ: Accordion[jQuery UI] 基本メモ: Accordion
サンプルコード <div id="accordion"> <h3><a href="">Title</a></h3> <div>Hello!< […]
[jQuery UI] 基本メモ: Sortable[jQuery UI] 基本メモ: Sortable
サンプルコード <ul id="sortable"> <li id="item-1">item1</li> <li id="item-2">item2</li> […]
[jQuery UI] 基本メモ: Selectable[jQuery UI] 基本メモ: Selectable
サンプルコード <style> .ui-selected { background: red; } </style> <ul id="selectable"> <li id="i […]
[jQuery UI] 基本メモ: Resizable[jQuery UI] 基本メモ: Resizable
サンプルコード <div class="box" style="width:50px; height:50px; background:#ccc;">box</div> $('.box').res […]
[jQuery UI] 基本メモ: Droppable[jQuery UI] 基本メモ: Droppable
サンプルコード <div class="box" style="width:50px; height:50px; background:#ccc;">box</div> <div class […]
[jQuery UI] 基本メモ: Draggable[jQuery UI] 基本メモ: Draggable
サンプルコード <div id="box" style="width:100px; height:100px; background:green;"></div> $('#box').dragga […]
[jQuery UI] 基本メモ: 準備[jQuery UI] 基本メモ: 準備
本家サイトからjQuery UIをダウンロードする。 jQuery UI https://jqueryui.com/ Stable v1.11.4 jQuery 1.6+ jquery-ui-1.11.4.zip Sta […]
[jQuery] 基本メモ: jQuery.getメソッド[jQuery] 基本メモ: jQuery.getメソッド
HTTP(GET)通信でページを読み込む。 jQuery.get( url, data, callback ) サンプルコード <p> <input type="text" name="name" id […]
[jQuery] 基本メモ: loadメソッド[jQuery] 基本メモ: loadメソッド
HTMLを読み込み、DOMに挿入する。 load( url, data, callback ) サンプルコード <button>Read More</button> <div id="res […]
[jQuery] 基本メモ: 動的に作成された要素にイベントを割り当てる[jQuery] 基本メモ: 動的に作成された要素にイベントを割り当てる
ドキュメントが読み込まれた時点で存在する要素に対しては、セレクタで選択してイベント関係のメソッドを使ってイベントハンドラを設定できる。しかし、動的に作成された要素(ドキュメント読み込み時点では存在していない要素)に対して […]
[jQuery] 基本メモ: フォームで役立つメソッド[jQuery] 基本メモ: フォームで役立つメソッド
<input type="text" id="name"> <select id="members" name="members"> <option>Suzuki</option […]
[jQuery] 基本メモ: マウスイベント[jQuery] 基本メモ: マウスイベント
<div id="box" style="width:100px; height:100px; background:yellow;"></div> クリック $('#box').click(fu […]
[jQuery] 基本メモ: エフェクト[jQuery] 基本メモ: エフェクト
<div id="box" style="width:100px; height:100px; background: blue;"></div> 非表示 $('#box').hide(); 表示 […]