jQuery.highlightRegex - 正規表現を使ったテキストハイライト MOONGIFT
正規表現を使いこなせればコード量も大幅に減る可能性がありますし、全体の見通しも良くなります。ミスすると怖い時もありますが、それだけに普段から練習して問題ない正規表現が書けるようになりたいものです。 そこで試してみたいのがjQuery.highlightRegexです。jQueryを使って正規表現でテキストハイライト処理を行うライブラリです。 jQuery.highlightRegexの使い方 リアルタイムにハイライトされていきます。 例えばこんな感じ。 正規表現の練習はもちろん、Webアプリケーション内でのテキスト検索などに使うことで正規表現を使った高度な検索機能が提供できるでしょう。使いどころの多そうなライブラリです。 jQuery.highlightRegexはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 jQuery.highli
selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」:phpspot開発日誌
selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 2015年02月03日- jQuery easySelect selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」。 selectタグにmultiple属性を追加すると複数選択が可能ですが、これを複数選択形式をUIを変えて入力補完のような形にするプラグインです。 selectのmultipleはCtrlキーを押しながらクリックするなどというUIとなるため、あまり採用はされませんが、ケースによってはこういう入力のUIも使いやすい場合がありそうです 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flex
高機能＆高速なテーブル実装jQueryプラグイン「WATable」:phpspot開発日誌
WATable - A swiss army jQuery table plugin 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 フィルタ、フォーマット、ぺージ分け、ソート等を高速にJSで機能させられるテーブルの実装が出来ます。 データを全部一括で読み込んでいるためかなり高速に動作します。 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」 レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」:phpspot開発日誌
Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッとまとめて表示したい場合に便利そうです 次のようにJSONでURLを定義してあげればまとめて表示してくれるみたい 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグ
ネストされたリストにも対応のドラッグ&ドロップによる要素の入れ替えを可能にするjQueryプラグイン・Nestable
入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。 親要素や子要素はその下層要素を格納できます。 コード<script src="http://ajax.googleapis.com/a
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
郵便番号から住所を補完するjQueryプラグインを作ってみた · けんごのお屋敷
郵便番号から住所を自動的に補完してくれる JavaScript のライブラリに AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム(CGI不要版) がありますが、それを jQuery のプラグインとして実装したものを作ってみました。 jquery.ajaxzip2 通常版と、スペースや改行などが圧縮された minify 版があります。使い方はリンク先の github に書いてあるので参考にしてください。 また jquery.ajaxzip2 を実装するにあたって、さらに使いやすくするために従来の AjaxZip2 を少し拡張しました。 拡張機能 次のような機能を新たに追加しています。 住所補完後の動作をコールバック関数で指定可能 郵便番号から住所を補完する際に JSON 形式の住所データを非同期に取得しにいきますが、それが完了した後に呼び出されるコールバック関数を指定できる
画像の上に文字を表示 Hover Captions (HCaptions.js)
Markup example This example uses all default settings. <a href="#myToggle" class="panel"> <img src="http://placehold.it/470x300/f1f1f1/aaa&text=Example" /> </a> <div id="myToggle" class="cap-overlay hide"> <h5>Cupcakes</h5> <div class="content"> Name: cupcakes.png<br /> Photography: Ryun Shofner<br /> <a href="javascript:void(0)" class="button small"><i class="icon-edit"></i> Edit</a> <a href="jav
scrollnav.js
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
jQuery multiselect
I'm a user-friendlier drop-in replacement for the standard <select> with multiple attribute activated. Free (under WTFPL license) Works in an unobtrusive fashion Fully open sourced Keyboard support Provides some callbacks Fully customizable via CSS Depends on jQuery 1.8+ Tiny code ~8kb minified HTML <html> <head> <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」:phpspot開発日誌
複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスをCSSセレクタっぽく、jQueryっぽく簡単にアクセスできます。 例えば、次のようなJSONデータがあったとしましょう。 JSONSelectで、「.languagesSpoken .language」として選択すると、次のように要素を選択できます。 例えば、検索結果などで、同じ構造の要素がリストとして帰ってくるようなケースにおいて、同じ名前の属性リストをサクッと取得可能。 上位階層が指定できるた
使い道色々。jQueryを使ってSparklineグラフを描く·Peity MOONGIFT
PeityはjQueryでSparklineグラフ（円、棒、折れ線）を描くJavaScriptライブラリ。 PeityはjQuery/JavaScript製のオープンソース・ソフトウェア。Webサイトはテキストコンテンツが多い。一覧表などはテーブルタグを使えば簡単に実現できるが、それをグラフ化しようと思うと面倒に感じてしまうからだろう。 円グラフ だがライブラリを使えば容易に実現できる可能性がある。Canvasタグを使ってSparkline系グラフを描くライブラリがPeityだ。 Sparklineとは一行程度の小さなグラフで、縦軸横軸の説明は行わない。そのような説明がなくとも十分理解できるグラフについて使われる。ごく小さいので文章中に埋め込むのも容易だ。Peityでは円グラフ、折れ線グラフ、棒グラフの三種類を描くことができる。 折れ線グラフ タグの中に埋め込まれた文字を使ってグラフにして
SmartColumnScroller plugin for jQuery
Description In multicolumn page layout, automatically scrolls smaller (lower) column so user never sees white space underneath. Usage jQuery(window).load(function () { jQuery('#myDiv1, #myDiv2').smartColumnScroller(); }); Recommendation Start plugin processing in 'window.load' event and not in 'document.ready'. Source code Source code is available on https://github.com/dhlavaty/jQuery-SmartColumnS
使いやすくデザインもよい星型レーティング実装jQueryプラグイン「jRating」:phpspot開発日誌
MyjQueryPlugins : jRating - Ajax rating system with jQuery 使いやすくデザインもよい星型レーティング実装jQueryプラグイン「jRating」。 デザインは次のように、綺麗な星のデザインになっており、個性が強すぎず、弱すぎずという感じで汎用に使えそうです。 isDisabledオプションを true にすると、星だけ表示して投票禁止にすることも出来るので、ログインユーザのみに限定したい場合なんかにも使えそうです。 更に次のような小さな星にすることも出来ます。 次のように、成功、失敗時のイベントハンドラを設定することも可能。 $(".exemple6").jRating({ onSuccess : function(){ jSuccess('Success : your rate has been saved :)',{ Horiz
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」:phpspot開発日誌
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」 2010年01月26日- jQuery.sheet これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」。 参照に対応していて、A1 に 2 が入っていたとして、A2に「=A1*2」とするとちゃんと4と表示されたり、色々なおなじみのExcel 関数(ABS, AVERAGE, CEILING, COUNT, IF, MAX, MIN, PI, ROUNDなど)をそのまま使うこともできてしまいます。 デモページ 単にソート機能がついたり、そのまま編集できるだけではなく、本当にExcel っぽいところがすごいですね。 デザインは上記固定ではなく、色々なデザインテーマを適用することもできるようです。 あと、実装もjQueryプラ
jQueryで作ってみる - ドラッグで増減するスピンボックス jquery.dragspinner.js
水色のスピン部分を上下にドラッグすると、テキストボックスの値が増減します。 上移動で増加、下移動で減少となります。 Webの方ではこういったコントロールはあまり見ないですが、Windows等のアプリケーションのコントロール等にはしばしばお目にかかります。 意外と汎用性が高いので、操作されている方にとっては、「欲しいな」って思われる方もいるでしょう。 特長 ・汎用性がある：1,2マスの細かな移動から、100,1000ピクセル単位のピクセル移動まで、何でも。 ・コンパクトに設置できる：テキストボックスの右に20ピクセル程のスペースに収まります。 ・利用環境に対応：ノートＰＣ等でホイールが無くても大丈夫。基本的なマウス操作のみ。 設置方法 HowToSetupJapanese - jquery-dorag-spibox Google Code googleコードに置いてみました。チェックしてみて
Automatically generate table of contents using jQuery : Janko Jovanovic
Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code. Extract information from HTML I will star
Fun with Overflows | jQuery for Designers - Tutorials and screencasts
Posted on 16th October 2008 — Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. So this episode of J4D demonstrates the same effect used in two completely different ways. Earlier: Two New Series Next: Simple jQuery Spy Effect Background The first is a scrollable timeline. A couple of readers request
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]クロスブラウザ対応、モーダルボックスの軽量スクリプト -SimpleModal
[JS]超軽量で、シンプルなツールチップを実装するスクリプト -vTip