長いテキストを「…」で省略するjQueryプラグイン・Smarttruncation
長いテキストを省略して表示 する、というjQueryプラグイン 、Smarttruncationのご紹介。 CSSのみでも一応は可能ですけど、 こちらはある程度応用が利くの で覚えておこうかと思います。 この手のライブラリはいくつか見かけましたけど、これは日本語でもそのまま利用出来るので一応メモ。 動作サンプル 長いテキストが省略されています。上は語尾を、下は真ん中あたりで省略。なかなか便利なのでは。 CSSのtext-overflow:ellipsis;で制御できない時に試してみてはいかがでしょう。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script src="jquery.smarttruncat
HTML5 × CSS3 × jQueryを真面目に勉強 – #8 jQueryプラグインの作り方について詳しく | DevelopersIO
僕は人の名前を覚えるのが苦手です。それはさておき、jQueryプラグインの作成方法について頻繁に忘れるので、手順をここにまとめておくことにします。コレさえ読めば急にプラグインを大量に作れといった無茶ぶりをされても大丈夫。 多い日も安心♪（ゝω・）vｷｬﾋﾟ はじめに - jQuery プラグインの構成 細かい差はあれど、基本的にjQueryプラグインは以下のような構成で成り立っています。 // 匿名関数で全体をラップ - (5) (function($) { // このプラグインの名前 - (1) $.fn.name_space = function() { //要素を退避 - (2) var elements = this; // 要素をひとつずつ処理 - (3) elements.each(function() { // 具体的な処理をここに記述 }); // method chain
注意や案内を促すためのNotificationを実現するjQueryのまとめ「20 Useful jQuery Notification Plugins and Tutorials」
注意や案内を促すためのNotificationを実現するjQueryのまとめ「20 Useful jQuery Notification Plugins and Tutorials」 多様化するWEBサイトの中で、様々なユーザーが迷わないような工夫が施されていますが、今回紹介するのはその中でも、注意や案内を促すためのNotificationを実現するjQueryをまとめたエントリー「20 Useful jQuery Notification Plugins and Tutorials」です。 jQuery “growl-like” notification plugin Notificationといっても、アラート的なものから、メッセージの数を知らせるものなど様々ですが、今日は紹介されているものの中からいくつかピックアップして紹介したいと思います。 詳しくは以下 Notification
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate - かちびと.net
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" sr
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
使いやすいセレクトボックスを実装できる 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プラグインいくつか - かちびと.net
必要になるかも知れないので、 今のうちにかき集める作業です。 よくみる無限スクロールサイトを 実装できるjQueryプラグインです。 あんまり使ったこと無いので 注意点なんかのメモ書きもして おきます。 というわけでいつもの自分用メモなので、これから触る用のまとめです＝オススメプラグインとかじゃないです。無限スクロールと言っても要素が無くなれば止まります。当たり前ですが。 Tumblrとかギャラリーとかでよく見かける無限スクロールを実装できるやついろいろ。WPデザインギャラリーでも実装していますが、これは5509氏のプラグインによるものです。便利っすー。 infinite scroll jQuery Masonryっていう、boxを段々にするやつと一緒に使ってるのを以前実装しました。結構よかった。WPプラグインもあるみたい。 infinite scroll Endless Scroll ち
長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」:phpspot開発日誌
NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン
jQueryのプラグイン33+1選 -2011年9月 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
会社ロゴマーク デザインアーカイブ
Captcha security check laquu.com is for sale Please prove you're not a robot View Price Processing
タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ:phpspot開発日誌
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
[JS]jQueryのプラグイン33 1選 -2011年7月 | コリス
jquery.transitions CSS transitionのサポートを検出し、classベースのアニメーションを与えることができます。
スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」:phpspot開発日誌
DropKick - a jQuery plugin for beautiful dropdowns スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 次のようなデザインのドロップダウンが実装できます。大きめなデザインなのでスマフォでも使えます。 テーマは2種類あってホワイトとブラックから選べます マークアップとしては単なるselectなのでJSがおふでも使えるというものです 関連エントリ 超かっこいいmarquee2.0を実現するjQueryプラグイン「fMarquee」 テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
かなりクールなjQueryのメニュープラグインやチュートリアル集:phpspot開発日誌
15 Fresh jQuery Menu Plugins and Tutorials かなりクールなjQueryのメニュープラグインやチュートリアル集 メニューというと便利なものが多かったりしますがデザイン性も秀逸なものといえば、その中から限られたものになります。 「むむぅ、これは」というデザインのものが多数紹介されていましたのでご紹介です。 １からリデザインしなくても少しの手間で実用的なものが実装できそうです これはつかえますね 関連エントリ WindowsのメニューバーっぽいUIを実現できるjQueryプラグイン「Win Menu」 Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 画像がダイナミックにスライドするメニューバー実装jQueryプラグイン「pictureMenu」 カッコいい円形のメニューナビゲーション実装jQueryプラグイン「Flowe
h1〜h6で作った文書の階層を元にメニューを自動生成してくれるjQueryプラグイン「pageMenu」:phpspot開発日誌
h1〜h6で作った文書の階層を元にメニューを自動生成してくれるjQueryプラグイン「pageMenu」 2011年07月07日- $ pageMenu plugin 0.0.2 | jQuery Plugins h1〜h6で作った文書の階層を元にメニューを自動生成してくれるjQueryプラグイン「pageMenu」 HTMLでH1〜H6で綺麗に階層的に文書を記述しておくと次のようなページメニューを自動で作ってくれてページ内リンクしてくれるというものです。 自分で作ると文書追加の際に修正しなくてはならず、漏れも発生しそうですが自動でやることでその心配や手間はゼロになります。 初期化もカンタン。 jQuery('h2').pageMenu(); 綺麗にHTMLを書いている方はこの1手間でかなり使いやすくなりますね 関連エントリ iOSのシェイクイベントを取得できるjQueryプラグイン「gS
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」:phpspot開発日誌
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
