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ドロワーメニュープラグイン【jSlideMenu】を使ってみた｜わざログ｜ うずまきブログ｜ 名古屋のホームページ制作／印刷物デザイン 株式会社うずまきデザイン
ずいぶんと前に日本列島に寒気がやって参りましたね。最近はこたつの中で横になりながらジャンプ片手にみかん片手に、ついでにテレビ見ながらごろごろしてることを思い浮かべながら布団に入るのがついつい日課になってるエンジニアの松本です。 長めの自己紹介はさておき、本日は今ノリにノッているあのイケてるドロワーメニューを使ってみたいと思います。 google.com スマホ版 巷で噂のドロワーメニュー。FacebookアプリやGoogleサイト（*右画像）など、だれもが利用しているアプリやWebサービスで導入されています。横からニュルっとスルっとでてくるあのメニューこそ、ドロワーメニュー張本人です。あのニュルニュル感が気持ちいいから、ついつい何回も何十回も何百回も角っちょのメニューアイコンを押しちゃうんですよね。ああ気持ちいい。 今回ドロワーメニューを導入する際に使用したのはjQueryプラグイン【jS
ネストされたリストにも対応のドラッグ&ドロップによる要素の入れ替えを可能にするjQueryプラグイン・Nestable
入れ子のリストにも対応した、 ドラッグ&ドロップによるソート 可能なjQueryプラグインの ご紹介。jQuery UIを使うほど でも無いような時はこういう のあると嬉しいですね。 ネスとされたリストのソートをドラッグ&ドロップで可能にするjQueryプラグインです。非圧縮で13KBほど。うまくキャプチャ撮れなかったですけど、iPhoneでも動きました。 ネスとされたリストでもドラッグ&ドロップでソート可能です。勿論、孫要素から子要素に移動させる事も出来ます。 WordPressのカスタムメニューを触ったことがある方ならピンと来るかもしれないですね。WPではjquery-ui-draggableを使用していますが、こちらはjQueryUI無しで動きます。 親要素や子要素はその下層要素を格納できます。 コード<script src="http://ajax.googleapis.com/a
画像の上に文字を表示 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.
数値だけでなく、日付や時刻にも対応したスライダー・jQRangeSlider - かちびと.net
D&Dで操作するスライダーを実装するjQuery依存のスクリプトです。数値のものが多いですが、こちらは日付や時刻などにも対応しています。使うシーンは多くは無いかもですけど、便利そうです。 日付にも対応のスライダーです。※ピッカーではありません
【作ってみた】スクロールで要素が登場するとハイライトしてくれるjQueryプラグイン「scrollHighLighter」
HOMEHTML/CSS【作ってみた】スクロールで要素が登場するとハイライトしてくれるjQueryプラグイン「scrollHighLighter」 この記事は10年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。Webサイトを閲覧していると、一体どこがクリック出来るエリアなのか分からないことがあります。 このプラグインは、画面をスクロールしていって、該当の要素が画面内に登場するとハイライトしてくれるというプラグインです。 デモ ダウンロード 仕組みとしては、指定した要素の上にdivの透明レイヤーを配置して、ハイライト時に一瞬だけ表示という方法で実現しています。 もともとはaタグにバインドして利用することを想定していましたが、他の任意の要素にもバインドできます。 基本的な使い方 html <script src="js/jquery-1.4.4.min.js" languag
fieldset要素単位で横スライドするバリデーション付きの入力フォーム用jQueryプラグイン・jQuery Stepy - かちびと.net
縦長になるような入力フォームにいいかな と思ってメモ。fieldsetでグループ化された 要素単位でスライド化してくれます。下部 までスクロールする必要が無くなるのと、 どこが誤入力か分かりやすい、場所を取ら ないなどのメリットがあります。 特に、入力項目が長いフォームは離脱率を高くする可能性も否めませんので、入力プロセスを補助するのはユーザビリティに大きく貢献出来るかと思います。IE6でも7でも動作するようです。 日本語に直してみました。これは1例で、3つに分けなければならないわけではありません。 入力をミスすると、次のfieldset要素に進めない（スライドできない）という仕組み。 fieldsetごとにバリデーションチェックを行うのでユーザーもストレスが無いような有るような。 うん、ストレス無いです。（ｷﾘｯ ファイルとか <script type="text/javascript"
ブラウザに分かりやすい通知を送れるスクリプト色々:phpspot開発日誌
あけましておめでとうございます。 今年も淡々と更新をしていきます。よろしくお願い致します。 今年一発目のエントリはブラウザに分かりやすい通知を送れるスクリプトを色々とまとめてみました。 jNotify ページ全体がグレーアウトし、メッセージが強調表示されます。 他の操作がしばらくできないので、確実にメッセージを読んでもらえるようにできます。 アイコンの変更や、メッセージにHTMLを使うことも可能。 Notimoo ページの右上なんかにフェードインしながらブロックをアニメーション表示させられるJSライブラリ。 複数メッセージを連続して出すことが出来ます。 jQuery Notify bar Twitterの通知バーっぽいＵＩでユーザ通知できるjQueryプラグイン。 これも非常に分かりやすい通知が行えます。 jQnotice 吹き出しっぽいデザインで通知が行えます SlideNote 指定位
jQueryで作ってみる - ドラッグで増減するスピンボックス jquery.dragspinner.js
水色のスピン部分を上下にドラッグすると、テキストボックスの値が増減します。 上移動で増加、下移動で減少となります。 Webの方ではこういったコントロールはあまり見ないですが、Windows等のアプリケーションのコントロール等にはしばしばお目にかかります。 意外と汎用性が高いので、操作されている方にとっては、「欲しいな」って思われる方もいるでしょう。 特長 ・汎用性がある：1,2マスの細かな移動から、100,1000ピクセル単位のピクセル移動まで、何でも。 ・コンパクトに設置できる：テキストボックスの右に20ピクセル程のスペースに収まります。 ・利用環境に対応：ノートＰＣ等でホイールが無くても大丈夫。基本的なマウス操作のみ。 設置方法 HowToSetupJapanese - jquery-dorag-spibox Google Code googleコードに置いてみました。チェックしてみて
Pretty checkboxes with jQuery | Aaron Weyenberg
I'm Aaron and I make stuff that goes on the internets. We can be Twitter buds, and my feed is here. Stuff I've posted about lately Twitter film branding Facebook IE beer summit visualization cinematography Popular Tags IE howto jQuery Facebook cinematography beer summit visualization Helvetica marketing freebie Tropicana Wordpress packaging design branding film Twitter Learn how you can send me to
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
jQuery用のscript.aculo.usがリリース「jQuery UI」:phpspot開発日誌
jQuery UI: Widgets, Components, and Interactions jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. jQuery用のscript.aculo.usがリリース「jQuery UI」。 ドラッグ＆ドロップ、ソート、エレメント選択、リサイザブル、アコーディオン、カレンダー等、ＵＩに関わる機能が盛りだくさんです。 Interactions Draggables Droppables Sortables Selectables Resizables Widgets Acco
Interface elements for jQuery - About Interface
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commerci
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
[JS]クロスブラウザ対応、モーダルボックスの軽量スクリプト -SimpleModal
[JS]省スペースにフェードと自動スクロールで表示するスクリプト -Simple Spy
jQuery textarea resizer plugin