textareaでオートコンプリート機能を実装するjQueryプラグイン・jQuery.textcomplete
textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies);セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作ってあったテキストをオートコンプリートとして実装、アイコン付きに置換してるみたいですね。詳細はGithubに書かれています。 ラ
Qiitaのtextarea自動補完がOSSになりました - Qiita
jQuery.textcomplete（デモ） GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 を書いたのも今は昔、いつか続きを書こう書こうと思いながら気がつけば5ヶ月が過ぎました なんか続きを書くのが面倒くさくなったのと、某日本最大レシピ共有サイトの技術部長の人から「OSSにして欲しい」という要請を人伝に受け取ったこともあって、OSS化した次第です。 ライセンス MITライセンス 簡単な使い方 簡単に説明します。詳しくは README を読んでください。 まず jQuery.textcomplete は名前からも分かるように jQuery プラグインになっているので、別途 jQuery が必要です。 <script src="path/to/jquery.js"></script> <script src="path/to/jquery.textcomp
[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素（変更可能）で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ：1</section> <section>コンテンツ：2</sect
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js
画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isotopeなど）グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。 類似スクリプトで生じる隙間も埋めます。 比率 全てのエレメントのベースとなる比率を設定 サイズ グリッドに応じたサイズを設定 カラム 複数のブレイクポイントごとにカラムを設定 フィルター 空白スペースを埋めるための要素を設定 ガター エレメント間の溝を設定 Mason.jsのデモ ページには
ScaleOut | Supership
「ミライリアルの幸せを、デジタルの力で創る」ことを目指すSupershipグループの社内報です。日々の出来事、メンバーの働く様子や声、未来への想いなど、Supershipグループの”Be Super”なストーリーをみんなでシェアしていきます。
レスポンシブウェブデザインに本当に役に立つツール・リソース まとめ | tagamidaiki.com
この記事はonextrapixelに掲載された Really Useful Resources and Tools for Responsive Web Design の内容を日本語訳したものです。 レスポンシブウェブデザインは最近まで小さなトピックの1つでしたが、今ではモバイルやタブレットブラウザをデザイナーやユーザーが最大限活かすべく多くのツールがモバイル端末周辺で開発されています。 レスポンシブデザインが小型端末に限られていないのは、最近公開された多くのツールはモバイルやタブレットの世界にターゲットを定め、綺麗で柔軟性に富むウェブサイトを出来るだけ簡単に構築しようとしているからです。 レスポンシブデザインに取り組むとき、ほとんどのデザイナーが考える最初のことは、メディアクエリーです。 この記事では、メディアクエリーの枠を超え、全てのモバイル用、タブレット用、そしてもちろんデスクトップ
見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る
twitter facebook hatena google pocket Facebookをはじめスマートフォンサイトやアプリでは、メニューをタップするとサイドからにゅっと出てくるメニューが導入されて久しいです。 今回はSidr - A jQuery plugin for creating side menusを利用して、にゅっと出してみましょう。 sponsors 使用方法 Sidrからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.sidr.dark.css"> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.sidr.min.js"></script> <sc
jQuery Plugins
The jQuery Plugin Registry is in read-only mode. New plugin releases will not be processed. We recommend moving to npm, using "jquery-plugin" as the keyword in your package.json. The npm blog has instructions for publishing your plugin to npm. Learning Center Forum Twitter IRC GitHub Copyright 2024 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more informat
[JS]簡単で便利でしかもかっこいい！ソーシャルメディアのボタンを複数パターン同時に設置できるスクリプト -#50C1AL
ページ上のボタンやテキストなどにclassを追加するだけで、簡単にソーシャルメディアのボタンをかっこよく設置できるjQueryのプラグインを紹介します。 #50C1AL #50C1AL -GitHub #50C1ALの特徴 #50C1ALのデモ #50C1ALの使い方 #50C1ALの特徴 主要なソーシャルディアを簡単にウェブページに設置できます。 46種類のかっこよくデザインされたアイコンを用意。 ページへの設置は、classを書くだけ！ 同じページに複数の設定を設置可能。 アニメーションやブラーなど多彩なオプション。 #50C1ALのデモ デモでは、ページ内に2つの設定を配置しています。 まずは、ボタンの方から。 テキスト選択で表示 #50C1ALの使い方 Step 1:外部ファイル まずは、head内に外部スタイルシートを配置します。 <link rel="stylesheet" h
今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました - Webデザイン初心者向けのあれこれ
風邪引いてしんどい…僕です。 登場から数年、すっかりお馴染みとなった「lightbox」。 この数年の間に様々な派生プラグインが出ました。 今回は、そのいくつかを紹介していきたいと思います。 1.ColorBox 2.fancyBox 3.prettyPhoto 4.jQuery.popeye 2.1 5.Shadowbox.js（商用利用は有料） http://www.tripwiremagazine.com/2012/07/jquery-lightbox-plugins.html 他にも、こちらのサイト（英語）で沢山のlightboxライブラリが紹介されていますので、気になった方はこちらもどうぞ。 それでは、体調がすぐれないのでこの辺で…m(_ _)m
jQuery Boilerplate - jQuery Plugin Registry
Suddenly you come across the idea of wanting to make a web page, but then a new word comes your way that you may not know. The plugins. What? It turns out that as soon as you see her you are scared, but calm down. It is nothing that complicated, and it turns out that they are quite an important tool when it comes to making your website. In fact, there are some essential plugins for a web page, s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
