[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
JavaScriptでオブジェクトをクラスのように扱い、パフォーマンスの高いコードを書こう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです。 今回はJavaScriptでクラスを作る方法について書きたいと思います。 「jQueryはそこそこ理解できてきたし、JavaScriptも理解したい」「機能ごとに関数作ってるけど、規模が大きくなるに連れてコードがわかりにくくなる」などという、これからJavaScriptを使いこなしたい方々向けになります。 クラスとは みんな大好きサイ本ではこのように説明されています。 JavaScriptでは、同じプロトタイプオブジェクトからプロパティを継承する一連のオブジェクトをクラスと呼びます。 引用元：「JavaScript 第6版」 JavaScriptのクラスではプロトタイプベースの継承を行います。2つのオブジェクトが同じプロトタイプオブジェクトからプロパティを継承している場合、この2つのオブジェクトは同じクラスのインスタンスになります。 引用元：「JavaScr
JavaScriptのクラス定義方法を徹底解説！！
JavaScriptでは、本来のオブジェクト指向言語とは少し異なり、 正確なクラスの定義は出来ません。 しかし、JavaScriptでは強力な関数定義方法が用意されていますので、関数をクラスとして 実装する事で対応するのが一般的です。 今回の記事では、そんなJavaScript流のクラス定義方法をソースコード付きで解説します。 クラス定義とインスタンス生成時のコンストラクタについて クラス内のメンバ変数を定義しよう インスタンスメソッドを定義しよう クラス変数とクラスメソッドについて クラスを継承してみよう インスタンスメソッドのオーバーライド クラス定義とインスタンス生成時のコンストラクタについて JavaScriptでは、クラスの定義は関数の定義と同様に『function』を用いて定義します。 関数名がクラス名となり、関数内の処理がクラスのコンストラクタとなります。 定義したクラスをイ
JavaScriptのオブジェクト指向：プロトタイプをきちんと理解する - builder by ZDNet Japan
はじめに JavaScriptをより深く知りたい人のための当連載、今回が10回目です。 前回から、JavaScriptでオブジェクト指向を行うために必要な知識を解説しています。今回はその続きとして、「オブジェクトのプロトタイプ」というものについてお話ししたいと思います。 前回のおさらい 前回、JavaScriptで「クラス」を作るもっとも単純な方法として、以下のような方法をお見せしました。 function Person(name) { // this演算子を用いて、メンバを追加 this.name = name; this.hello = function() { // this演算子を用いてメンバを参照 alert("こんにちは。私の名前は" + this.name + "です。"); }; } thisキーワードを使って、オブジェクトに変数やメソッドを追加しています。前回の記事の最後
JavaScriptのnewって何？一体何なの？という話 - 愛と勇気と缶ビール
マクラ JavaScriptを使っている人なら知っていることだろうけど、JavaScriptはプロトタイプベースのオブジェクト指向を採用しているので「クラス」がない。オブジェクトしかない。 でも、組み込みの演算子としてnewがあって、それを使って var obj = new Object(); とか書けちゃう。クラスってものはJavaScriptにはないはずなのに、new ClassName();と書くとあたかもClassNameクラスのオブジェクトのインスタンスが生成され、それが返ってくるかのような挙動をしている。 これは気持ち悪い。言語仕様としてはクラスは本来存在しないのに、クラスのようなものが導入されている。まともな神経を持った人間なら、一体new演算子って何なの？という疑問を持つのが当たり前である。「{}はnew Object()のシンタックスシュガーです」とか言ってふんぞり返って
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
jQueryを使った文字数カウントとthrottle/debounce - ELAB.
はじめまして、こんにちは。 軽めのjQuery Advent Calendar 2012の9日目の記事です。 今回はよくある文字数カウントをjQueryで実装してみるのと、便利(?)なプラグインの紹介。 初記事ですので、どうぞお手柔らかにお願いさせていただきたく。（ちなみに現時点ではこれ以外にページはありません！） 文字数カウントの実装 早速ですが、こんな感じでHTMLとJSを書いていきます。 textareaに入力された文字数をdiv#result要素の中に表示していく流れですね。 HTML <textarea></textarea> <div id="result">0</div> JavaScript $(function(){ var cnt; // キー入力が発生する度に実行 $('textarea').on('keyup', function(){ // テキストエリアのval
jQueryでリストを一つずつ遅延して表示する
jQueryでリストを一つずつ遅延して表示する リストじゃなくてもいいのですが、羅列されたリストなどを表示するときjQueryで一つずつ表示してみます。 投稿日2013年03月15日 更新日2019年04月13日 とりあえずhtmlでリストを作成します。 html <ul class="delay-show"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> ...... </ul> jQueryのコードはこんな感じです。 javascript $(function() { $('ul.delay-show li') .css({opacity: 0}) .each(function(i){ $(this).delay(500 * i).animate({opacity:1}, 1500); }); }); delay メソッドでタイミングを遅らせて実行
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
ページ内の見出しに合わせて目次を自動生成する - かちびと.net
Result 簡易的なものなので汎用性は高くは無いかも。 jQuery (function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); //見出しを入れるボックスを生成 this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) { i = i + 1; //IDを合わせて見出しへのページ内リンクと目次へのページ内リンクを生成 $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Topへ ⇑</a>'); $('<li><a hr
jQuery 1.7の on() off()について調べてみた | バシャログ。
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
CSS3でHTMLを回転させるjQueryプラグイン「Animate CSS Rotation and Scale」 | Web活メモ帳
って、どこで使うんだろう。誰かのヒントになればって事でご紹介。 使い方 まずは、jQueryとプラグインを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery-css-transform.js" type="text/javascript"></script> <script src="jquery-animate-css-rotate-scale.js" type="text/javascript"></script> その後に、プラグインを有効化すれば動作するようです。 <script> setInterval( function () { $('#at_ex1').animate({rotate: '+=10deg'}, 0); }, 200 ); $('#at_ex1
PMSのため婦人科で処方された漢方薬（桂枝茯苓丸料エキス顆粒 ツムラ25）を飲んでいます
私はこれまで自分が時々イライラしやすいのは、 周囲の人が私をイライラさせているだけだと思っていました。 特に夫クン！ええ、アナタのことですってば（苦笑） イライラの原因はPMS ところが、ある日、電話で夫婦喧嘩の愚痴を実家の母にこぼしていたところ、 「ライラするのも分かるけど、でもあなたもちょっと怒り過ぎるところがあるわよね。」 とたしなめられました。 そうかな？・・・と思いながら黙っていると、母から 「もしかしたら、PMSなんじゃない？」と、言われました。 それ以来、自分が夫婦喧嘩で爆発した日をカレンダーに記していったところ、 母の指摘がビンゴ～！であることが判明しました＾＾； 婦人科で桂枝茯苓丸料エキス顆粒（ツムラ25）という漢方薬を処方 そこで、いつも子宮頸がんの検診をしてもらっている婦人科を受診して、生理前に自分で抑えがきかないほどイライラすることを主治医に相談をしてみました。そし
フリック動作でページ遷移させる | nagachan.net
スマートフォン等で、左右フリックでページ移動させてみました。 フリックのイベントが取得できれば、簡単です。 [デモページ] ※スマートフォンでご覧ください。下のQRコードからも移動できます。 フリックと言っても「フリックした」というイベントはなく、 画面をタッチした タッチしたまま指を動かした 画面から指を離した という3つのイベントにわかれていて、それぞれのイベント発生時に処理を行うようにします。 動作の概要 画面を左右にフリックして、次のページが存在していたら移動します。 フリック時にコンテンツも指に追随してスライドし、一定の移動距離以下であれば元の位置に戻ります。 JavaScriptファイルは共通化したいので、HTMLファイルに移動先のURLが入った変数を用意しました。変数が存在していれば、フリックの反応とページ遷移を行います。 JavaScript ※jQueryを
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO
僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに - jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home | Shuffle.js
http://www.hp-stylelink.com/news/2013/10/20131008.php
finefinefine.jp
