jQuery の.on()をもういっぺん理解してみる - あまり新しくないもの
jQueryのイベントハンドリングには、現在 .on(),.off()のみが推奨されて利用されています。 その基本的な使い方はこんなかんじでした。 $(element).on(event, function() { console.log('event fired!'); }); この場合、対象となる$(element)において指定したeventが発火した時に、コールバック関数が呼び出されます。非常に直感的ですね。 ところで、これは以前の.bind()と全く同じです。 .bind()の場合は、指定したずばりその要素に対してのみ、イベントハンドリングを行います。よって、.bind()が呼び出されたその時点で存在しない要素に対しては、たとえセレクタが一致していたとしてもハンドリングが行われません。 このことを利用すれば、イベントハンドリングをしたいまさにその要素にのみ、たとえその後同じセレクタ
【JavaScript】関数定義における4つの注意点 - みこむらめもむらむらむら
JavaScriptにおける関数の定義はシンプルだが 実際にコーディングに取り組んでみると 思わぬ不具合に悩まされることもある よくある誤りを避けるヒントを4つ紹介する はーいよろしくです return命令は途中で改行しない JavaScriptでは「基本的に」セミコロンで文末を認識する ただしセミコロンを省略した場合にも 適宜、前後の文脈から分の末尾を判断する つまりJavaScriptでは文末に セミコロンを付けることが好ましいが「必須ではない」 このような寛容さは 基本的にJavaScriptのハードルを下げる要因になるものだが 時として要らぬ混乱をもたらす原因にもなる var triangle = function(base, height) { return base * height / 2; } document.writeln('三角形の面積:' + triangle(5,
jQueryプラグインのメソッドパターン
jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
「ノンプログラマーのための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
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】
こんにちは、橋本です。 今回は小ネタを１つ紹介したいと思います。 画像投稿フォームを作る際に、投稿された画像を即時表示したいなんてことありませんか？ そんなときに便利なのが、HTML５で追加されたFile API。 File APIを使えば、投稿された画像（正確には、選択されたローカルファイル）の情報を取得することができます。 では、画像投稿機能のサンプルを元に、File APIの使い方を見て行きましょう。 File API自体はjQueryと何の関係もありませんが、いろいろと面倒なので今回もjQueryを使っています。 サンプル <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js" type="text/jav
jQueryでセレクタを複数指定する方法
ご存知の方も多いと思いますが、jQueryでセレクタを複数指定する方法を紹介します。 １．セレクタを複数指定する jQueryでセレクタを複数指定するには、セレクタを次のようにカンマで区切ります。 HTML <h1>foo</h1> <h2>bar</h2> <h3>hoge</h3> jQuery $('h1, h2, h3').css('font-size','20px'); 適用前 適用後 セレクタには、要素セレクタ・IDセレクタ・classセレクタなど、異なる種類のものを設定することももちろんできます。 HTML <div id="foo"> <p>aaa</p> </div> <div> <p class="hoge">bbb</p> </div> <div id="bar"> <p>aaa<span>bbb</span>ccc</p> </div> jQuery $('#foo
ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」
ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」を紹介します。 FitText ウェブサイトをPC・スマホ・タブレットなど色々なサイズのディスプレイに対応させるときに便利そうです。 １．サンプル 上記の配布サイト自体がサンプルになっていますが、ためしに作ってみました。 サンプル ブラウザの幅を変更するとタイトルの「FitTextサンプル」の部分が拡大・縮小します。 以下、具体的な設定方法です。 ２．FitTextのダウンロード 「FitText」のページにある、「Download on Github」をクリック。 「ZIP」をクリック。これでダウンロードが開始します。 ダウンロードしたアーカイブを展開した中にあるjquery.fittext.jsを任意の位置にアップロードします。 ３．FitTextの設定 次のHTMLを拡大・縮小の対象にしてみま
jQueryで要素をシャッフルするプラグイン「jQuery Shuffle Plugin」 | Web活メモ帳
ランダムに要素を並び替える バナーの順番をランダムで切り替えたり、おすすめ情報の並び順を切り替えたりする時に使える「jQuery Shuffle Plugin」をご紹介。 jQueryのプラグインを使用すれば、特定の要素だけランダムで表示できるようになります。 ソースコードは以下 (function($){ $.fn.shuffle = function() { return this.each(function(){ var items = $(this).children(); return (items.length) ? $(this).html($.shuffle(items)) : this; }); } $.shuffle = function(arr) { for( var j, x, i = arr.length; i; j = parseInt(Math.random(
Media QueriesとjQueryを使って、スマートフォンでアクセスした時だけナビゲーションメニューを上に隠す
シンプルで良かったので一応メモ。レスポ ンシブWebデザインのTipsです。Media Queries とjQueryを使用して、スマフォでアクセス した時だけ、邪魔になりがちなナビゲー ションメニューを上に隠す、みたいな手段。 割と良かったので参考までに記事に備忘録 として残しておきます。 隠すというと語弊があるんですけど・・・凄くシンプルな方法です。 Pull-Down-for-Navigation 通常のPCでは普通のナビゲーションですが、スマートフォンの場合、このように上に隠れています。しかし、タップで降りてくる、引っ張る、などのギミックではありません。 まずはデモをご覧下さい。 Sample QRコードでもアクセス出来ます。 Media Queriesの内容はだいたい予想が付くと思いますのでjQueryだけ。これもかなり単純ですが。 function checkWidth ()
シンプルでクールなLightbox - かちびと.net
Result jQuery $(document).ready(function() { //オーバーレイ用のボックス生成 $("body").prepend('<div class="overlay"></div>'); var h = $(document).height(); //画面の高さをオーバーレイの高さにする $(".overlay").css('height', h); //クリックイベント $("#sample li img").click(function() { var url = $(this).attr('src'); var w = ($(document).width()/2)-200; var t = $(document).scrollTop()+100; //閉じるボタンを生成 $(".overlay").empty().append('<img src
Future と Stream という同期/非同期処理の混在をシンプルにコード化できる車輪を再発明したよ - latest log
Script Junkie | Creating Responsive Applications Using jQuery Deferred and Promises (日本語訳: jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと… ) をみて、 (ε・◇・)з Deferred… Promise… お 覚えられん… (ε・◇・)з 脳みそちっちゃいので、もっと気軽に使えて、簡単に書けるのがいいなぁ～ って思ってました。 なので、自分なりに、 複数の同期/非同期処理を同時に実行し、処理の合流ができたり多少の失敗があっても前に進める Future 複数の同期/非同期処理を順番/同時に実行し、流れを直感的に記述できる Stream という2つの仕組みを考えました。 Stream は一本の流れを制御し Future は同時多発的な流れを制御するため、こ
jQueryでスムーススクロールするスクリプト : Toro_Unit
jQueryで、ページ内リンクや、ページの先頭にリンクするときにアニメーションでスクロールさせたいときのスクリプトです。まぁ、皆さん普通に使っていると思うので今更感はばりばりですが・・・・ 余談ですが、 $('a').click(function(){ return false; }) みたいに、falseを返すと、URLの書き換えをしなくなります。なので、ページ内リンクなどをに使うときは、return false;を書かない方が、アクセシビリティ上は良いと思います。 そんなわけで、書いてみました。 jQuery.easing.quart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; jQuery(function($){ $('a[href*=#]').click(function() { v
From jQuery to JavaScript: A Reference | Envato Tuts+
Whether we like it or not, more and more developers are being introduced to the world of JavaScript through jQuery first. In many ways, these newcomers are the lucky ones. They have access to a plethora of new JavaScript APIs, which make the process of DOM traversal (something that many folks depend on jQuery for) considerably easier. Unfortunately, they don't know about these APIs! In this articl
jQueryとVimeoのAPIでサムネイルを作成し、動画をLightbox風にポップアップさせる - かちびと.net
VimeoのAPIとjQueryを使用したサンプル。 軽量なコードでLightbox風にポップアップ させる、という方法。Vimeo自体日本では 全然使ってる方を見かけませんが、徐々に 浸透すると嬉しいですね。便利だし。とい うか、僕が知らないだけで結構使ってる 方もいるのかもｗ 仕事じゃなくて個人で使いそうなのでメモ的に。VimeoのAPIを使って、リンクするだけでサムネを表示させてクリックするとLightbox風に表示される動画ギャラリー、みたいなものを簡単なコードで実装します。 Vimeo Gallery こんな風にサムネイルがギャラリー的に表示されて こんな風にLightbox風にポップアップさせます。 以下サンプル。 Sample IE7以下にも手抜きハックで対応させました。もっとちゃんとやれば素敵になるんじゃないですかね。 コード $(window).load(function
EXCEL（CSV）ファイルからHTMLのTABLEを自動生成するJS｜BLACKFLAG
タイトルの通り、CSVファイルからHTMLのTABLEを自動生成するJS、 「jquery.csv2table.js」が何かに使えそうだったのでメモ書きしておきます。 「jquery.csv2table.js」はjQueryのプラグインで、 まずここからJSファイルをダウンロードして、jQueryと併せてページ内に張る。 ソース上には ■■■■■■■■■■■■■■■■■■■■■ <script type=”text/javascript”> $(function(){ $(‘#view1’).csv2table(‘sample.csv’); }); </script> ■■■■■■■■■■■■■■■■■■■■■ といった記述でCSVファイルを読み込んでおいて、 <body>内に<div id=”view1″></div>といった空タグを記載するだけ。 ID名が重ならないようにすれば、 １ペ
シンプルなコードでロールオーバー／jquery.js
■参照サイト■ 意外とよく使うJavascript ロールオーバー by maro-z.com ■対象フレームワーク■ jquery.js ■必要なプラグイン■ jquery.rollover.js ※リンク先ページ中ほどからDLできる。 ■サンプル■ class="rollover" を指定している画像が、 マウスオーバー時にsample_on.gifに差し替わる。 ■jquery.rollover.js ■ var preLoadImg = new Object(); function initRollOvers(){ $("img.rollover").each(function(){ var imgSrc = this.src; var sep = imgSrc.lastIndexOf('.');
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
