Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
Rails 4のturbolinksについて最低でも知っておきたい事
Rails 4のturbolinksについて最低でも知っておきたい事 （追記）turbolinksに関するセキュリティ上の懸念について turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptやCSSのパースを省略することで高速化するgemで、Rails 4からはデフォルトで使用されるようになります。 高速化は大歓迎なのですが、JavaScriptのイベントの起き方が変わるため、Rails 3までの書き方をしているとまず間違いなく問題が起きます。しかも、Rails 4ではデフォルトの機能ですので、最新版を使いたいなら必ず知っておかなければいけません。 本エントリではturbolinksを使うために絶対に知らなければいけないことを分かりやすく紹介したいと思います。 動作 turbolinksの動作は、すごく大雑把に言うと以下の通りです。 リンクのclickイベントをフッ
jQuery trigger event when click outside the element
$(document).click(function(evt) { var target = evt.currentTarget; var inside = $(".menuWraper"); if (target != inside) { alert("bleep"); } }); I am trying to figure out how to make it so that if a user clicks outside of a certain div (menuWraper), it triggers an event.. I realized I can just make every click fire an event, then check if the clicked currentTarget is same as the object selected from
CoffeeScriptをおすすめしたいワケ
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / 以下のエントリでも少し書いたけれども、 CoffeeScriptいいかも - Takazudo hamalogそれ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、 サンプルこのひとまとめのUIを管理するクラス的な物を作ろうとしたら、例えば以下のようになる。 var Hoge = function(el) { this.content = el.find
jqueryでclick()のコールバック関数に引数(データ)を渡す方法 - not good but great
demo 無名関数を英語にしたら「no name function」だと思っていたが、何だか気持ち悪かったので調べてみると「nameless function」だった。 匿名関数(anonymous function)って呼び方もある。 404 Blog Not Found : jargon - 無名関数(nameless function)?匿名関数(anonymous function)? どうでもいいけどjsfiddleでRunさせるためのショートカットキーは「Ctrl+Return」。Returnキーってなんだっけと思ったEnterキーのことだった件。 Enterキーとは 「Returnキー」 (Return key) (Enter key)： - IT用語辞典バイナリ 無名関数で実行 <p id='nameless'>nameless function</p> $("#namel
Rails: link_to で POST したら Request too long と言われたあなたへ | TECHSCORE BLOG | TECHSCORE BLOG
GET ではなく POST でリクエストを送りたい動機としては、次のようなものがあると思います。 リンク先が POST しか受け付けてくれない。 リンク先が POST しか受け付けてくれず、パラメータはリクエスト本文で指定したものだけが受け付けられる。（URL にクエリ文字列として含めても受け付けてくれない）。 リクエストパラメータが多すぎで、URL の最大長を超えてしまう。 一つ目の「リンク先が POST しか受け付けれくれない」という場合は link_to の method オプションで post を指定すれば問題ありませんが、残り二つの場合は上手くいきません。 というのも、link_to の method オプションに post を指定したとしても、パラメータは URL に含まれてしまうからです。 パラメータはリクエスト本文に含めて POST で送信したい パラメータをリクエスト本文
jQueryでoption要素を追加する方法
jQueryでoption要素を追加する方法を紹介します。 １．option要素を追加する 次のselect要素があると仮定します。select要素には2つのoption要素が設定されています。 <select name="foo" id="foo"> <option value="1">aaa</option> <option value="2">bbb</option> </select> これにvalue属性が「3」、コンテンツが「ccc」というoption要素を追加するには次のように記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ var option = $('<option />'); opti
jQueryプラグインの中に出てくるセミコロン「;」
jQueryプラグイン jQueryプラグインのソースを読んでいると、無名関数の先頭にセミコロン「;」を付けているのを見かけたりします。 たとえば、fancyboxとかがそうです。 ;(function($){ ..etc })(jQuery); jQueryの$関数みたいなものかな？と思いつつ、JSLintとかで文法チェックするとエラーになりますよ。 ただ、なんとなく予想はついていたので、ググってみると英語のフォーラムに書いてありました。 http://markmail.org/message/3gppon7hfmw7jqr7 ざっくり書くと、「セミコロンが先頭にあるプラグインを読み込む前に、セミコロンがちゃんと書かれていないコードがあるとバグッちゃうからつけといたよ！」ということですね。 jsでのセミコロン jsではセミコロンの自動補完という謎の機能があるため、こんな感じの残念なソース
jQueryプラグインの作り方 ~ 重要な3つのポイント ~ - nigoblog
jQueryプラグインの作成方法について書いていきます。 jQueryのプラグインを一言でいうと 「jQueryクラスのメソッド」 ということで、jQueryを一つのクラスと考えそのメソッドを作るということが 「jQueryプラグインを作成する」 ということです。 つまり javascriptのオブジェクト指向がわかる javascriptのメソッド作成方法がわかる jQueryを一つのクラスとして捉える 上記3つのポイントを抑えるだけで、jQueryのプラグインは簡単に作ることができます。 では早速1番目のポイントから書いていきます。 javascriptのオブジェクト指向がわかる javascriptのオブジェクト指向は少し特殊です。 PHPやJava、rubyなどの場合は class クラス名 { ~ } などのように書きます。 一方javascriptの場合は var クラス名 =
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
jQuery Mobile Docs - Buttons
ボタンにアイコンを加える jQuery Mobile のフレームワークは、モバイルアプリケーションで頻繁に使われる選りすぐりのアイコンセットを収録しています。ダウンロードサイズを最小限に抑えるため、アイコンはCSSスプライトにより一つのファイルにまとめられており、黒くて丸い半透明の影が自動的に加えられるため、どのような背景色に対しても見栄えがします。 ボタンに対して data-icon 属性を追加することでアイコンを追加できます。下記に例を示します。 <a href="index.html" data-role="button" data-icon="delete">削除</a> アイコン付きのボタン: 削除 アイコンセット 下記のように data-icon 属性を設定することで各種アイコンを表示できます。 左向き矢印 - data-icon="arrow-l" ボタン 右向き矢印 - d
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
jQuery Mobileのバージョンアップではまった - pushStateの存在 - | PPl@ce
jQuery Mobileをつかってスマートフォン対応をしたときにはまったこと。 前提jQuery Mobileのcss、javaScriptは以下のように利用 cssはダウンロードし自分のサーバにアップjavaScriptはCDNを利用また、自前としては 一部、自前のcssを用意設定用の自前のjavaScriptを用意上記から以下のような感じになってます。 <link href="/jquery/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> <link href="/css/jquery-custom.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <
jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる - Cyokodog :: Diary
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回、前々回のエントリではボックス要素を例にサイズや位置、スクロール量などの求め方について書きましたが、実際のプラグインの実装においてこれらの情報が必要になるのは、ブラウザの表示領域に対してということが多いかと思います。 具体的にはツールチップなどの機能で、画面の端の要素を hover した時、ポップアップがブラウザの表示領域内に収まるように表示位置を調整するような場合に、ブラウザの表示領域のサイズやスクロール量などが必要になります。 jQuery でブラウザの表示領域をつかむ方法 ブラウザの表示領域を jQuery でつかむには、以下のような記述でできそうです。 $('html') $(window) $(
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
extend で継承 - わからん
jQuery の extend を用いた継承の書き方を調べました． ▼ コード $(function() { // 親クラスの定義 var PClass = function() {}; PClass.prototype = { fn1: function() {}, fn2: function() { console.log("親クラスの fn2 を実行"); }, fn3: function() { console.log("親クラスの fn3 を実行"); }, }; // 子クラスの定義 var CClass = function() { console.log("CClass のコンストラクタを実行"); }; $.extend(CClass.prototype, PClass.prototype, { fn1: function() { console.log("子クラスの f
第4回 要素の操作＆ユーティリティ編
連載目次 $.eachメソッドは、引数objで指定されたオブジェクト（ハッシュ）、または配列の内容を、コールバック関数fncにより順に処理します。 コールバック関数fncは、以下のような性質を持ちます。 第1引数は、オブジェクト（ハッシュ）のキー、または配列のインデックス番号を受け取る 第2引数は、オブジェクト／配列の個々の値を受け取る 戻り値としてfalseを返した場合、その場で繰り返し処理を中止（それ以外の値を返した場合には無視） それでは、具体的な例を見てみましょう。以下のサンプルは、配列booksの内容を順にリスト表示します。ただし、categoryキーが「ASP.NET」以外のものが登場したところで処理を打ち切ります。 <script type="text/javascript"> $(function() { // 書籍情報を配列booksに格納 var books = [ {
iPhoneやAndroid等のタッチデバイス向けイメージギャラリー用JSライブラリ・PhotoSwipeなかなか良いですぞ
PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhoneとiPadでのキャプチャです。 iPhoneでのキャプチャです デフォルト サムネを幅に自動で合わせてくれます。 ランドスケープ ランドスケープ時でもサムネイルを自動で拡大し、幅を合わせてくれます。 画像の閲覧 単体表示はサムネイルをタップします。左右フリックで進んだり戻ったり。 ナビゲーションもある 単体、ランドスケープ。タップすると下部にナビゲーションバーが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
add querystring to URL on buttonclick jquery
GitHub - nicolaskruchten/pivottable: Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.
