テーブル、リスト、段落など要素内のデータを簡易検索するjQueryプラグイン。 指定した文字列にマッチしたデータを持つ要素だけを絞り込んで表示することができます。 オプションのパラメータで簡単にカスタマイズすることができます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="C
Facebookのリアクションボタンを実装できるjQueryプラグイン「FaceMocion.js... 次の記事 ≫:レスポンシブな商品比較テーブル実装デモ
作成:2016/02/8 更新:2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール(SegmentedControl)。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
tipso - A Lightweight Responsive jQuery Tooltip Plugin 軽量・レスポンシブなツールチップ実装「tipso」。 普通のツールチップだと画面サイズが小さくなっても調整などはしてくれませんが、こちらはしてくれます。 スマホでのツールチップ表示にも対応。 関連エントリ ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」 新しいデザインのツールチップサンプル集 黒ベースでクールにアニメーションするツールチップ実装jQueryプラグイン「DarkTooltip」
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
画像などを遅延読み込みをするlazyloaderが久々に必要になってナウいやつを探してたら見つけた。 the ultimate and lightweigth lazyLoaderだそうです。つよそう。 軽く使って良さそうなのにあまり記事がなかったので個人的まとめ。 良いとこ ピュアな実装でjqueryなどフレームワークに依存していない jquery.lazyloadあたり使いたいけどjqueryを入れねば、みたいな問題がない。 レスポンシブ対応などが豊富 プラガブルな実装 画像以外にもスクリプトやiframeにも対応しているよう Star数:2625(2014/12/27時点)。 作者はhtml5shivなどの作者らしい https://github.com/aFarkas 悪いとこ initial commitが3ヶ月前(2014/10)でまだまだ枯れてない バージョンは0.6。まだベ
jQueryはプラグインの種類も豊富なのでそれだけで事足りることがほとんどではありますが、prototype.js等のライブラリと併用したいというときもたまにあります。 そういう場合に起こるのがライブラリ同士のコンフリクト(衝突)で、$関数がそれぞれで異なる定義をしているために起きてしまうものです。よってこれを何とかしておかないとエラーになってしまいます。 回避方法その1 – $関数ではなくjQuery関数を使う 回避方法その1は$関数ではなくjQuery関数を使う方法です。jQuery関数と$関数は名前が違うだけで中身は同じです。 まず、1行目のjQuery.noConflict();$関数を他のライブラリに開放します。これで$関数が使えなくなるので、代わりとしてjQuery関数を使います。 そのため、jQueryスクリプト内の$はすべてjQueryとする必要があります。 jQuery.
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる|Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法|Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー|Webpark とい
About 通常のカウントアップの方法だと、カウントアップさせる数値が大きい程、処理完了まで時間がかかってしまう問題がありました。それに対応したのが本スクリプトです。 動作にはjQueryが必要です。 Example 使用例 結果表示 0 数字を選択してください 25 6402 432800 初期化する clear 同時使用もOK 好きな季節は? 春 夏 秋 冬 わからない 結果表示(人数は適当です) 0人 Download あまり汎用性は無いですがプラグイン化しました。 jquery.number_counter.js How to use 1. jsの読み込み headタグにjsの読み込みの記述をします。同時にjQueryの読み込みもします。 <script src="js/jquery.min.js"></script> <script src="js/jquery.number_c
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting w
jQueryはJavascriptとHTMLを結びつけるJavascriptライブラリ。 autoResizeは、そのjQueryを使って、テキストエリアに入力したデータ量に合わせて、エリアをリサイズするスクリプト。 autoResizeの使い方は下記の通り。 --- 1. jQueryとautoResizeをここからダウンロード。 jQuery : jquery.min.js autoResize : autoresize.jquery.js or autoresize.jquery.min.js (僕は、autoresize.jqueryを使っている) 2. 自分の.htmlファイルのheadタグにダウンロードしたスクリプトのパスを入れる。 <head> <script src="js/jquery.min.js" type="text/javascript"></scri
Gix075/jqueryIntroLoader GitHub ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」。 ページ全体が読まれるまで、ローディングアニメーションを表示させるjQueryプラグインです。 アプリなどではページ全体を読み終えるまでローディングアニメーションを表示する事が多いですが、WebViewベースでアプリっぽく、を実現する際に活用できそうです 関連エントリ 流行りのYoutube風ローディングバー実装jQueryプラグイン スクリプトで滑らかに動かすローディングアニメーション実装jQueryプラグイン「shCircleLoader」 超カッコ良いプレローディングエフェクトサンプル
作成:2015/03/2 更新:2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ 1.クリック時のエフェクト 2.フォームクリック時のエフェクト 3.テキストに11種の動きを出すエフェクト 4.分離するエフェクト フルスクリーンの見栄えをよくする 5.フルスクリーン 縦スライド3つ 6.全画面+オーバーレイ 7.フルスクリーン背景+ローディング 8.写真から背景色を抽出 9.background-size 対策 ドロワーメニュー 10.ドロワーメニュー3つ スクロールエフェクト 11.スクロ
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
jqueryで http://hogehoge.com/index.htm?cid=xx とかのget引数を取り扱いたく、色々調べたところ http://jquery-howto.blogspot.comさんに情報がありました。 function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } [/code] 上記のfuncti
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く