【ネタ帳】ドラッグ&ドロップでいろんなことができるjQuery30個まとめ +25記事*二十歳街道まっしぐら（FC2ブログ時代）今週もおもしろそうな記事がごろごろ。 Photoshopのチュートリアルがちょっと多めです。 実はもう来週の分も書き終わってたりして、ネタがどっさりたまってます…。 今週のTOP記事は、jQueryのまとめ。 デモへのリンクが貼ってあるので、すぐにどういう動作をするか確認できます。 サイト制作の参考になればいいですねー。 （※ネタ帳では海外記事しか扱いません、すべてリンクのみになっています）
jQuery で世界一簡単に画像を自動スライドすることができる simpleslide.js | ウェブル
本当にスライドだけがしたい場合の jQuery のコードを書いてみました。 ul と li で画像を並べるだけで、勝手にスライドが始まります。 simpleslide.js デモサイト ただし、作った私は Javascript 初心者なのであしからず。 基本的な使い方 HTML の書き方 以下のようにスライドしたい画像を並べます。 CSS は必要ありません、きっと simpleslide.js が自動で設定してくれます。 id を slide にしておきますと、後々便利ですが、任意の名前でも結構です。 1 2 3 4 5 <ul id="slide"> <li><img src="image_01.png"></li> <li><img src="image_02.png"></li> <li><img src="image_03.png"></li> </ul> JS の読み込み
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
nyroModal v2 :: jQuery Plugin
Edito Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It's easy to use and easy to design. The big problem I experienced with every plugin I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that's not fully true. The default CSS works fine
マウスオーバーでゆっくり画像が切り替わるjQueryがイケてるかも | 日刊ウェブログ式
jQueryとCSSで、ボタンがゆっくりと切り替わるチュートリアルです。とても簡単にできる上に、実用面での使い勝手も良いかもしれません。 まずは、こちらのデモをご覧ください Demo マウスオーバーでゆっくり画像が切り替わるのがお分かり頂けると思います。jQueryでシンプルに動かしています。 使用するには、以下のサイトからスクリプトやコードをダウンロードしてください。 Link もうそこにやり方が書いてありますが、一応チュートリアルです。 既存のブログなどに使用する場合は、 以下のコードを「head」内に書き込みます。 <link href="style.css" rel="stylesheet" type="text/css" /> CSSに以下の記述を追加 .button2{ background:url("images/download.png") 0 -45px; height:
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」:phpspot開発日誌
iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」 2010年06月23日- slideLock Demo iPhoneのロックみたいなUIでフォーム送信にロックをかけられるjQueryプラグイン「slideLock」。 UIとしては次のような感じで、スライダーを右にドラッグ＆ドロップするとsubmitボタンがactiveになってフォームの送信が可能になります。 フォームの送信を厳重にしたい場合と、隠しパラメータを受け取って照合することでスパムの防止に使えるっぽいです。 ロック解除しないと送信できないので、送信前に確認の意味を込めたUIとして使うと実用的に利用できそうですね。 初期化は次のように行います。 $("#contact").slideLock({ labelText: "Slide to Unlock:", // ラベル
テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」:phpspot開発日誌
テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」 2010年06月22日- jQuery.elastic テキストサイズに応じてtextareaを自動でサイズ調整してくれるjQueryプラグイン「jQuery.elastic」。 普通テキストエリアというと、サイズは固定で、長い文書を入れると最初の方にいれたテキストがわかりにくくなってしまいますが、改行を入れると自動でテキストエリアが広がるあの便利な機能をjQueryで実現出来ます。 テキストサイズに応じて伸縮します。 改行を入れると縦に広がります。最初に入れた文書も確認しつつ長文を入力できます。 実装の方法は無茶苦茶簡単。 $('textarea').elastic(); textareaはデフォルトでこの動きになって欲しいですが、このプラグインがあれば１行で全てのt
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
HisasAnn.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
AviaSlider - a unique jQuery Image slideshow plugin!
Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Sa
ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects | AddyOsmani.com | Where Web Businesses Grow
This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve. I always think it’s useful to see a demo of what we’
YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」:phpspot開発日誌
YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」 2010年05月11日- jquery.mb.mediaEmbedder Matteo Bicocchi's Blog YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」が公開されています。 <div>要素の中にWIKI記法っぽく記述するだけで動画の埋込みが可能です。vimeo、Ustream、Youtube、Livestream、Flickrの他、mp3のようなオーディオファイルにも対応しています。 サンプルコードは以下で、動画のembedコードを取り出すことなく、動画閲覧用のURLを指定するだけで埋込みが完了します。 投稿されたURL等をプレビューしたい場合に、いちいちYo
Greyscale Hover Effect w/ CSS & jQuery
A few months ago, James Padolsey introduced a cool greyscale technique for non-IE browsers. His technique inspired me to come up with a workaround with a similar effect. My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces. View De
jQuery Mega Menu - GeekTantra
This is a simple jQuery based MegaMenu plugin. Demo: Click Here Download: Click Here The other day I was searching for a jQuery based MegaMenu over google but couldn’t find any good plugin for the same so sat down and wrote one for myself. Here is a simple jQuery plugin to create an unbloated MegaMenu in seconds. Demo: Click Here Download: Click Here Project Repository: Click Here In your header s
サインアップとログイン兼用のログインフォーム作成チュートリアル:phpspot開発日誌
Log in or Sign up with Jquery and PHP jQueryとPHPを使ったサインアップとログイン兼用のログインフォーム作成チュートリアルが公開されています。 まず、E-mail を入力し、アカウントを持っているかもっていないかのradioを選択することで新規登録か、ログインかを切り替えることが出来ます。 jQueryでは、エレメントの表示/非表示を設定しており、サーバ側のPHPでは送られてきたパラメータを見てログインか新規登録かを判別します。 そのまま使っても便利ですが、PHPやjQueryの入門用としても使えるかもしれませんね 新規登録の場合 ログインの場合 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 アニメーションの残像が残るjQueryアニメーションチュートリアル PHPとjQueryのAjax連携の学習
Gmail/Facebook Style jQuery Chat
Introduction Everyone loves the gmail and facebook inline chat modules. This jQuery chat module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website. Features 1. Gmail style bottom right display of chat boxes 2. Keeps chat boxes open and stores state (data) even when pages are browsed/refreshed similar to Facebook 3. Displays “Sent at…” after 3 minutes of inacti
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LightBoxの使い方とカスタマイズ方法 | CSS Lecture
Servicii Web Design, mobile SEO, Creare Magazin Online- AjaxMasters
http://boedesign.com/demos/jsquares/