HTML5 Form Validation ã®ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚º
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
複数ã®selectè¦ç´ を連動ã•ã›ã‚‹JavaScript「Dependent Selectã€
twitter facebook hatena google pocket フォームãªã©ã§æ®µéšŽçš„ã«é¸æŠžå†…容を絞り込ã¾ã›ã‚‰ã‚Œã‚‹ã¨ãƒ¦ãƒ¼ã‚¶ãƒ“リティãŒå‘上ã—ãã†ã§ã™ã€‚ jQueryプラグインDependent Selectã§ã¯è¤‡æ•°ã®selectè¦ç´ を連動ã•ã›ã‚‹ã“ã¨ãŒå¯èƒ½ã§ã™ã€‚ sponsors 使用方法 Dependent Selectã‹ã‚‰jquery.dependent.jsã‚’jQueryã‹ã‚‰jquery.jsをダウンãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚ <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.dependent.js"></script> <script type="text/javascript"> $(document).ready(func
第10回　今ã™ãã§ãã‚‹ï¼ãƒ¦ãƒ¼ã‚¶ãƒ“リティをå‘上ã•ã›ã‚‹ãƒ•ã‚©ãƒ¼ãƒ æ“作実践（2）：プラグインを使ã‚ãšã«ãƒãƒªãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’実装 | gihyo.jp
ã‚‚ã£ã¨ä¾¿åˆ©ã«ï¼jQueryã§ãƒ©ã‚¯ãƒ©ã‚¯ã‚µã‚¤ãƒˆåˆ¶ä½œï¼ˆå®Ÿè·µã‚µãƒ³ãƒ—ル付ã） 第10回今ã™ãã§ãã‚‹ï¼ãƒ¦ãƒ¼ã‚¶ãƒ“リティをå‘上ã•ã›ã‚‹ãƒ•ã‚©ãƒ¼ãƒ æ“作実践（2）：プラグインを使ã‚ãšã«ãƒãƒªãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’実装 ãƒãƒªãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ã‚’プラグインを使ã‚ãšã«å®Ÿè£…ã™ã‚‹ フォームã¯ä¸»ã«ã‚³ãƒ³ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã«ç›´çµã™ã‚‹å ´åˆãŒå¤šã„ã¨æ€ã„ã¾ã™ã®ã§ã€ãƒ¦ãƒ¼ã‚¶ãƒ“リティをå‘上ã•ã›ã‚‹ã€ã¤ã¾ã‚Šãƒ¦ãƒ¼ã‚¶ãƒ¼ã«æœ€å¾Œã¾ã§å…¥åŠ›ã—ã¦ã‚‚らãˆã‚‹ã‚ˆã†ãªãƒ•ã‚©ãƒ¼ãƒ 作りã¯ã¨ã¦ã‚‚é‡è¦ã§ã™ã€‚ ã©ã®ã‚ˆã†ãªæ©Ÿèƒ½ã‚’æŒã£ã¦ä½¿ã„ã‚„ã™ãã™ã‚‹ã®ã‹ã€ã«ã¯ãã®ã‚µã‚¤ãƒˆè‡ªä½“ã®ã‚¿ãƒ¼ã‚²ãƒƒãƒˆãƒ¦ãƒ¼ã‚¶ãƒ¼å±¤ã‚’èªè˜ã—ãŸä¸Šã§ç››ã‚Šè¾¼ã‚€å¿…è¦ãŒã‚ã‚Šã¾ã™ãŒã€ã©ã‚“ãªæ–¹æ³•ã§ä½¿ã„ã‚„ã™ãã§ãã‚‹ã®ã‹ã¯çŸ¥ã£ã¦ãŠã„ã¦æã¯ã‚ã‚Šã¾ã›ã‚“。 å‰å›žã¯ã€ãƒ©ãƒ™ãƒ«è¦ç´ を利用ã—ã¦ã€ç›´æ„Ÿçš„ã«åˆ†ã‹ã‚Šã‚„ã™ãã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã—ãŸãŒã€ä»Šå›žãƒ»æ¬¡å›žã«ã‹ã‘ã¦ã¯å°‘ã—çªã£è¾¼ã‚“ã§JavaScriptã§è¡Œã†ãƒãƒªãƒ‡ãƒ¼ã‚·ãƒ§ãƒ³ï¼ˆâ€»1）を実装ã—ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ 入力ã•ã‚ŒãŸæ–‡å—列をãƒã‚§ãƒƒã‚¯ã™
select ボックスを超便利ã«ã—ã¦ãれユーザビリティå‘上ã«ä½¿ãˆã‚‹ã€ŒjQselectableã€:phpspot開発日誌
select ボックスを超便利ã«ã—ã¦ãれユーザビリティå‘上ã«ä½¿ãˆã‚‹ã€ŒjQselectableã€ãŒGoogle Codeã«å…¬é–‹ã•ã‚Œã¦ã„ã¾ã™ã€‚ jQã¨ã„ã†ã ã‘ã‚ã£ã¦å½“然ãªãŒã‚‰jQueryプラグインã®å½¢å¼ã§ã™ã€‚ é©ç”¨å‰ã®æ™®é€šã®Select ボックスãŒä¾¿åˆ©ã«å¤‰åŒ–ã—ã¾ã™ 都é“府県ã®ç¸¦ã«é•·ã‹ã£ãŸã‚‚ã®ãŒæ¨ªæ–¹å‘ã«è¶…分ã‹ã‚Šã‚„ã™ã表示 日付も次ã®ã‚ˆã†ã«è¶…分ã‹ã‚Šã‚„ã™ã„セレクトã«ã€‚縦ã«é•·ã„ã®ã¨ã¯ã‚‚ã†ã‚ªã‚µãƒ©ãƒã§ããã†ã§ã™ã€‚ æ›´ã«ã€ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯é–¢æ•°ã«ã‚ˆã£ã¦ã‚¯ãƒªãƒƒã‚¯ã—ãŸå¾Œã®å‹•ä½œã‚‚定義ã§ãã‚‹ã£ã½ã„ã§ã™ã€‚ ã¯ã˜ã‚ã‹ã‚‰æ—¥æœ¬å¯¾è±¡ã¨ã„ã†ç‚¹ã§ã‚‚使ã„ã‚„ã™ã„ã§ã™ã。 実装もã€jQueryプラグインãªã®ã§è¶…使ã„ã‚„ã™ã„ã§ã™ã€‚ 次ã®ã‚ˆã†ã«åˆæœŸåŒ–ã™ã‚‹ã ã‘ã®ã‚ˆã†ã§ã™ã€‚ $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下ã®ã‚¨ãƒ³ãƒˆ
HTMLã ã‘ã§ã¯å®Ÿç¾ã§ããªã„ドãƒãƒƒãƒ—ダウンãƒã‚§ãƒƒã‚¯ãƒªã‚¹ãƒˆã®ä½œæˆJavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLã ã‘ã§ã¯å®Ÿç¾ã§ããªã„ドãƒãƒƒãƒ—ダウンãƒã‚§ãƒƒã‚¯ãƒªã‚¹ãƒˆã®ä½œæˆJavaScript。 複数é¸æŠžå¼ã®é¸æŠžãƒªã‚¹ãƒˆã¯æ™®é€šã«ä½œæˆã™ã‚‹ã“ã¨ãŒå‡ºæ¥ã¾ã™ãŒã€ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’使ã£ãŸã‚ã‹ã‚Šã‚„ã™ã„ＵＩã®å®Ÿç¾ã¯é›£ã—ã„ã§ã™ã。 「jQuery Dropdown Check Listã€ãªã‚‰jQueryプラグインãªã®ã§ã€éžå¸¸ã«ç°¡å˜ã«å®Ÿç¾ã§ãã¾ã™ã€‚ $("#s6").dropdownchecklist(); ã®ã‚ˆã†ã«ã€ï¼‘è¡Œã§åˆæœŸåŒ–ã§ãã‚‹ã¨ã“ã‚ã‚‚ç´ æ™´ã‚‰ã—ã„ã§ã™ã。 一昔å‰ã«ã‚„ã£ã¦ã„ã‚Œã°ã€ã©ã†ã‚„ã£ã¦ã‚„ã£ã¦ã‚‹ã‚“ã ã‚ã†ã¨æ¤œè¨Žã‚‚ã¤ã‹ãªã‹ã£ãŸã¨æ€ã„ã¾ã™ãŒã€é€²åŒ–ã—ãŸã‚‚ã®ã§ã™ã€‚ 関連エントリ JavaScriptを使ã£ãŸULリストをツリー風ã«è¡¨ç¤ºã™ã‚‹ã‚µãƒ³ãƒ—ル「Simple Tree Menuã€
テã‚ストエリアを入力内容ã«å¿œã˜ã¦è‡ªå‹•ã§ãƒªã‚µã‚¤ã‚ºã™ã‚‹jQueryプラグイン「autoResizeã€
twitter facebook hatena google pocket フォームã«è¨ç½®ã™ã‚‹ãƒ†ã‚ストエリアã¯ã‚る程度大ããã—ã¦ãŠããŸã„ã¨ã“ã‚ã§ã™ãŒã€ã‚¹ãƒšãƒ¼ã‚¹ã‚’ã¨ã‚‹ã®ã¯é¿ã‘ãŸã„。 ãã‚“ãªã‚ãªãŸã«æœ—å ±ã§ã™ã€‚ jQueryプラグインã®autoResizeã§å…¥åŠ›å†…容ã«å¿œã˜ã¦ãƒªã‚µã‚¤ã‚ºå¯èƒ½ã«ãªã‚Šã¾ã™ã€‚ sponsors 使用方法 autoResizeã‹ã‚‰autoresize.jquery.jsã‚’jQueryã‹ã‚‰jquery.jsをダウãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚ <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="autoresize.jquery.js"></script> <script> $(function(){ $('#idå').autoResize({ o
『jQueryã§htmlã®ãƒ•ã‚©ãƒ¼ãƒ ã‚’ç°¡å˜ã«æ•´åˆ—ã•ã›ã‚‹æ–¹æ³•ã€
本を買ã‚ãšã«è§£æ±ºã™ã‚‹Web制作ã®å°æŠ€ ホームページ作æˆã§ã¡ã‚‡ã£ã¨ã—ãŸã“ã¨ã‚’å‚考書を買ã‚ãšã«è§£æ±ºã™ã‚‹æ–¹æ³•ã‚’PHP CSS Webデザイン jQuery Flashã‚’ä¸å¿ƒã«ä¾¿åˆ©ãªæŠ€ã‚’ã¾ã¨ã‚ã¦ã„ãã¾ã™ï¼ç¾åœ¨ã€é•·é‡ŽçœŒé•·é‡Žå¸‚ã®åˆ¶ä½œä¼šç¤¾ã§Web作æˆä¸ï¼ ã¡ã‚‡ã£ã¨ä½¿ãˆã‚‹ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ãŒç´¹ä»‹ã•ã‚Œã¦ã„ãŸã®ã§ãƒ¡ãƒ¢ 綺麗ã«æ•´åˆ—ã•ã›ã‚‹ã®ã£ã¦ä»¥å¤–ã«æ‰‹é–“ãªã‚“ã§ã™ã‚ˆã。 ã“れを使ãˆã°æ¥½ã«ã§ãã¾ã™ã€‚ Justify elements using jQuery and CSS labelã®æ¨ªå¹…を一番長ã„サイズã«åˆã‚ã›ã¦ã¾ã™ã€‚ 以下引用ã§ã™ã€‚ $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); }); $("label").width(ma
jQuery Tutorial: Selecting Multiple Select Form Elements on the Fly | Chromatic
jQuery Tutorial: Selecting Multiple Select Form Elements on the Fly A couple of weeks ago, a client of ours needed a simple way to select some or all options in a multiple select form element that contained hundreds of options. Basically, they had various State/County combination's that they needed to assign to different pieces of content. So Article X might need to select all Counties in State Y.
ricollab Web Tech Blog - REST 入門(1 Web アプリケーションã®ã‚¢ãƒ¼ã‚テクãƒãƒ£)
åˆå‡º: 技術評論社刊『WEB+DB PRESSã€Vol.32 ã¯ã˜ã‚ã« Web アプリケーションã®ã‚¢ãƒ¼ã‚テクãƒãƒ£ POST 㨠GET ã®ä½¿ã„ã‚㑠リソースã¨çµ±ä¸€ã‚¤ãƒ³ã‚¿ãƒ¼ãƒ•ã‚§ãƒ¼ã‚¹ 階層化システムステートレスサームã¯ã˜ã‚㫠先進的㪠Web 開発者ã®é–“ã§ã€REST (Representational State Transfer) ã¨ã„ã†è¨€è‘‰ãŒæ³¨ç›®ã‚’集ã‚ã¦ã„ã¾ã™ã€‚REST ã¯Apache 創始者ã®ã²ã¨ã‚Šã§ã‚ã‚‹ãƒã‚¤ãƒ»ãƒ•ã‚£ãƒ¼ãƒ«ãƒ‡ã‚£ãƒ³ã‚°ã•ã‚“ãŒã€å½¼ã®åšå£«è«–æ–‡ã§æå”±ã—ãŸãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯åˆ†æ•£ã‚·ã‚¹ãƒ†ãƒ ã€ç‰¹ã« WWW ã®ã‚¢ãƒ¼ã‚テクãƒãƒ£ã‚¹ã‚¿ã‚¤ãƒ«ã§ã™ã€‚ アーã‚テクãƒãƒ£ã‚¹ã‚¿ã‚¤ãƒ«(Architectural style) ã¯è¤‡æ•°ã®ã‚¢ãƒ¼ã‚テクãƒãƒ£ã«å…±é€šã™ã‚‹æ€§è³ªã€æ§˜å¼ã€ä½œæ³•ã‚ã‚‹ã„ã¯æµå„€ã‚’指ã™è¨€è‘‰ã§ã™ã€‚ãŸã¨ãˆã° MVC (Model View Controler) ã¯ã‚¢ãƒ¼ã‚テクãƒãƒ£ã‚¹ã‚¿ã‚¤ãƒ«ã®ä¸€ç¨®ã§ã™ã€‚REST ã¯æ•°ã‚ã‚‹ã‚¢
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}