[JS]フォームのテキスト欄にアイコンやテキストを表示させるスクリプト -CoolInputCoolInput demo デモでは、フォームのテキスト欄にアイコンやテキストの配置や、背景色の変更を簡単な記述で行えます。 以前「jQueryのプラグイン33+1選 -2008年6月」で紹介した時から大きく変わった点は、テキストをそのままでsubmitボタンを押してしまった場合の対応やテキストをfunctionに記述できるなど使い勝手が向上しています。 demo: what's new CoolInputはjQueryのプラグインのため、実装にはjquery.jsが必要です。
便利！jQueryのアクションをビジュアル的に作成する·IxEdit MOONGIFT
jQueryを使って画面のアクションを作ろうと思うと、そのコーディングの仕方を含めて習得する必要がある。イベントにもマウスやフォーカス、クリックなどの様々な種類が存在し、その結果として起こすアクションも無数に存在する。それらを適切に判断しながら構築するというのは意外と難しい。 jQueryを使った開発にぜひ！ 単純なJavaScriptであれば、オーサリングツールで対応しているものもある。だがjQueryのような高度なJavaScriptフレームワークには対応していない。そこで使うのがIxEditだ。 今回紹介するオープンソース・ソフトウェアはIxEdit、jQueryのビジュアルアクションビルダーだ。 IxEditは既に組み上がっているWebサイトに対して使うライブラリだ。指定されたJavaScriptファイルとCSSを読み込むと、Webサイトにフローティングウィンドウが表示される。そし
jQueryを使い始めたときに感じる13の疑問 : tech.kayac.com - KAYAC engineers' blog
来週は私が夏休みなので更新はない予定です。agoです。 最近、人にjQueryを解説する機会があったので、昔を思い出してjQueryを使い始めた頃に感じる疑問を書いてみたいと思います。 1 そもそも何で使うの？いまでも困ってないよ 作成する内容にもよりますが、慣れると使用しない場合に比べて記述するコード量が3分の1程度まで減ります。 また、変数、条件分岐、繰り返しが減るのでバグが発生しにくくなります。 2 何か特殊なことができる？ 結局できることは変わりません。 jQuery自体JSで書かれてますし、記述の自由度もJSの制約に制限されます。 3 何が難しいの？ 文法がややjQuery的になります。 参考 jQuery言語入門 jQuery自体のコード量は少ないのですが、独特の記述法が多く慣れるまで多少時間がかかるかもしれません。 また、CSS Selectorの知識はほぼ必須です。 特にマ
[JS]集中して、フォームのテキストを入力できるスクリプト -fullTextArea
テキストエリアにテキストを入力する際、集中してできるようにするスクリプトをwheresrhysから紹介します。
[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
フォームを使いやすくするためのjQueryプラグイン&チュートリアル20 – creamu
speckyboyで、フォームを使いやすくするためのjQueryプラグイン&チュートリアルがまとまっています。 いくつかご紹介しますね。 » In-Field Labels jQuery Plugin inputの中に透かしのラベル名を入れられるプラグイン » A jQuery Inline Form Validation, because Validation is a Mess inputの右上に吹き出し型でバリデートのエラーメッセージを表示 » Justify Elements Using jQuery and CSS – Tutorial jQueryとCSSでlabelのwidthを揃えるチュートリアル » jQuery Comment Preview – Tutorial コメント入力中に投稿内容をプレビューできるプラグイン。↑のキャプチャはこちら » jQuery “High
日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン:phpspot開発日誌
Generate a JQuery UI Slider using Data from a Select Element 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン。 次のように、スライダーのＵＩで範囲を指定する際に便利に使えそうです。 デモ１） Date Slider デモ２） Speed Slider 使用頻度はそれほどないかもしれませんが、ここぞという時に覚えておいて損はなさそうですね。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 JavaScriptで日付をTwitter風に○分前といった表記に変換できるライブラリ「niceTime」
[JS]快適に動作するコンテンツスライダーのスクリプト -AnythingSlider
各パネルをダイレクトに表示するリンクにも対応した、パネルをスライドするスクリプト「AnythingSlider」をCSS-Tricksから紹介します。 AnythingSlider demo コンテンツスライダーは右下のボタンで自動再生が可能で、横のアローで次と前、下の数字で各パネルをダイレクトに表示することができます。 また、各パネルをダイレクトに表示するリンクにも対応しています。 例：demo: panel 3 オプションでは自動再生の有無、再生ボタンのテキスト、表示アニメーションのスピードやタイミングなどが変更できます。 AnythingSliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。
クライアントサイドで使える可逆暗号化ライブラリ·jCryption MOONGIFT
インターネット上でユーザ認証やセンシティブな情報を集める際にはSSLを使うことが一般的だ。とは言え個人やレンタルサーバレベルでは証明書を取得するのはコスト面や技術面で難しいことがある。だからといって、そのような情報を平文のまま流すのは気になる所だ。 フォームの内容を暗号化して送信 簡単な暗号化だけでも良いから行いたい、そんな時に使えそうなのがjCryptionだ。 今回紹介するオープンソース・ソフトウェアはjCryption、JavaScriptベースの暗号化ライブラリだ。 jCryptionはRSA暗号（公開鍵暗号）に則ったアルゴリズムを使った暗号化ライブラリだ。復号化可能なライブラリであり、jCryptionではPHPのクラスを提供している。実装はjQueryを使って行われているのでjQueryを使った開発では利用がとても簡単に行える。 公開鍵を送信しているスクリプト部分 送信直前にサ
[JS]jQueryのプラグイン33+1選 -2009年8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 slideView 動きが面白い画像のスライドショー。 Mop Slider コンテンツのスライダー。バージョンアップ。 simpl
jQueryを使ったフェードイン&アウトエフェクト23 – creamu
GEEK Sucksというサイトで、jQueryを使ったフェードイン&アウトエフェクトが紹介されています。 ざっといくつかご紹介。 » Jquery Fade In.Fade Out サイトに来たときには30%の透過、マウスオーバーで100%。画像やテキスト、リンクやdivに指定可 » Fade Transition Plugin for jQuery テキストや画像に簡単にフェードイン&アウト効果がつけられるプラグイン » Making a Slideshow with jQuery jQueryを使ったクールなスライドショー » Simple jQuery slideshows 2パターンの面白いスライドショーが組めるjQuery » InnerFade with JQuery 画像やdivなど、要素の種類に関わりなくフェードイン&アウト効果をつけられるプラグイン その他のリストは以下
まだまだあったJavaScript製のWYSIWYGエディタコンプリート:phpspot開発日誌
まだまだあったJavaScript製のWYSIWYGエディタコンプリート、ということで、本ブログで紹介していない（したものも一部あるかもしれませんが）ライブラリ等をメインにご紹介。 WYSIWYGといっても、それぞれの使い方には特徴があって、微妙に自分の使い勝手にあってなかったりする場合もありますね。ということで選択肢を増やすという意味でご紹介 Free Rich Text Editor OfficeスタイルのリッチなＷＹＳＩＷＹＧエディター →デモページ jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery WYSWYGエディタ実装用jQueryプラグイン jwysiwyg シンプルなＵＩのＷＹＳＩＷＹＧエディター。jQueryプラグイン SPAW Editor ＵＩが美しいタブ付きＷＹＳＩＷＹＧエディタ →デモページ TTW HT
ifunk's swfupload-jquery-plugin at master - GitHub
This repository is private. All pages are served over SSL and all pushing and pulling is done over SSH. No one may fork, clone, or view it unless they are added as a member. Every repository with this icon () is private. This repository is public. Anyone may fork, clone, or view it. Every repository with this icon () is public.
ドロップダウンメニューをjQueryを使ってリデザインする方法 – creamu
JANKOで、ドロップダウンメニューをjQueryを使ってリデザインする方法が紹介されています。 For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. とのことで、標準のHTMLセレクトエレメントはとても退屈でかっこわるいのでリデザインしたとのこと。 ↑のようにシンプルだけどデザインされたメニューが実装されていますね。 デモは以下から。 » JankoAtWarpSpeed demos ソースコードもダウンロードできるので、ぜひ見てみてはいかがでしょうか？ » Reinventing a Drop Down w
jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい:phpspot開発日誌
mbideasproject - Project Hosting on Google Code jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごいです。 以下、プロジェクトのホームページもOSっぽいインタフェース上でアニメーションしてかっこいいのですが、構成されるコンポーネントが色々とあるみたい。 mbContainers | デモ OSのようなウィンドウ管理システムが作れるようです このページの上でそれぞれ動作を確認することが出来ます。 mbMenu | デモ かなりリッチなメニュー実装用ライブラリ 右クリックのコンテキストメニューもいじれます mbImgNavigator | デモ 画面に収まりきらない画像をドラッグ＆ドロップでGoogleMapぽく見れるコンポーネント。サムネイル付き mbTabset | デモ mbTooltip | デモ よく
Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌
Twitterをサイトに組み込むチュートリアル＆サンプル集。 当サイトにて、色々とTwitterの機能を実装する仕組みを色々と紹介しましたが、それらをまとめてみました。 JavaScript によるTwitterメッセージの埋め込み Twitterのメッセージをページに載せられるJavaScript「Twitter.js」 JavaScript 単体でTwitterのメッセージをサイトに簡単に埋め込み可能 サイトにリアルタイム更新＆検索機能付きTwitter窓を設置できるjQueryプラグイン「Juitter」 画面遷移なしにTwitterステータス表示＆検索ができるウィジェットを設置可能。 PHP製のウィジェットや投稿用サンプルコード等 Twitterのメッセージ表示などができるPHP＆AJAXなブログパーツ実装が可能な「Ptwix」 Twitterのメッセージ表示用のリロード機能付きウ
[JS]パネルをペロッとひっくり返すスクリプト -QuickFlip 2
divで実装した2枚のパネルを使用して、裏表にペロッとひっくり返すスクリプトをJon Raaschから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="quickFlip"> <div>表のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> <div>裏のパネル<br /> <a href="#" class="quickFlipCta">click to flip</a></div> </div> </textarea>
[JS]画像だけでなく、テキストなども拡大表示できるスクリプト -AnythingZoomer
demo: calendar 仕組みは、通常表示用の画像・テキストとは別に、拡大表示用の画像・テキストを用意し、それをクリップして表示しています。 そのためデータが二重に実装するのが弱点です。 AnythingZoomerはjQueryのプラグインのため、実装にはjquery.jsが必要です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]省スペースに複数のパネルをスライド表示するチュートリアル
[JS]パネルを水平方向にスライドしてエリアを拡大するスクリプト -sliding menu revisited