power-doctest ã¨ã„ㆠdoctest風 ã«ã‚³ãƒ¼ãƒ‰ã¨è©•ä¾¡çµæžœã®ã‚³ãƒ¡ãƒ³ãƒˆã‚’並ã¹ã‚‹ã¨ãƒ†ã‚¹ãƒˆã¨ã—ã¦å®Ÿè¡Œå‡ºæ¥ã‚‹ã‚ˆã†ãªNode製ã®ãƒ„ールを作りã¾ã—ãŸã€‚
JavaScriptã§doctestを行ㆠpower-doctest を作ã£ãŸ
power-doctest ã¨ã„ㆠdoctest風 ã«ã‚³ãƒ¼ãƒ‰ã¨è©•ä¾¡çµæžœã®ã‚³ãƒ¡ãƒ³ãƒˆã‚’並ã¹ã‚‹ã¨ãƒ†ã‚¹ãƒˆã¨ã—ã¦å®Ÿè¡Œå‡ºæ¥ã‚‹ã‚ˆã†ãªNode製ã®ãƒ„ールを作りã¾ã—ãŸã€‚
目的別ã§è€ƒãˆã‚‹lightbox(モーダルウインドウ) ï½žã‚¢ã‚¯ã‚·ãƒ§ãƒ³ãƒ»é«˜ç´šä»•æ§˜ç·¨ï½žï½œæ ªå¼ä¼šç¤¾ã‚¢ã‚¯ãƒˆã‚¼ãƒï½œã‚¯ãƒªã‚¨ã‚¤ãƒ†ã‚£ãƒ–ブãƒã‚°
å‰å›žã¯ã€ã‚·ãƒ³ãƒ—ルã€ã‚®ãƒ£ãƒ©ãƒªãƒ¼ç·¨ã¨ç§°ã—ã¦ã€lightboxã®é•ã„ã‚’ã‚ãšã‹ã§ã™ãŒã€ç´¹ä»‹ã—ã¾ã—ãŸã€‚ 今回ã¯å‹•ãã®ã‚ã‚‹lightboxプラグインを次ã„ã§ã”紹介。 sexylightbox デモ   ダウンãƒãƒ¼ãƒ‰ 使用ライブラリ：mootool.js(ver.1.2) 対応形å¼ï¼šç”»åƒ 実行ã™ã‚‹ã¨ä¸Šã‹ã‚‰ãƒ¢ãƒ¼ãƒ€ãƒ«ã‚¦ã‚¤ãƒ³ãƒ‰ã‚¦ãŒå‹¢ã„良ã振ã£ã¦ãるライトボックス。エンターテイメントãªã‚µã‚¤ãƒˆã§ä½¿ã†ã¨èºå‹•æ„Ÿã‚’出ã—ãŸã‚Šã€ã‚µã‚¤ãƒˆã®å°è±¡ã«ã‚¤ãƒ³ãƒ‘クトãŒå‡ºã¾ã™ã€‚ 使ã„方： 1.ダウンãƒãƒ¼ãƒ‰ã—ãŸç”»åƒãƒ•ã‚©ãƒ«ãƒ€ã¨css,jsファイルãªã©ã‚’ä»»æ„ã®ä½ç½®ã¸é…ç½®ã—ã¦å‘¼ã³å‡ºã—。 <link href="SexyLightBox/sexylightbox.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="SexyLightBox/mooto
CSS3ã‚„HTML5ã®å¯¾å¿œçŠ¶æ³ã‚’判別ã™ã‚‹ã‚¯ãƒã‚¹ãƒ–ラウザJavaScriptライブラリ「Modernizr〠| hijiriworld Web
Posted on: 2012/04/06 CSS3ã‚„HTML5ã®å¯¾å¿œçŠ¶æ³ã‚’判別ã™ã‚‹ã‚¯ãƒã‚¹ãƒ–ラウザJavaScriptライブラリ「Modernizr〠HTML5 ã‚„ CSS3 ã¯ãƒãƒªãƒãƒªä½¿ã£ã¦ã„ããŸã„ã¨ã“ã‚ã§ã™ãŒã€ãƒ–ラウザã®å¯¾å¿œçŠ¶æ³ã‚‚æ°—ã«ãªã‚‹ã¨ã“ã‚ã§ã™ã€‚（実際ã«éžå¯¾å¿œãªã®ã¯IEã ã‘ãªã®ã§ã©ãƒ¼ã§ã‚‚ã„ã„ã‘ã©ï¼‰ HTML5 ã‚„ CSS3 を使ã†ã¨ã„ã†ã“ã¨ã¯ã€å¤ã„ãƒ–ãƒ©ã‚¦ã‚¶ã‚’çŠ ç‰²ã«ã™ã‚‹å¯èƒ½æ€§ã‚‚ã‚ã‚Šã¾ã™ã€‚（実際ã«éžå¯¾å¿œãªã®ã¯IEã ã‘ãªã®ã§ã©ãƒ¼ã§ã‚‚ã„ã„ã‘ã©ï¼‰ ã¨ã„ã†ã“ã¨ã§ã€ CSS3ã‚„HTML5ã®å¯¾å¿œçŠ¶æ³ã‚’判別ã™ã‚‹ã‚¯ãƒã‚¹ãƒ–ラウザJavaScriptライブラリ Modernizr ãªã«ãŒã§ãã‚‹ã®ã‹ï¼Ÿ ブラウザ㮠HTML5 ã‚„ CSS3 ãªã©ã®å¯¾å¿œçŠ¶æ³ã‚’判別ã—ã€HTMLè¦ç´ ã«ã‚¯ãƒ©ã‚¹ã‚’ä»˜åŠ ã—ã¦ãã‚Œã¾ã™ã€‚ <html lang="ja"> ↓ <html lang="ja" class=" js flexb
[JS]エレメントをグリッド状ã«ãƒ©ãƒ³ãƒ€ãƒ ã«é…ç½®ã—ãŸã‚Šã€Pinterest風ã«é…ç½®ã™ã‚‹ã‚¹ã‚¯ãƒªãƒ—ト - BlocksIt.js
BlocksIt.jsã®ä½¿ã„æ–¹ Step 1: 外部ファイル 「jquery.jsã€ã¨å½“スクリプトをhead内ã«è¨˜è¿°ã—ã¾ã™ã€‚ ※jQueryã¯1.7.1ã§é–‹ç™ºã€‚ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLã¯å¯¾è±¡ã¨ãªã‚‹ç¯„囲をラッパーã§åŒ…ã¿ã€å„パãƒãƒ«ã‚’åŒåˆ—ã«é…ç½®ã—ã¾ã™ã€‚ パãƒãƒ«ã¯ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã§divè¦ç´ を対象ã«ã—ã¦ã„ã¾ã™ãŒã€ä»»æ„ã®è¦ç´ ã§å®Ÿè£…ã§ãã¾ã™ã€‚ <div id="container"> <div>パãƒãƒ«</div> <div>パãƒãƒ«</div> <div>パãƒãƒ«</div
<script>ã‚¿ã‚°ã®async属性を使ã‚ãšã«éžåŒæœŸã§JavaScriptã‚’èªã¿è¾¼ã‚€æ–¹æ³• | ã•ãらãŸã‚“ã©ã£ã¨ã³ãƒ¼ãš
HTML5 ã§ã¯ <script> ã‚¿ã‚°ã« async ã¨ã„ã†å±žæ€§ãŒåŠ ã‚ã£ã¦ã¾ã—ã¦ã€ã“れを指定ã—ã¦ãŠã㨠src ã§æŒ‡å®šã•ã‚ŒãŸ JavaScript ファイルã®å®Ÿè¡ŒãŒéžåŒæœŸã§è¡Œã‚ã‚Œã¾ã™ã€‚（src 属性を指定ã—ãªã„㨠async ã¯æ„味をæŒã¡ã¾ã›ã‚“。） <script type="text/javascript" src="http://..." async="async"> </script> ã‚°ã‚°ã£ã¦ã‚‹ã¨ async ã®å€¤ã¨ã—㦠async=â€true†を指定ã—ã¦ã„るページãŒå¤šã„よã†ã§ã™ãŒã€W3C ã® HTML5 ã®å®šç¾©ï¼ˆ4.3.1 The script element 㨠2.4.2 Boolean attributes å‚照）ã ã¨ç©ºã®æ–‡å—列ã‹å±žæ€§åãã®ã‚‚ã®ã‚’指定ã—ã‚ã£ã¦ã“ã¨ã«ãªã£ã¦ã¾ã™ã®ã§ã€ã“ã£ã¡ãŒæ£ã—ã„ã§ã™ã€‚（ãŸã¶ã‚“w） If the attribute is present,
[JS]スマートフォンã®ã‚¿ãƒƒãƒã‚¤ãƒ™ãƒ³ãƒˆã‚’å–å¾—ã™ã‚‹å„スクリプトã®ã¾ã¨ã‚（仕様比較）
タッãƒã‚¤ãƒ™ãƒ³ãƒˆã‚’å–å¾—ã™ã‚‹å„スクリプトã®å¯¾å¿œã‚¤ãƒ™ãƒ³ãƒˆã€ã‚¹ã‚¿ãƒ³ãƒ‰ã‚¢ãƒãƒ¼ãƒ³ãªã®ã‹jQueryãŒå¿…è¦ãªã®ã‹ã€ãƒ•ã‚¡ã‚¤ãƒ«ã®å®¹é‡ãªã©ã€ä»•æ§˜ã®æ¯”較をã¾ã˜ãˆã¦ç´¹ä»‹ã—ã¾ã™ã€‚ QUOjs イベント タッãƒã€ã‚¿ãƒƒãƒ—ã€ãƒ€ãƒ–ルタップã€ãƒ›ãƒ¼ãƒ«ãƒ‰ã€ãƒ•ã‚£ãƒ³ã‚¬ãƒ¼ã€ã‚¹ãƒ¯ã‚¤ãƒ—ã€ã‚¹ãƒ¯ã‚¤ãƒ—アップã€ã‚¹ãƒ¯ã‚¤ãƒ—ライトã€ã‚¹ãƒ¯ã‚¤ãƒ—ダウンã€ã‚¹ãƒ¯ã‚¤ãƒ—レフトã€ãƒ‰ãƒ©ãƒƒã‚° 補足 jQueryã¨ã®ã‚³ãƒ³ãƒ•ãƒªã‚¯ãƒˆã‚’é¿ã‘ã‚‹ãŸã‚ã€ã€Œ$$ã€ã‚’使用。 対応予定（2フィンガータップã€ãƒã‚¦ãƒ†ã‚¤ãƒˆã€ãƒ”ンãƒã‚¢ã‚¦ãƒˆã€ãƒ”ンãƒï¼‰ 仕様 スタンドアãƒãƒ¼ãƒ³ ファイルサイズ Minified: 13KB Hammer.js イベント タップã€ãƒ€ãƒ–ルタップã€ãƒ›ãƒ¼ãƒ«ãƒ‰ã€ãƒ‰ãƒ©ãƒƒã‚°ã€ãƒ”ンム補足 タッãƒã‚¸ã‚§ã‚¹ãƒãƒ£ã ã‘ã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ã—ãŸã‚¹ã‚¯ãƒªãƒ—ト。 仕様 スタンドアãƒãƒ¼ãƒ³ jQueryã®ãƒ—ラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}