jQueryã§ãƒˆãƒ¼ã‚¹ãƒˆé€šçŸ¥ã‚’ã™ã‚‹ãƒ—ラグイン。ユーザビリティå‘上。
å³ä¸Šã‚„左下ã‹ã‚‰ã«ã‚‡ã£ãり通知エリアã§ã¦ãã¦é€šçŸ¥ã‚’ã—ã¦ãれる実装を簡å˜ã«ã§ãるプラグインを紹介ã—ã¾ã™ã€‚ajaxã¨çµ„ã‚ã›ã‚‹ã“ã¨ã§ã€ç”»é¢ã‚’リãƒãƒ¼ãƒ‰ã•ã›ã‚‹ã“ã¨ãªã通知をã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ ユーザãŒç”»é¢é·ç§»ã—ãªãã¦ã‚‚æƒ…å ±ã®é€šçŸ¥ãŒã§ãã‚‹ã®ã§ãƒ¦ãƒ¼ã‚¶ãƒ“リティã®å‘上ã«ç¹‹ãŒã‚‹ã¨æ€ã„ã¾ã™ã€‚
超便利ãªéƒµä¾¿ç•ªå·ã‹ã‚‰ä½æ‰€ã¸å¤‰æ›ã—ã¦ãれるjQueryプラグイン
フォーム入力ã®ã‚·ã‚¹ãƒ†ãƒ を作ã£ã¦ã„ã‚‹ã¨ã€éƒµä¾¿ç•ªå·ã¨ä½æ‰€ã‚’å…¥ã‚Œã‚‹å ´é¢ãŒå¤šã€…ã‚ã‚‹ã¨æ€ã„ã¾ã™ã€‚郵便番å·å…¥ã‚Œã¦ã„ã‚‹ã®ã«ã€ä½æ‰€ã‚’入れるã®é¢å€’ãã•ã„ã§ã™ã€‚ 郵便番å·ã‹ã‚‰ã‚る程度ä½æ‰€ã‚’補完ã—ã¦ãれるã¨éžå¸¸ã«ãƒ¦ãƒ¼ã‚¶ãƒ“リティãŒå‘上ã—ã¾ã™ã€‚ãã‚“ãªæ©Ÿèƒ½ã‚’ç°¡å˜ã«å®Ÿè£…ã™ã‚‹ã“ã¨ãŒã§ãã‚‹jQueryプラグインã®ç´¹ä»‹ã§ã™ã€‚ ■郵便番å·â†’ä½æ‰€ã¸å¤‰æ›ã—ã¦ãれるjQueryプラグインã€jpostal】 GitHub上ã«ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆãŒå˜åœ¨ã—ã¦ã„ã¾ã™ã€‚動作デモã¯ã“ã¡ã‚‰ã§ã™ã€‚ 利点ã¨ã—ã¦ã€github上ã§éƒµä¾¿ç•ªå·ã¨ä½æ‰€ã®é–¢é€£æƒ…å ±ã®jsonを管ç†ã—ã¦ãã‚Œã¦ã„ã‚‹ã®ã§ã€ã‚µãƒ¼ãƒä¸Šã«å¤§é‡ã®éƒµä¾¿ç•ªå·â†’ä½æ‰€ã®jsonçš„ãªç‰©ã‚’æŒã£ã¦ãŠã‹ãªãã¦ã‚‚良ã„ã§ã™ã€‚ä½æ‰€ã®æ›´æ–°ã‚‚自動ã¨ãªã‚Šã¾ã™ã€‚ サンプルスクリプトã¯ä»¥ä¸‹ã®ã¨ãŠã‚Šã§ã™ã€‚ã¨ã¦ã‚‚ç°¡å˜ã«å®Ÿè£…ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ <html> <head> <script src="//ajax.aspnetcdn.com
JQueryを使ã£ã¦ç”»é¢ä¸Šã®æ–‡å—列ã®å¹…ã‚’å–å¾—ã™ã‚‹ã‚µãƒ³ãƒ—ル | 怪ã—ã„物を開発ã™ã‚‹ãƒ–ãƒã‚°
â– ç”»é¢ä¸Šã§æ–‡å—列ã®å¹…を調ã¹ã‚‹ jQueryを利用ã—ã¦å¯¾è±¡ã®æ–‡å—列ãŒç”»é¢ä¸Šã§ä½•ãƒ”クセルã‚ã‚‹ã®ã‹ã€ã¨ã„ã†ã®ã‚’å–å¾—ã™ã‚‹ã‚µãƒ³ãƒ—ルã§ã™ã€‚ç”»é¢ä¸Šã§ã®æ–‡å—ã®å¹…ã‚’å–å¾—ã™ã‚‹ã“ã¨ã§ã€æŠ˜ã‚Šè¿”ã—ãŒç™ºç”Ÿã—ãªã„よã†ã«ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã«è‡ªå‹•èª¿æ•´ã—ãŸã‚Šã€ã¨ã„ã†ã“ã¨ãŒå¯èƒ½ã«ãªã‚Šã¾ã™ã€‚ 以下ã€ã‚µãƒ³ãƒ—ルコードã§ã™ã€‚ <!DOCTYPE html> <html lang="ja"> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ string = 'ã»ã’ã»ã’ã»ã’ã»ã’ã»ã’ー'; // ã“ã“ã§stringã«å…¥ã£ã¦ã„ã‚‹æ–‡å—列ã®å¹…ã®ãƒ”クセル数をå–å¾—ã™ã‚‹ã“ã¨ãŒã§ãる。 widthPixel = strWidth(string); al
jQueryã§æŒ‡å®šã—ãŸæ–‡å—列ã§ãƒ‰ãƒãƒƒãƒ—ダウンã®é …目を動的ã«çµžã‚Šè¾¼ã‚€ã‚µãƒ³ãƒ—ルを書ã„ãŸ
â– é•·ã„ドãƒãƒƒãƒ—ダウンリストã®ãƒ¦ãƒ¼ã‚¶ãƒ“リティå‘上ã®ãŸã‚ã« ãŸãã•ã‚“データãŒå˜åœ¨ã™ã‚‹ãƒ‰ãƒãƒƒãƒ—ダウンリストã¯ä¸‹ã«é•·ããªã£ã¦ã—ã¾ã„ã€é¸æŠžã™ã‚‹ã®ãŒå¤§å¤‰ã«ãªã£ã¦ã—ã¾ã„ã¾ã™ã€‚ユーザビリティも低下ã—ã¦ã—ã¾ã„ãŒã¡ã§ã™ã€‚ãã‚“ãªæ‚©ã¿ã‚’解決ã™ã‚‹ãŸã‚ã«ã€ãƒ†ã‚ストリアã«æ–‡å—を入力ã™ã‚‹ã¨ã‚る程度ドãƒãƒƒãƒ—ダウンリストã®é …目を動的ã«çµžã‚Šè¾¼ã‚るサンプルを書ãã¾ã—ãŸã€‚ テã‚ストエリアã«æ–‡å—列を入れるã¨ã€ãã®ãƒ†ã‚ストãŒå«ã¾ã‚Œã¦ã„ã‚‹é¸æŠžè‚¢ã®ã¿è¡¨ç¤ºã•ã‚Œã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚ 以下ã€ã‚µãƒ³ãƒ—ルコードã§ã™ã€‚デモã¯ã“ã¡ã‚‰ã§ã™ã€‚ <html> <head> <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // ã¾ãšã¯å¯¾
jQueryã§ç™»éŒ²ã—ãŸã‚¤ãƒ™ãƒ³ãƒˆã‚’æ„図的ã«ç™ºç”Ÿã•ã›ã‚‹æ–¹æ³•
â– triggerã§ã‚¤ãƒ™ãƒ³ãƒˆã‚’発生ã•ã›ã‚‹ 例ãˆã°ã€ãƒ‰ãƒãƒƒãƒ—ダウンリストをæ“作ã—ãŸæ™‚ã«ç™ºç”Ÿã™ã‚‹changeイベントを発生ã•ã›ãŸã„ã¨ãã¯ã€ä»¥ä¸‹ã®ã‚ˆã†ã«è¨˜è¿°ã™ã‚‹ã¨ç™ºç”Ÿã—ã¾ã™ã€‚ 以下ã®æ§˜ãªãƒ‰ãƒãƒƒãƒ—ダウンリストãŒã‚ã‚‹ã¨ã—ã¾ã™ã€‚ <select name="hogehoge" id="hogehogehogehoge"> <option value="0" selected="selected">未定</option> <option value="1">山形県</option> <option value="2">ç¦å³¶çœŒ</option> <option value="3">新潟県</option> <option value="4">æ±äº¬éƒ½</option> </select> 以下ã®æ§˜ã«è¨˜è¿°ã™ã‚‹ã¨ã€ã€ãƒ‰ãƒãƒƒãƒ—ダウンリストãŒå¤‰æ›´ã•ã‚ŒãŸã€‘ã“ã¨ã«ãªã‚Šã¾ã™ã€‚ $('#hogehogehogehoge').
jQueryã§ajaxを使ã£ã¦ãƒ•ã‚¡ã‚¤ãƒ«ã‚’POSTã™ã‚‹ã‚µãƒ³ãƒ—ル
jQueryã®ajax機能を使ã£ã¦ã€ãƒ•ã‚¡ã‚¤ãƒ«ãªã©ã‚’POSTã™ã‚‹æ™‚ã®æ›¸ã方サンプルã§ã™ã€‚対象IDを記述ã—ãŸformã‚¿ã‚°ã‹ã‚‰actionã®ä¸èº«ã‚’å–å¾—ã—ã¦ã€POSTã—ã¦ã„ã¾ã™ã€‚ // æƒ…å ±ã‚’ajaxã§POST function dataSubmit(formId, callback) { var postUrl = $(formId).attr('action'); form = $(formId); fd = new FormData(form[0]); // ajax通信 $.ajax({ url: postUrl, type:'POST', data: fd, processData: false, contentType: false, timeout:10000, success: function(data) { alert('登録完了ã—ã¾ã—ãŸ'); eval(callback);
jQueryã§è¤‡æ•°checkboxã®ãƒã‚§ãƒƒã‚¯ã•ã‚Œã¦ã„る値ã®ã¿ç°¡å˜ã«å–å¾—ã™ã‚‹
ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã®ãªã‹ã§ã€ãƒã‚§ãƒƒã‚¯ã•ã‚Œã¦ã„るフォームã®å€¤ã ã‘ã‚’ã€jQueryを使ã£ã¦å–å¾—ã™ã‚‹æ–¹æ³•ã§ã™ã€‚ 以下ã®æ§˜ãªHTMLを用æ„ã—ã¾ã™ã€‚ <label for="test1" class="checkbox"> <input type="checkbox" name="data[hogehoge][]" value="checked1" id="test1"> checkbox1 </label> <label for="test2" class="checkbox"> <input type="checkbox" name="data[hogehoge][]" value="checked2" id="test1"> checkbox2 </label> <label for="test3" class="checkbox"> <input type="checkbox" name="d
jQueryã§ç‰¹å®šã®IDã§å›²ã¾ã‚ŒãŸcheckboxを一括ON/OFFã™ã‚‹
webシステム構築ã—ã¦ã„る時ã«ã€ã€ã™ã¹ã¦ã®é …目をãƒã‚§ãƒƒã‚¯ã€‘ã‚„ã€ã™ã¹ã¦ã®é …目をé¸æŠžè§£é™¤ã€‘ãªã©ã®å‡¦ç†ãŒjQueryã ã¨ï¼‘è¡Œã§å®Ÿç¾ã§ãã¾ã™ã€‚ jQueryを使ã£ã¦ã€ä¸€æ‹¬ã§ç‰¹å®šã®IDã§å›²ã¾ã‚ŒãŸãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’ON/OFFã™ã‚‹æ–¹æ³•ã§ã™ã€‚ â– HTMLã¯ã“ã‚“ãªæ„Ÿã˜ 以下ã®æ§˜ãªHTMLを書ãã¾ã™ã€‚サンプルã§ï¼“ã¤ã®ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’用æ„ã—ã¦ã„ã¾ã™ã€‚ <div id="testhogehoge"> <input type="checkbox" name="test1" value="1"> <input type="checkbox" name="test2" value="1"> <input type="checkbox" name="test3" value="1"> </div> ■スクリプトã®ç”¨æ„ jQueryを利用ã™ã‚‹ã¨ã€ON/OFFã®ã‚¹ã‚¯ãƒªãƒ—トãŒ1è¡Œã§å®Ÿç¾ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ // ã™ã¹ã¦ãƒã‚§
jquery 1.xã¨2.x ã®é•ã„ã€ã•ã‚‰ã«å‹•ä½œã‚’高速ã«ã™ã‚‹ãŸã‚ã®è¨å®š | ã¾ã¨ã‚ーãŸãƒ¼
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…ã¾ãšã¯ jquery 1.x 㨠2.x ã®é•ã„ 1.x 系㯠IE8 以å‰ã‚’サãƒãƒ¼ãƒˆã™ã‚‹ãŒé…ã„ã€é‡ã„ 2.x 系㯠IE8 以å‰ã®ã‚µãƒãƒ¼ãƒˆã¯æ¨ã¦ã¦ã€ã„ã‚‹ãŒè»½ã„ã€æ—©ã„ アイルトン・セナã˜ã‚ƒã‚ã‚‹ã¾ã„ã—ãã‚“ãªã«æ—©ãã—ã¦ã©ã†ã™ã‚“ã®ï¼ŸWebページãŒãŸã£ãŸ1秒高速化ã™ã‚‹ã ã‘ã§ECサイトãªã‚“ã‹ã€å£²ä¸ŠãŒ10ï¼…å‘上ã—ãŸäº‹ä¾‹ã‚‚ã‚ã‚Šã¾ã™ã€‚ 使ã„分ã‘る対応ã—ã¦ã„ãªã„IE8以下ã«ã¯å¤ã„jqueryã‚’èªã¿è¾¼ã¾ã›ã¾ã™ <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}