divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
Javascript Input Mask これは面白い、パスワードの値を独自アイコンにする方法。 パスワードフィールドというとブラウザ依存で、* になったり、・になったりしますが、今回紹介のライブラリを使えば次のような面白い鍵アイコンにすることが出来ます。 こういうところにもこだわりたい、という方は参考にできそうですね。 関連エントリ デフォルトのフォームをクールにカスタマイズする方法 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS&JavaScriptサンプル JavaScript&CSSで独自デザインのselectボックスを作成
表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
ブラウザ上で動作する、スケジュール管理ができるカレンダーの軽量(19KB gzipped)のスクリプト「dhtmlxScheduler」を紹介します。 dhtmlxScheduler demo 直感的に操作できるインターフェイスは、AJAXを使用してダイナミックにスケジュールを追加・修正・削除することができます。 日本語の入力を試したところ、文字化けせずに追加できました。 dhtmlxSchedulerは、PHP, Java, ASPなどとデータベースを統合して利用することも可能とのことです。 ライセンスには、下記の3種類があります。 オープンソース GPLプロジェクトでのみ利用はフリー。 コマーシャルライセンス 商用利用として、1つのプロジェクトで利用可。1ヵ月のサポート付き。 企業ライセンス 会社など、無制限のプロジェクトで利用可。12ヵ月のサポート付き。
TinyBoxは、モーダルウインドウを生成し、アニメーションで拡大表示できる超軽量(3.5KB)の単独で動作する(jQueryなどは不要)スクリプトです。 TinyBox JavaScript Popup Box - 3.5KB demo 上記キャプチャのデモではリンク箇所をクリックすると、サイズを変更したり、内容を変更したりします。 また、画像の拡大表示やタイマーにも対応しています。
Quenessというサイトで、Javascriptのメニュースクリプトがまとまっています。 ざっといくつかご紹介。 ・アコーディオンメニュー » Dynamic drive Accordion menu » i-MarcojQuery Accordion Menu ・Dockメニュー » MacStyleDock » Mootool Fisheye ・ドロップダウンメニュー » Superfish Menu » jQuery Context Menu ・スライドメニュー » Slide Menu » iPod Drilldown Menu ・ツリーメニュー » Tree Panel » Sitemap Styler その他のリストは以下からどうぞ。 » 30 Javascript Menu Plugins and Scripts 昨日は焼肉。うまかった〜。
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
Add Twitter to your blog (step-by-step) Twitterのメッセージをページに載せられるJavaScript「Twitter.js」。 Twitter.jsを使えばJavaScriptオンリーでTwitterのメッセージが載せられるみたい。 実装方法は以下の2ステップで簡単 (1) HTMLコンテナの定義 表示させたい位置に以下のHTMLコードを記述 <div id="tweet"> <p>Please wait while my tweets load <img src="/images/indicator.gif" /></p> <p><a href="http://twitter.com/rem">If you can't wait - check out what I've been twittering</a></p> </div> (2)
BySlideMenu パネルが水平方向に伸び縮みする通常のタイプから、トリガーをマウスオーバーからクリックに変更したものや、伸び縮みのアニメーションのエフェクト変更など多彩なカスタマイズが可能です。 デモでは水平タイプのほかに、垂直タイプやテキストタイプなど12種類あります。
Web関連およびアプリケーション、映像関係、静止画素材、自動処理、4K/8K/ハイビジョン素材関連などを扱っています。 誤字脱字等、お気づきの点がありましたら、お気軽にメールをください。 この目次にないアプリケーション等の使い方などに関してはその他のリファレンス/アプリケーション...のページを参照してください。
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
JavaScriptのサンプルを使って簡単な基礎から、データベースの操作まで学べる初心者向けの入門講座です。関数の作り方やJavaScriptを外部ファイルとして読み込む方法、フォームのデータを正規表現でチェックする方法、イベントの設定方法、配列の使い方などが学べます。 ・より本格的なプログラミングを学びたい場合は Java初心者入門講座 を次のステップとしてご活用ください。 ・Web系のプログラミングを学びたい場合は PHP初心者入門講座 をおすすめします。 ・PHPやJAVAではデータベースにMySQLを使用しているため、 MySQL初心者入門講座 を先に学ぶと習得が楽になります。もちろん必要になった段階でMySQLを学んでもOKです。 JavaScriptで本格的なゲームを作ることができます。 しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応
ナビゲーションの現在位置を取得し、要素にクラス(activeなど)を追加してデザインを変更するスクリプトをCSS newbieから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> $(document).ready(function() { if(location.pathname != "/") { $('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); } else $('#nav a:eq(0)').addClass('active'); }); </textarea>
Plugin JQuery jSelect - Demonstration selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法。 これまで select の組み立てはサーバ側でPHPなんかでループさせて行うのが当たり前と思っていました。 jSelect を使えば、XMLやJSON、配列等のフォーマットからなるデータをajaxで読み取ってselect ボックスを簡単に動的に作成できます。 JavaScriptで動的に作った方がよいケースも多そうなので、導入できそうな部分は取り入れたほうがよいかも。 ということで、jSelect とそのメリットをご紹介。 jselect は、たとえば、次のようなHTMLがあったとします <select name="test"> <optoin>loading.... </select> で、$('#test').jselect({
jQuery Style - A gallery showcasing awesome sites built with jQuery jQueryを上手に使ったサイトのお手本を色々探して参考にできる「jQuery Style」。 jQueryでいろいろ出来るのはわかった、でもサイトに実際に上手く使うにはどうしたらいいの?どうやったらよくなるだろう?と思うことがあると思います。 そんな時、jQuery STYLEで色々と見て参考に出来そうな部分があったら真似していって改善していく、ということが出来そう。 単純にサイトのサムネイルを取って掲載しているということではなくて、どういう部分でjQueryを使っているかについても一目で分かるようになっています。 ↑のサイトの場合、ツールチップなどいろいろとjQueryを活用していることが分かるアイコンが明示されています。 こうしたまとめサイトの作り方
一枚のページにたくさんの情報をまとめたい時に便利なのがスライド表現。今日紹介する「10 Best jQuery Sliders」はコンパクトで高機能なAjaxライブラリjQueryを使って実装するスライド機能を紹介するエントリーです。 loopedSlider いくつかのスライド表現のサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Easy Slider 様々なタイプのスライドを制御できるスライド表現。用途に応じて使い分けができそうです。 ■ Introducing Coda-Slider スタンダードなタイプのスライダー。応用が利きそうなつくりになっています。サンプルをダウンロード可能。 ■CrossSlide – A jQuery plugin to create pan and cross-fade ani
idTabs わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 以下のようなHTMLを簡単にタブ化できるみたいです <ul class="idTabs"> <li><a href="#aaa">Tab 1</a></li> <li><a href="#bbb">Tab 2</a></li> </ul> <div id="aaa">This is tab 1</div> <div id="bbb">This is tab 2</div> UL要素の中にリストを定義してあるのがタブ部分で、<div>部分が該当ページ部分です。 1ページ内に全部のデータを収めることも出来るところもいいですね。 関連エントリ タブ機能付きパーソナライズドホームページ『Netvibes』 多数のタブをグループ化して管理できる「TooManyTabs」
キーボード操作やより楽なマウス操作に対応した、ドロップダウン型のナビゲーションのスクリプトをsitepointから紹介します。 The Right Way to Make a Dropdown Menu demo ナビゲーションはタイマーを遅めに設定して、マウスの斜め移動時にもパネルが消えることないようになっています。 ナビゲーションがブラウザの表示領域を超える際は、折り返して表示されます。 また、キーボード操作にも対応しており、矢印キーでナビゲーションの操作も可能です。 スクリプトはjQueryなどの他のスクリプトに依存せず、単体で実装されています。 ※ スクリプトのオフ時にナビゲーションとして機能しないのが残念なところです。 Post on:2009年4月27日
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く