JQuery LinedTextAreaはtextareaに行数を自動付与するスクリプトです。jQueryに依存します。textareaに新たに書き込んでも行数は表示されます。用途は多くはなさそうですが個人的に必要になりそうなので備忘録。ライセンスはMIT。 JQuery LinedTextArea
Vidage.jsはフルクリーンで動画を背景にするスクリプトです。スマフォなどのモニタサイズが狭いデバイスなどでは画像が背景になるようにするようです。ファイルサイズは圧縮版で4.7kbほど。非依存型なので単体で動作してくれます。手軽で良いんじゃないでしょうか。ライセンスはMIT。 Vidage.js
Result SyntaxHighlighterによく付いてるやつ。 これ自体需要は少なそうだけど応用すれば一般向けに使えそうです。 jQuery $('pre').each(function() { //別窓表示させるためのリンクを付与 $(this).addClass('viewplain').append('<a href="#" class="plain">別窓で開く</a>'); }); $('a.plain', 'pre').click(function() { //別窓のウィンドウサイズ設定 var pl = window.open('', '', 'status=0, resizable=0, width=600, height=300, top=50, left=100'), output = $(this).parent().find('code').html(); /
Result よく見かけるやつです。 jQuery function foo (bar) { //メッセージを表示する要素を探す if (jQuery("body").find("#infoBox").length == 0) { //メッセージを表示する要素 jQuery("body").prepend("<div id=\"infoBox\"></div>"); } //指定したテキストを要素に挿入、スライドダウンし、一定の時間たったらスライドアップ jQuery("body").find("#infoBox").text(bar).slideDown().delay(3000).slideUp(); } //表示させるテキスト foo('こんにちは!こんにちは!'); css #infoBox{ height: 20px; background-color:#ffffff; widt
Result マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。 Google map APIも読み込みます。 jQuery /* CSS-Tricks Example by Chris Coyier http://css-tricks.com */ $(function() { //Googlemapのセッティング var koukyo = new google.maps.LatLng(35.685175, 139.7528), pointToMoveTo, first = true, curMarker = new google.maps.Marker({}), $el; var myOptions = { zoom: 15, center: koukyo, mapTypeId: google.maps.Map
flatpickrは軽量でシンプル、パワフルなJavaScriptデイトピッカーです。非依存型ながら軽量なコードで実装されていますが、機能はなかなか充実しています。同じclass名で複数フォームに対応できるのも良い配慮ですね。カラーテーマもいくつか用意されています。上のサンプルはオレンジを選択しました。CSS、スクリプト共にCDNも用意されています。かなり使いやすい印象でした。ただ、UIに慣れていないと年や時刻の変更が分かりにくいかもしれませんのでその辺はコンテンツに合わせて調整する必要がありそうです。ライセンスはMIT。 flatpickr
Result 大量の文字数がありますが、省略されています jQuery $("p").each(function(){ //30文字以上になったら if ($(this).text().length > 30) { //27文字まで表示する、という設定 $(this).text($(this).text().substr(0, 27)); //27文字以降に表示する代替テキスト。「...」とかが一般的? $(this).append('(以下略'); } }); HTML <p>1938年(昭和13年)6月に内務省が「東京都制案要綱<!--ここまで27文字-->」 発表し<!--ここまで30文字。ここ以降に文字がある場合は省略するスクリプトが動作-->、 1943年(昭和18年)1月に政府が「東京都制案」を帝国議会に提出し可決されたことを受け、 同年7月1日に東京都制が施行され、東京府と東
Umbrella.jsはjQueryに影響を受けて作られた軽量ライブラリ。DOM操作やAJAX周り、イベントなど、jQueryの機能を持ちながら圧縮版で3KBほどと軽量なライブラリを目指しているようです。だいぶこの手のライブラリも増えてきましたね。選択肢が増えて有りがたい限りです。ライセンスはMIT。 Umbrella.js
HospitalRunは電子カルテや医師情報の管理などを行える病院向けの情報管理システムです。Ember.jsが使われており、本システムもOSSとして公開されています。主に発展途上国での利用を目的としているそうで、オフラインでの利用を想定した設計となっているとの事。記憶に新しい所だとアフリカのエボラみたいな事が起こった際に現場は大きく混乱するでしょうし、こういったソフトウェアで医師管理などが出来ると医師の作業効率もアップするかも知れませんね。勿論、操作・管理する人間も必要なので本ソフトウェアが理想通り貢献が出来るかは医療チーム次第となりそうではありますが。動作サンプルもあるのでご興味のある方はご覧になってみては如何でしょうか。ライセンスはGPL。 HospitalRun
Type Termsはタイポグラフィの専門用語を図解で学べるWebサイトです。上図のように図解でそれぞれの対象となる部分やラインの用語をクリックすると解説が表示される、というもの。パッと見でどの用語が何を指すかが分かりやすい印象でした。説明を求められたらここ見てみてと教えてあげると手間も省けるかもしれません。 Type Terms
PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えないそうで、.whole(全体)、.half(1/2)、.three-quarters(3/4)のように直感で分かるような人間に優しいclass名にしているそうです。また、.twelve、.sevenといったclass名でも使えるそうです。この辺りは好みとは思うのですが、始めて使いはじめる、という場合はとっかかりやすい気はしますね。ライセンスはMIT。 Pills
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く