![[ jquery-instagram ] Instagram API を簡単に利用できる jQuery プラグインを試してみました](https://cdn-ak-scissors.b.st-hatena.com/image/square/63ac844f6a542281ad7784857228ffbfa0990400/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2013%2F05%2Fjquery-instagram-01.jpg)
郵便番号から住所を自動的に補完してくれる JavaScript のライブラリに AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) がありますが、それを jQuery のプラグインとして実装したものを作ってみました。 jquery.ajaxzip2 通常版と、スペースや改行などが圧縮された minify 版があります。使い方はリンク先の github に書いてあるので参考にしてください。 また jquery.ajaxzip2 を実装するにあたって、さらに使いやすくするために従来の AjaxZip2 を少し拡張しました。 拡張機能 次のような機能を新たに追加しています。 住所補完後の動作をコールバック関数で指定可能 郵便番号から住所を補完する際に JSON 形式の住所データを非同期に取得しにいきますが、それが完了した後に呼び出されるコールバック関数を指定できる
Coding Methodology CSS Subgridでカードの高さを揃える!JavaScript不要のレスポンシブなレイアウト術
前回、フォームをAJAXでうんちゃかするjQueryFormPluginのエントリーを書きましたけど、フォームと言えばValidateですよね。 ってことでjQueryValidatePluginについてもサラサラ見ていたので、こっちも日本語Document化したのを書いておく。 で、日本語化して書いていたら思ったよりも量が多くて少し適当な感が否めないような感じになっているかもしれません。 必要なさそうなところは一部飛ばしているしー、たまにおかしいところがあるかもしれませんが悪しからず。そんときはコメントくださーい。 あ、あとエラーメッセージ等のローカライズ版と日本語環境用のValidateメソッドを新たに追加するスクリプトも書きました。 デフォルトだと半角英数のみとかー、ひらがなのみとかーできないんでー それから、もともとの目的のjQuery Form Pluginとの連携でAJAXなん
ウェブ制作において、jQueryが最も使用される機会が多いのが、フォームのバリデーションチェック機能。 バリデーションチェックとは、メールアドレスなら「xxx@xx.xx」という入力形式になっているか?必須項目はちゃんと記入されているか?を確認し、もし誤りがあればそれを閲覧者に知らせる機能のこと。 jquery-form-validatorを使った入力チェック Position-absolute「jquery-form-validator」 フォームの入力事項をチェックするバリデーション用プラグインは数あれど、このjquery-form-validatorは多機能な上に、設定が非常にわかりやすいのでおすすめ。 ちなみに導入例のデモはこちら。 確認してもらえば分かるとおり、送信ボタンを押すタイミングだけではなく、項目を入力して(あるいは入力しないで)フォーカスが移るタイミングでもバリデーショ
zflickjs v2.1 iOS, Androidなどのwebkitベースで提供するサービスではjQueryなどのライブラリを使わず、pureなJavaScriptで実装した方がパフォーマンス良いんじゃないかと思って作ってみた Updated of Lists lampクリックでカレント切り替えできるようにしたお Demo Demoをみる Getting Started タグ内にzflick.cssとzflick-2.1.min.jsを読み込む。 HTML HTMLを組む。基本的にJSで動かす要素はID指定になっている。 JS new zflickjs({})で初期化 Options width: number 280 ... width move autoChange: boolean true ... "true" auto move element, "false" don't m
jQuery1.4のリリース前より、いろいろ紹介するとか言って起きながら結局紹介できなかったダメ男です。ちょっと奮起してちょっとずつでもご紹介していくぞ! ということで、いくつかの機能を自分なりに紹介 今回は.first() と .last()、あとはそれに関するものと、.nextUntil() と .prevUntil()、あと.parentsUntil()の5つを書いておきます。 1、.first() / .last() セレクタのフィルタリングメソッドでの追加で、要素の最初と最後を返します。 //最初の要素 $('li','#demo1 ul').first().append(' First!'); //最後の要素 $('li','#demo1 ul').last().append(' Last!'); .first() / .last() DEMO このメソッドは、次に紹介するメソ
このエントリはjFeedMixer専用ページへ移行しました。今後は、そちらを御覧ください。 複数ブログで管理しているRSSフィードを統合して、ウェブサイト上に表示させることができるjQueryプラグイン、jFeedMix […] このエントリはjFeedMixer専用ページへ移行しました。今後は、そちらを御覧ください。 複数ブログで管理しているRSSフィードを統合して、ウェブサイト上に表示させることができるjQueryプラグイン、jFeedMixer 0.2.0 をリリースします。このプラグインはGoogle AJAX Feed API を使用しているので、ご利用の場合は、AJAX API Keyを事前に取得する必要があります。 jFeedMixer 0.2.0 – github jFeedMixerを使うシチュエーション 複数ブログを管理していて、メインサイトのトップページに各ブログのR
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。 詳しくは以下 1.右クリックを無効にする方法 右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.フォームの初期値を消す方法 検索フィールドなどに。 $(document).ready(function() { $("input.text1").val("Enter your
jQuery Gallery Plugin jQuery Gallery Plugin take a grouping of images and turn it into an flash-like image/photo gallery. » Project page (Google code) » Download Demo Quick Start Starting with jQuery Gallery is really easy! Setup: Include the script and stylesheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and l
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日! 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 <head> <!-- jQuery --> <script type="text/javascrip
YouTubeのクイックリストのように、ログインしていない状態でもサイト内ブックマークのようなことができるJQueryのプラグインなどはありませんか?中身はクッキーを使っているのか、 Flashクッキーなのかは分かりませんが、なんとなくイメージは湧きますがよくありそうな機能なので既に誰かがつくったいいライブラリやプラグインがあるような気がします。 JQueryに限らず、Javascriptなどで容易に実装できるものがあれば教えてください。
Selectors/API/jQuery 基本 #id 指定されたidを持つ要素を選択する。 element 指定されたタグ名の要素を選択する。 .class 指定されたクラスを持つ要素を選択する。 * 全ての要素を選択する。 selector1, selector2, ..., selectorN 複数のセレクターを指定して集合要素を選択する。 階層 ancestor descendant ancestorを先祖に持つdescendantを選択する。 parent > child 親子関係を指定して要素を選択する。 prev + next 前後関係を指定して要素を選択する。 prev ~ siblings prev以降の兄弟関係にある要素を選択する。 基本フィルタ :first 先頭の要素を選択する。 :last 末尾の要素を選択する。 :not(selector) 指定したセレクターを
div要素内にある最後のspan要素の文字を赤くするなどします。 一方、:lastセレクターで選択された要素に対しては背景を黒くします。挙動の違いを確認してください。 <div> <span>John,</span> <span>Karl,</span> <span>Brandon,</span> <span>Sam</span> </div> <div> <span>Glen,</span> <span>Tane,</span> <span>Ralph,</span> <span>David</span> </div> $("div span:last-child") .css({color:"red", fontSize:"80%"}) .hover(function () { $(this).addClass("solast"); }, function () { $(this).r
September 17th, 2006 Category: JavaScript, Web Development, jQuery I contributed a cookie plugin for jQuery yesterday. You can get it from the (Subversion) repository: svn://jquery.com/plugins Or get it here. A few simple examples of how to use it: $.cookie('the_cookie'); // get cookie $.cookie('the_cookie', 'the_value'); // set cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); // set c
リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。 sponsors 使用方法 jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js(v1.2.1)をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#id名 div')
Javascriptのdocument.writeを使ってたくさんの内容を出力したいことってあると思います。複数行出力するときはいろいろな書き方ができます。 以下のように都度記述する方法もあれば… document.write('<div id="exampleBlock">'); document.write('<h2>example</h2>'); document.write('<p>foo bar</p>'); document.write('</div>'); 以下のようにwith文を使って親オブジェクトの名前を省略して記述する方法もあります。 with(document){ write('<div id="exampleBlock">'); write('<h2>example</h2>'); write('<p>foo bar</p>'); write('</div>');
実は技術部ではなく、演出部所属のagoです。 先日jQuery 1.3.2のソースを読む機会があり、そのときいくつか気づいたことがあったのでまとめてみました。 1 .addClass, removeClassはスペース区切りで複数のclassを渡せる .addClass, removeClassにはスペース区切りで複数のclass nameが渡せます。 //classの順番は保持します。 //<div class="hoge gege">があった場合、<div class="hoge gege huga">になります。 $('div').addClass('hoge huga'); //<div class="hoge gege huga">があった場合、<div class="gege">になります。 $('div').removeClass('hoge huga'); ただし、hasC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く