Flashを使っていないのが不思議なくらいに思えるイタリアのグラスメーカーのサイト Luigi Bormioli Flashを用いないで、インタラクティブなサイトを構築した例といえば、script.aculo.usを使ったGucciがありますが、このサイトは、jQueryで構築されています 若干戸惑う部分もありますが、jQueryで作られたFlash的なインターフェイスやDeep Linkのアドレスが、非常に小気味よい動きで気持ちいいです。本当にFlashではないことに驚きます。
Default submitHandler is set to display an alert into of submitting the form Please provide your name, email address (won't be published) and a comment Name (required, at least 2 characters) E-Mail (required) URL (optional) Your comment (required) Validating a complete form Firstname Lastname Username Password Confirm password Email Please agree to our policy I'd like to receive the newsletter Top
JavaScriptjQuery は機能が豊富なので、しばらく使わないと忘れてしまう。ここでは、jQuery と配列の関係に絞って目的別に逆引きできるようにしておく。配列から jQuery オブジェクトを作成$ 関数に渡せばOK $([1,2,3]) NodeList のような配列っぽいものを渡しても解釈してくれる。 $(document.getElementsByTagName("div")) // $("div") と同じ ※内部的には setArray メソッドが呼ばれてるが、外から使うことは稀。jQuery を配列のように扱う要素数を取得するlength プロパティを使えばOK。 $("div").length // document.getElementsByTagName("div").length と同じ jQuery のメソッドを使って操作する限りは、適切に length
Create simple tooltips with CSS and jQuery – Part 1 CSS tooltips are very popular in modern web design and contrary to popular belief it is really easy to create them, especially with one of the all so popular javascript frameworks. Before I started to delve deeper into this topic, I thought you have to use at least a plugin, but to get some basic tooltips all you need are about 10 lines of CSS an
$("div#state3-mode3multi1").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, status:true}); $("div#state3-mode3multi2").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter", callback:listener4, mode:3, index:-1}); $("div#state3-mode3multi3").j3ssw({off:"state3down-filter", on:"state3up-filter", def:"state3def-filter
Can't find a Plugin you are looking for? Check out the jQuery Wiki page. Are you a plugin developer? Please move your plugin over to this site.
今すぐお金が必要!でも他社で審査に落ちてしまった、そんな時におすすめの審査が柔軟なキャッシングサービスをご紹介します。
某 endless 氏より「マルチプルセレクトの値って jQuery でどうやって取るの?」な質問が飛んで来たよ。 プラグインとかにありそうだけど、今回は勉強ついでに自分で書いてみる事に。さらに勉強ついでにプラグインにしてみる。 HTMLはとりあえずこんな感じ。 <form id="target_form" method="post"> <select name="hoge" multiple="multiple"> <option value="0">zero</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select> <select name="hige"
jQuery has a nice selection of core animation effects, such as .show('speed') and .hide('speed'), .slideUp() and .slideDown(), and .fadeIn() and .fadeOut(). It even has a couple methods for toggling effects — the aptly named .toggle('speed') and .slideToggle(). All of these methods have optional speed, easing, and callback arguments — although a couple are special cases. The .show() and .hide()
jQuery 1.2 以降だと scrollTop(と scrollLeft)という疑似スタイルが利用できるようになったので,jQuery UI を使わずとも,jQuery Core 本体だけでページ内スクロールができるようになりました。 たとえば, <html> <body> <p> blah, blah, blah, ... blah, blah, blah, ... </p> <p> <a href="#" id="link_to_top">ページの先頭へ</a> </p> </body> </html> このような HTML で「ページの先頭へ」というリンクをクリックしたときに,スムーズにスクロールしたいのなら, $(function () { if (! $.browser.safari) { $('#link_to_top').click(function () { $(thi
A few weeks ago I wrote about how to use jQuery and a couple modules from the Interface plugin suite to automatically have same-page links scroll to their target location when clicked (Animated Scrolling for Same-Page Links). Well, now that jQuery 1.2 is out, and I’ve successfully upgraded this site to it without a hitch, we can do the same thing with jQuery core alone. Update This entry is deprec
実装側では非常に苦労しますが、使い勝手は抜群。わざわざnew演算子を使ってインスタンス生成をしなくても関数の戻り値としてオブジェクトを使うテクニックです。 例を使って説明します。以下はDOMの操作で要素を削除する方法です。 普通の方法 var elem = document.getElementById('navi'); elem.parentNode.removeChild(elem); DOMのAPIでは直接要素を削除できません。いったんparentNodeをたどり、removeChildでDOMツリーから削除します。 普通のクラス化 var Elem = function(id){ this.elem=document.getElementById(id); }; Elem.prototype.remove = function(){ this.elem.parentNode.rem
JavaScriptjQuery を使って JSONP でリクエストする方法を2通り紹介するよ。その1: $("")createElement を $() を使って実装。 $("") .attr('type', 'text/javascript') .attr('src', "http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback") .appendTo($("head")); function myCallback(json){ // ロード完了時にここが呼ばれる } http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback にリクエストがいく。callback のところは、サービスによって指定の仕方が違うかもね。その2: $.ajax
梅酒.inのトップページにある「梅酒がウリな飲食店」というコーナーにある画像をクリックすると、Lightboxっぽく情報を表示するようにしています。 ↑ こんな感じ。 Lightbox効果を実現するライブラリは検索すれば色々と見つかると思いますが、ここではライブラリはjQueryのみとして、どのようにLightboxを実現したかを説明します。 処理のおおまかな流れは以下の通りです。 select要素を隠す (IE対策) ページ全体に半透明の黒いレイヤーを表示する 表示領域の中央に目的のコンテンツを表示する 1. select要素を隠す IE6ではselect要素にz-indexが定義されていないため、レイヤーのz-indexをどれだけ大きくしても、IE6ではselect要素がレイヤーの下に隠れることはありません。そのため、ページ上にあるselect要素を隠す必要があります。 jQueryで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く