jQueryでマウスオーバー時に一瞬だけ光らせる（ウインクする） - fctale
サンプル サンプルテキスト ソース <img src="images/ririn.jpg" width="300" height="236" class="alpha" /> <p class="wink">サンプルテキスト</p> ソース img.wink { margin-bottom:10px; } p.wink { background-color:#CCC; width:50%; padding:5px; } ソース $(function(){ $(".wink").mouseover(function(){ $(this).css("opacity", "0.4"); $(this).css("filter", "alpha(opacity=40)"); $(this).fadeTo("slow", 1.0); }); });
面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」:phpspot開発日誌
textualizer 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 様々なアニメーションエフェクトがあり、文字に動きをつけて注目を集めたい場合なんかに使えそうです。 IE6を含むレガシーなブラウザにも対応しています。 次のような簡単な分かりやすいソースコードで実装できます。 キャンペーンサイトなど、インパクト重視のサイトに入れてみるとよさそうですね 関連エントリ 文字を映画ばりにカッコよくアニメーションさせるjQueryプラグイン「jWise.js」 特定要素内の文字をタイプライター風にアニメーションさせるjQueryプラグイン「TypeWriter」 テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」
Simple jQuery tabs | Papermashup.com
Professional consultation and product development—delivered on time and within budget, powered by modern technologies. Our team specializes in PHP, VueJS, React, and mobile development. Whether building from scratch or integrating with your existing team, we create seamless, high-performance solutions By partnering with a select number of clients each year, we dedicate our full time and attention
使いやすいセレクトボックスを実装できる jqselectable.js :: 5509
3年くらい前に最初のバージョンを作ったjQselectableをほぼ全て書き直しました。書きなおす流れで以前のものと互換性がなくなってしまったので、新しいものとして公開します。 jqselectable のサンプル 5509/jQselectable – GitHub 使い方 実行する前に ファイルをgithubからダウンロードして、CSS/JSファイルを読み込んでおきます。 jQueryプラグインなので、jQueryも読みこんでおきます。推奨は一応最新バージョンです。 CSSは jqselectable/style の中に selectable natural xp と3つ入っているので好きなものを選んでください。自分で書いても大丈夫です。そのときはgithubからpullリクエストください。 実行する ready関数は必要に応じて使ってください。 jQuery(function($){
組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」:phpspot開発日誌
jQuery Org Chart ? a plugin for visualising data in a tree-like structure The Silver Lining 組織図っぽい図を簡単に作れるjQueryプラグイン「jQuery Org Chart」 次のような組織図を作ることができます。ドラッグ＆ドロップでインタラクティブに再配置することも可能です ドラッグ＆ドロップで再配置可能 気になるマークアップですが、ul, li を階層的に記述するだけでよいものになっています。これを上記のようにビジュアライズしてくれるのは楽ですね 関連エントリ アニメーションするスピードメーターを実装できるjQueryプラグイン「Speedometer」 複数要素の関連をビジュアライズできるライブラリ「arbor.js」
PHPを使ったAjaxファイルアップロードサンプル１０:phpspot開発日誌
10 Free Ajax Upload File Sample With PHP PHPを使ったAjaxファイルアップロードサンプル１０ Ajaxベースのものや、アップしたものを加工できるもの、エクスプローラベースのリッチなものなのが紹介されていて、つくろうとした時にある程度お望みのものがみつかるかも 本番環境で使う場合は認証を実施したり、そもそもセキュリティが考慮されていないものであったりするので、セキュリティ等に気を付けたいところですが、ベースとして使えそう 関連エントリ デスクトップからドラッグ＆ドロップでファイルアップロードも可能なjQueryプラグイン「jQuery File Upload」 HTML5を使ったファイルアップロード用プログラム集 HTML5でプログレスバー付きファイルアップロードを実現する例
階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」:phpspot開発日誌
階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」 2011年12月02日- Arborescence.js | jQuery Plugins 階層的なdivをツリービュー風に変換してしまうjQueryプラグイン「Arborescence.js」 divで複数階層化したデータをこのプラグインで初期化するとクリックで開閉できるツリービューに仕立て上げられます トップ項目の表示を減らし場合によってはコンテンツを見やすくすることが可能です ↓↓↓ １行でツリービューに。 CSSできれいにスタイリングしたほうがよさそうですが、便利なプラグインですね 関連エントリ 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 ピュアCSSなのに折りたたみ可能なツリーメニュー実装例 WindowsアプリのツリービューっぽいUIをWEB上で簡単
jQueryのフィルタを使った際の実装サンプルと基本的な機能のまとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意し
テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」:phpspot開発日誌
テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 2011年11月14日- jQuery Autosize for textarea elements テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 次のようにテキストを入力するとちょうどテキストにフィットするようにtextareaのサイズが変わります。最初からあまり大きくしたくないけどスクロールさせたり利便性を損なうのは嫌、という場合に使えます。 この手のプラグインは過去にも紹介しましたが、jqueryプラグインなので、必要プラグインを読み込んだら、$('textarea').autosize(); のように初期化しちゃえば使えちゃうというのもいいですね jQue
長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」:phpspot開発日誌
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
HTML5+jQuery製の管理画面を作るためのテンプレート・HTML5 ADMIN - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなかユニークだったのでメモ的に。 HTML5+jQueryで使いやすい管理画面を 作るためのテンプレート・HTML5 ADMIN です。管理画面は見た目よりも機能性 のみに焦点が絞られるのでこういった テンプレートは結構貴重ですね。 テンプレートそのものを使う予定は無いですけど、管理画面におけるUI構築は、見た目ではなく、利便性、ユーザービリティのみに焦点が当てられるのでこういうテンプレで学べることも割と多いです。贔屓するわけじゃ無いですけど、WordPressの管理画面は他のCMSやブログエンジンよりはるかに万人に分かりやすく使いやすいように出来ていてとても参考になる点が多いです。機能を意識せずとも使える、というのは秀逸なデザインであるともいえます。 画像だけ
CSSを追加してjQuery Mobileのデザインをカスタマイズ！ | Lab by engineering@dwango.jp
こんにちは初めまして、石崎と申します。 今回は jQuery Mobile シリーズ3回目！ということで、jQuery Mobile デザイン編です！ jQuery Mobile には 標準のテーマ（色見本）が5つ用意されています。この標準のテーマを使用してアプリを作ることも可能です。しかし、アプリやサイトにはそれぞれのデザインやブランドイメージがあり、標準のテーマとは違うイメージのものを作りたい場合があります。 そんな時のために、今回は CSS などをカスタマイズして独自のデザインをいれていくノウハウについて説明します。 対象読者 CSS3, HTML5 の知識がある方 jQuery Mobile の仕組み 今回は jQuery Mobile のバージョン 1.0 RC2 を扱います。 先ほど述べたように、jQuery Mobile には標準のテーマが5つ用意されています。data-th
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
jqueryでチェックボックスを一括変更する方法
チェック項目がたくさんある場合、一括でチェックをつけたり、はずしたりできるとユーザーの手間がだいぶ省けますよね。 ということで html <input type="checkbox" id="all" />全て <div id="check"> <input type="checkbox"/>お金 <input type="checkbox"/>愛 <input type="checkbox"/>知識 <input type="checkbox" />時間 <input type="checkbox" />健康 </div> 全てのinputにid=”#all”、その他をdiv id=”#check”でくくっています。 $(function(){ $('#all').click(function(){ if(this.checked){ $('#check input').attr('ch
○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」:phpspot開発日誌
jQuery Timelinr ○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」。 次のような年をインデックスとしたスライダーを作ることができるjQueryプラグイン。 会社の歴史とか、PHPの歴史とかなんでもいいのでタイムラインをちょっと雰囲気を持たせながら表示させたい場合に使えそうです 年部分をクリックするとかっこよくアニメーションしながらスライドしてくれます。 すべての内容は１個のHTMLに入れられて作るのも楽そうです。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 RSSやATOMフィードを読み込んで表示できるjQueryプラグイン「FeedEk」
jQuery Mobileでのアプリケーション開発にBackbone.jsを導入しよう | Lab by engineering@dwango.jp
こんにちは、2011年度新卒エンジニアの夏目です！突然ですがみなさんJavaScript書いてますか？ 最近はjQuery Mobileなどを利用したスマートフォン向けアプリ開発において、クライアントサイドでもヘビーなJavaScriptのコーディングをする機会があると思います。そのようなときコードのいたるところにHTMLが混入したり、どこでどのデータを扱っているのか分からなくなるということになりがちです。 今回はそんな悪夢のようなコーディング生活に一筋の希望の光を照らすBackbone.jsを紹介したいと思います。 対象読者 JavaScriptでの開発経験がある方 Backbone.jsとは Backbone.jsはDocumentCloudが開発をしている、クライアントサイドのJavaScriptコードをModel、View、Controllerで構築するためのフレームワークです。b
jqueryで簡単な連動型ドロップダウンリストを作る - susan-styleの日記
jqueryで簡単な連動型ドロップダウンリストを作る。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>簡単なドロップダウン</title> <script src="./js/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#parent").change(function () { //alert($
How to replace plain URLs with links?
First off, rolling your own regexp to parse URLs is a terrible idea. You must imagine this is a common enough problem that someone has written, debugged and tested a library for it, according to the RFCs. URIs are complex - check out the code for URL parsing in Node.js and the Wikipedia page on URI schemes. There are a ton of edge cases when it comes to parsing URLs: international domain names, ac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Analyzing DOM Event via Firebug :hover
Edit fiddle - JSFiddle - Code Playground