今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="imgLiquid-min.js" type="text/javascript"> 実装 <!-- thumbnail( 300x200 ) --> <div class="div1077" style="width:300px; height:200px;"><img src="画像"></div> <!-- thumbnail( 150x100 ) --> <div class="div1077" style="width:150px; height:100px;"><img src="画像"><
NameBright - Coming Soon
stripjs.com is coming soon This domain is managed at
jqueryでhtmlの書き換えを行う方法
jqueryでhtmlを書き換える方法はいろいろとあります。 テキストを書き換える方法 $("セレクター").text("書き換え"); 例えば、フリーランスをデザイナーに書き換える <p class="text">フリーランス</p> jqueryのタグは $("p.text").text("デザイナー"); すると <p class="text">デザイナー</p> になります。 htmlタグごと書き換える方法 $("セレクター").html("書き換え"); 例えば、pタグのフリーランスをh3タグのデザイナーに変更します。 <p class="text">フリーランス</p> jqueryのタグは $("p.text").html("<h3>デザイナー</h3>"); すると <h3>デザイナー</h3> にかわります。 htmlの追加 指定した要素内部の先頭に追加する方法 $("セ
【jQuery Mobile】 javascript で ダイアログ表示
前回紹介しました 「jQuery Mobile ポケットリファレンス」 を片手に、スマートフォン向けサイトを製作中です。 早速ハマリましたのでメモ。 ■ログインチェックなど、javascript からダイアログを表示したい場合： →ログイン用の data-role と、ダイアログ用の data-role を用意し、$.mobile.changePage でダイアログ用 page を表示させる <!-- ログインフォーム --> <div data-role="page" id="home" data-theme="a"> <div data-role="header"> <h1>ログイン</h1> </div> <div data-role="content"> <div data-role="fieldcontain"> <label for="id">利用者ID</label> <in
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
Posted: 2012.02.03 / Category: javascript / Tag: jQuery jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){ e.preventD
onScreen - 使い道が多そう。表示されたら発動するイベント処理 MOONGIFT
スクロールを使った面白い処理です。 Webサイトにおいてある部分までスクロールしたら処理を実行したいといったニーズは良くあると思います。例えばMOONGIFTの場合はソーシャルボタンを表示するのはその部分までスクロールしてからにしています（描画が遅いので）。 他にも対象の画像を表示されたタイミングで読み込みたいといった場合もあるでしょう。そこで使ってみたいのがonScreenです。 デモを表示しました。このタイミングではイベントは発動していません。 Demosを表示。この時点でイベントが発動します。 使い方はjQueryプラグインなのでシンプルです。 $('elements').onScreen({ container: window, direction: 'vertical', doIn: function() { // 表示されたタイミングの処理 }, doOut: function
スマートフォンのためのJavaScriptフレームワーク ベスト10 « Webの小ネタ
スマートフォン向けのWEBサイトやアプリケーションの浸透した今では、様々な開発ツールが存在しています。 フレームワークを利用することで、クロスブラウザの互換性やディスプレイの解像度の違いなどを意識することなく、開発に専念できる環境が整いつつあります。 今回は、スマートフォンやタブレットなどのタッチスクリーン対応のデバイスに対応したJavaScriptフレームワーク10個をsmashinghubから紹介します。 Hammer.js フレームワークは軽量であることに加えて、タップ、ダブルタップ、スワイプ（画面を指で横に滑らせてスクロールする）、ドラッグ、ピンチ（2本指でつまむ）、回転ジェスチャに対応していてを提供している素晴らしいツールです。 Android、BlackBerry、iOSとWindows Phoneをサポートしています。 » Hammer.js jQuery UI jQuery
CoffeeScriptでjQuery使うときのメモ
Posted: 2012.11.19 / Category: javascript / Tag: jQuery CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p').
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
Qiitaのtextarea自動補完がOSSになりました - Qiita
jQuery.textcomplete（デモ） GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 を書いたのも今は昔、いつか続きを書こう書こうと思いながら気がつけば5ヶ月が過ぎました なんか続きを書くのが面倒くさくなったのと、某日本最大レシピ共有サイトの技術部長の人から「OSSにして欲しい」という要請を人伝に受け取ったこともあって、OSS化した次第です。 ライセンス MITライセンス 簡単な使い方 簡単に説明します。詳しくは README を読んでください。 まず jQuery.textcomplete は名前からも分かるように jQuery プラグインになっているので、別途 jQuery が必要です。 <script src="path/to/jquery.js"></script> <script src="path/to/jquery.textcomp
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
