WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはMITです。 Wenk
placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生成にはcanvasを使っているようですので利用には対応したブラウザが必要になります。CDNも用意されていますのでお試しになってみては如何でしょうか。ライセンスはMITです。 placeholder.jsCDN
Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力のサポート、任意のプレフィクス、任意のキーワードを区切り文字にする、これらを組み合わせる、などが主な特徴になります。尚、電話番号に関しては国別に別スクリプトが用意されています(日本ならcleave-phone.jp.js)。結構使いやすくて応用もききやすい印象でした。ライセンスはApache 2.0。 Cleave.js
txt.wavは上記のようにテキストにCSS3ベースのアニメーションエフェクトを付与するスクリプトです。非依存型で単体で動作しますが、基本的にJavaScriptは1文字ずつ包括するシンプルなもので、エフェクトはkeyframesによるものになります。文字1つ1つに一定の間隔でanimation-delayで遅らせる事でこのようなエフェクトが作成されています。 このライブラリは他ライブラリの助けも必要としないバニラなスクリプトで、自分で別のエフェクトを作成、追加しやすいのが魅力ですね。ちょうどとりかかってるプロジェクトに相性良いので使わせてもらうことにします。ライセンスはMIT。 txt.wav
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.MapT
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日に東京都制が施行され、東京府と東京市を
任意の2つのテキストの差分をチェックして変更箇所の割り出しと結果の共有ができる差分チェッカー、Diff Checkerのご紹介。動作も早くて便利そうだったのでメモがてら。 ドキュメントの差分チェックツールです。 左右のカラムにテキストを入れてチェックすればいいだけ。変更箇所が割り出されます。 ↑ こんな感じで割り出されます。変更点がピンポイントで出ると嬉しいですけど、日本語だと上記のように文章まるごと扱われるみたいです。 個人的には使いやすくて好きでしたが、既存ツールも数多にあるのであえて選ぶ理由があるとすればユーザー登録出来る点とURLの発行・共有可能な所くらいでしょうか。 とはいえ、国産のdifff《デュフフ》でもURLが発行、共有は可能なのでお好みで。 Diff Checker
Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery/** * Characters limit exceeded warning with a simple jQuery plugin * @copyright Copyright 2013-2015 Joan claret * @license MIT * @author Joan Claret Teruel <dpam23 at gmail dot com> * Licensed under The MIT License (MIT). * Copyright (c) Joan Claret Teruel <dpam23 at gmail dot com> */ ;(function($, document, window, undefine
Result jQuery// by Real-Time Search in JavaScript //http://osvaldas.info/real-time-search-in-javascript 'use strict'; (function ($, window, document, undefined) { var $container = $('.faq'); if (!$container.length) return true; var $input = $container.find('input'), $notfound = $container.find('.faq__notfound'), $items = $container.find('> ul > li'), $item = $(), itemsIndexed = []; $items.each(fun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く