jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編
昨年くらいから次世代JavaScript（ES2015 & 2016）やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。そして2016年はさらに脱jQueryの動きが加速するのではないかと見ています。その最も大きな要因として1月12日に実行されたマイクロソフトによる旧IE（Internet Explorer 8, 9 ,10）のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。ぜひ参考にしてください。 はじめに脱jQueryに関して以下のような記事が年末に投稿されました。 You-Dont-Need-jQuery – jQueryを使わない書き方教
jquery.kerning.js
jQuery.Kerning.js A kerning plugin specific with Japanese webfont Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォのすき
jQuery Rippleria
jQuery Rippleria A lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects. Download .zip Download .tar.gz View on Github Installation bower i -S rippleria <head> ... <link rel="stylesheet" href="/bower_components/rippleria/css/jquery.rippleria.min.css"> </head> <body> ... <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
ちょっと未来のJavaScript - Thujikun blog
本エントリは JavaScript Advent Calendar 201314日目となります。 来年遂にXPが逝去されるということで、IE9以降のシェアが飛躍的に伸びることを祈りつつ、IE9以降でJavaScriptでできるようになることを気がつく限りまとめてみました。 DOM addEventListener / removeEventListener イベントを登録/削除するためのメソッド。IE8まではattachEventとdetachEventという似たような、でも割と細かいところで動きが違うメソッドを使う必要があったが、IE9から標準のaddEventListenerがサポートされている。 ※ jQueryのon/offとかbind/unbindとだいたい同じ。 ※ 第3引数はuseCaptureといって、trueにするとイベント伝播を上位のDOMから発生させることができる。ま
Androidのoverflow:auto/scroll対策
Android2.xでoverflow:scrollやautoが効かない（overflow:hiddenとして処理される）のは有名な話で、困った経験がある方も多いと思います。 調べた限りJSで実装するか、スクロールバーを諦めるといった対応をされる方が多いでしょうか？ 当社ではJSプラグインで対策する方法を検討しましたが、既存プラグインはjQueryなどライブラリに依存している事や 他UIと組み合わせた際の相性（イベントが競合しても調整しやすいように）を考えて自前実装で対応する事にしました。 ネイティブで対応済みのバージョンは？ 最初に、Android2.xなどは何かしら対策が必要ですが比較的新しいOSはネイティブで対応しているものもあります。 手元の端末で確認したところ、Androidは4.xでoverflow:autoに対応（Android4.0.4の標準ブラウザ&Chromeで確認）、
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
威斯尼斯人wns2299登录(百度Vip认证)官方网站
系统提示 抱歉 可能是由下列问题导致的： 由于网络或安全的原因，您暂时无法访问本站点，请稍后重试。
IE8以下で透過PNGが黒くなる場合の対処法 | @技術屋のメモ | WEB/アプリ開発技術メモ
IE8以下で透過PNGが黒くなる場合の対処法 by ateliee · 公開済み 2013年3月28日 · 更新済み 2017年3月25日 こんにちわ。film Power Rangers 今回は透過PNGを使った場合に陥りやすいバグの対応方法についてご紹介いたします。 IE8やIE7などで透過pngを使った場合、背景が黒くなる場合があります。 opacityなどの透過指定をしている場合にもおきるかもしれません。 そういった場合、IE独自の指定をする必要があります。 [css] img.png{ filter’: ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”sample.png”, sizingMethod=”scale”); } [/css] CSSにて透過PNGを使っている要素にprogid:DXImageTrans
jQuery JSONPでPHPでやりとりする方法 at Brandons Experimental Archive
だいぶ間が空きましたが ちょっとハマったのでメモっておきます。 jQueryでのajaxは $.ajaxというシンタックスにて利用できますが その際にクロスドメインの問題とかの場合、 XMLデータじゃなくてJSONを使ったJSONPという仕組みを使います。 jQuery側は [javascript] $.getJSONP = function(url,callback,param) { return $.ajax({ url: url, dataType:”jsonp”, success:callback }); } $.getJSONP(“./hogehoge/getjson.php”t,onDataHandler) function onDataHandler(response) { //受信後の処理をここに } [/javascript] こんな感
jQueryの.bind(), .live(), .delegate()の違い
The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。 内容を簡単に書き出すと以下のようなことについて書かれています。 $('a').bind('click', function() { alert("That tickles!") }); .bind()は$(‘a’)に対してイベントを設定してる。 $('a').live('clic
JavaScriptテンプレートエンジンJsRender 基本のキ
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
ここまで出来る！覚えとくと便利な「プログラム」サンプルまとめ
作成：2013/08/5 更新：2014/11/01 Web制作 > 食材を扱っているお客さんから、「ECサイト」を作ってくれと頼まれたので作成しました（事情により、CMSは使えず）。さらにメンテンスが楽になるように更新やSEOを自動化しました。今回は、CMS（WordPressとかEC-CUBEなど）を使わず仕組みを作るときに参考にした「プログラムサンプル」のまとめです。 プログラムの勉強にもなり、「へぇ～こんなことも出来るんだ」と思ったもの。今回は（PHP／jQuery／js）です。 エンジニア速報は Twitter の@commteで配信しています。 一般 画像／PHP １．画像リサイズ ２．画像に字を書く ３．画像の拡大・縮小・サムネイル出力 ４．グラフの描画 ５．画像エフェクト２５個 URL／PHP ６．ページのURLを取得 ７．URLの中身（HTML）を取得 ８．URL自動リン
Mashitup | {Mashitup}
I'm a freelance software developer who spent a lot of spare time on web automation. I started Software Development in early 2000's when I was in School. My preference went to Microsoft technologies because of the ease of usability of their tools and excellent integration with Windows. Over the course of 20 years I've worked for several organisations where I've worked on dozains of custom software
軽量JSライブラリ - Qiita
JQ.Mobi jQueryライクなライブラリ jQueryの一部を書き換えたものだが、HTML5とモバイルデバイスに最適化されている 参考 スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った QuoJS サイズが13KBの軽量フレームワーク タッチイベントなどのスマートフォン向けによく使うイベントが実装されている jQueryは$()だが、QuoJSは$$()で始まる jqMini.js jQueryMobileの画面遷移機能だけを取り出したシンプルな画面遷移フレームワーク Webkit系のブラウザのみで動作 参考 スマートフォンサイト向け画面遷移フレームワーク「jqMini.js」 Zepto.js 23KBの軽量フレームワーク jQueryと互換性がある 参考 Zepto.js (v1.0rc1) の jQuery との
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transit - CSS transitions and transformations for jQuery