Panel slider example シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」。 ページの左からあらわれ、コンテンツごとスライドさせるスマホアプリ風メニューが実装出来ます。 関連エントリ 開閉するサイドメニューの実装ができるjQueryプラグイン「tendina」 シンプルデザインなページサイドをメニューにできる「Simple Sidebar」
シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」:phpspot開発日誌
Panel slider example シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」。 ページの左からあらわれ、コンテンツごとスライドさせるスマホアプリ風メニューが実装出来ます。 関連エントリ 開閉するサイドメニューの実装ができるjQueryプラグイン「tendina」 シンプルデザインなページサイドをメニューにできる「Simple Sidebar」
俺のJSライブラリの世界観(2014末版) - Qiita
概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指しているのだけど、コアドメインをTypeScriptで書いて、それをUI層からCoffeeScri
[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems
タップするとナビゲーションがスライド。 MenuItemsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="menuitems/menuitems.min.css" /> </head> <body> ... コンテンツ ... <script src="jquery.min.js"></script> <script src="menuitems/menuitems.min.js"></script> </body> Step 2: HTML 各コンテンツはsection or div要素で実装し、それぞれに「.menuItem」を付与し、data属性でラベルを記述します。 <body> <section|div class="menuI
![[JS]縦長ページでデスクトップでもスマホでもデザインの邪魔をしないナビゲーションを実装するスクリプト -MenuItems](https://cdn-ak-scissors.b.st-hatena.com/image/square/490093a26eeae705d029e62c12e65ec0e91614fc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120901.png)
jQuery の関数をオーバーライドする方法 - 株式会社CFlatの明後日スタイルのブログ
今回は、jQuery を使って$('#hoge').hoge()とした時に、元のhogeの機能に加えて追加のコードが走るようにしたいですね、というお話です。 普通の JavaScript で関数をオーバーライドする方法 こちらは JSer なら常識ですね。 var orgHoge = window.hoge; window.hoge = function() { // TODO: 事前の追加のコード var result = orgHoge.apply(this, arguments); // TODO: 事後の追加のコード return result; }; なお、このコードを見て「処理が足りてないじゃないか」と言える方は、以降の話は全く必要ないかと思います。 jQuery の関数をオーバーライドする方法 では、jQuery で$('#hoge').hoge()とした時のhogeはどこで
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
jQuery リファレンス：目次
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/94a5e0fe3568ecb41b259e96c1bc62f0c1f09601/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
【書評】JavaScriptを気持ちよく学べるレシピ集 『JavaScript逆引きレシピ jQuery対応』
人気本を多数執筆してきた著者（山田さん）が、JavaScript技術を「逆引きレシピ」スタイルにて整理した一冊です。コードを書いていると、 「あれ？これどう書く？」 と手が止まるのはよくあること。ググッて調べても良いけれど、なかなか答えに辿りつかない。そんな時に役立つ一冊です。 1～3章は、JavaScriptの基本構文が書かれています。他のプログラミング言語に慣れている人でも、JavaScriptにはさまざまに「独特な癖」があります。知らないと思わず嵌まってしまう落とし穴。これらを避けるためのポイントが説明されているので、ここはリファレンスとしてだけでなく、通読がお勧めです。これまでわかっていたと思いこんでいた部分を再確認し、基礎固めするのに役立ちます。 例えば「クラスを定義したい」というタイトルであっても、説明している内容は「構文」「プロトタイプベースのオブジェクト指向」「文脈によるt
alert()のダイアログのスタイルを変更するスクリプト・SweetAlert - かちびと.net
alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script> コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです！", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解！', confirmButtonCol
[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
![[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4b391a890221ac5696699ef145a5921c27e5824/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100601-01.png)
jQueryでスクロールするとヘッダーを固定させる
最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
指定範囲内にタブ移動の範囲を制限するjQuery拡張 - Qiita
指定範囲内にタブ移動の範囲を制限するjQuery拡張 カスタムダイアログの範囲にフォーカスを制御したいときとかに よくあるダイアログ範囲外にタブフォーカスが回りこんじゃう奴の防止。 jQuery.ui.dialogの手法がいいなーって思ったのでそこだけ使えるようにしてみた。 セレクタの範囲を広げれば自由に制御可能。 でも最初と最後をつないでいるだけなので、範囲内での遷移順位はDOM生成順番に依存するはず。 (function($) { $.fn.tabChain = function(option) { option = $.extend({},{onReadyFocus:false},option); var chains = []; var init = function(){ var first = chains[0]; var last = chains[chains.length
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
0行から始めるクライアントサイドJavaScript入門 - Qiita
alertの代替手段を提供するSweetAlert
Googleスプレッドシートをtable要素としてWebサイトに埋め込むスクリプト・「Sheetrock」 - かちびと.net
リアルタイムで入力チェック： jQuery-Validation-Engine のカスタマイズ - Qiita
