jQuery | 素材の壺

2018年5月26日

タブメニューをクリックしてコンテンツを切り替えるjQuery

タブメニューをクリックしてコンテンツを切り替える、よく使う動作のjQueryです。シンプル且つ汎用的に、タブメニューが増減しても簡単に対応しやすい書き方を意識し、コンテンツを表示させる時にふわっと表示...

2017年5月6日

最近では対応がほとんど必須となってきたPCでもスマートフォンでも閲覧できるように表示を切り分ける「レスポンシブ対応」。実装方法は様々ですが、今回はJavascriptでユーザーエージェントを取得したう...

2017年5月5日

ボタンをクリックしたらスクロール付きのDIV内で指定した要素までスクロールさせる動作をjQueryで実装してみました。ポイントはDIVに指定するCSSで、「position:relative」の指定が...

2017年4月5日

ボタンの連打を防ぐため、クリックされたらボタンに「disabled=true」を付与してクリックできないようにし、処理が終わったら「disabled=false」とする。フォームの処理などで使うことの...

2017年2月2日

特定のHTMLタグに囲まれた中身を空にしたい。フォーム関連で割と使用頻度の高いこの動作、jQueryで簡単に実装できます。 HTMLとjQueryの例下記のようなHTMLがあり、消去ボタンを押し...

2014年12月14日

このサイトでも採用していますが、クリックすると画面上部にスクロールするボタンを設置しているサイトは多いと思います。このボタンを初期表示では隠しておいて、ある程度スクロールしたらボタンがフェードインして...

2014年11月13日

例えば「1000000」という数字があった場合、お金や点数といった人が認識しやすいようにするにはカンマを付けます。PHPであれば「number_format」関数を使えばとても簡単に実装できますが、今...

2014年10月29日

リンク先のURLを動的に変更したい場合、jQueryだととても手軽に実装することが出来ます。この記事ではaタグのhrefを指定したURLに差し替える例と、.comから.jpに一部だけ置換する例をご紹介...

2013年10月19日

「ページトップへ」といえば多くのサイトやブログで採用されているボタンの類で、画面最上部まで戻るためのリンクです。特に情報量が多く縦長になりがちなコンテンツでは重要なユーザー補助となります。そん...

2013年8月28日

ボックスをタイル状に並べる時に良く使われるjQueryライブラリの一つに「jquery.masonry」がありますが、このライブラリを使用して実装しようとすると、下記のように下のボックスが上のボックス...