タグ

JavaScriptと あとで読むに関するkzhvsonicのブックマーク (4)

  • レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス

    スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ:幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ

  • 画像のサムネイル表示にも対応したWebブラウザへのD&Dアップロードライブラリ·Dropzone MOONGIFT

    Dropzoneはファイルのドラッグ&ドロップによるファイルアップロードを可能にするJavaScriptライブラリです。 Gmailではじめ(恐らく)見て以来、様々な場面で見られるようになったWebブラウザへのファイルのドラッグ&ドロップでのアップロード機能ですが、より手軽に扱えるようにしてくれるライブラリがDropzoneです。 トップページです。 ファイルをドロップしました。画像はサムネイルが表示されます。 画像をアップロード中。平行して実行されます。 ファイルをドロップすると自動的にアップロードを開始してくれます。ドロップしたりアップロードが完了したりしたタイミングでイベントを実行したり、最大ファイルサイズ指定やサムネイルの表示設定など細かなカスタマイズができるようになっています。 DropzoneはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

    画像のサムネイル表示にも対応したWebブラウザへのD&Dアップロードライブラリ·Dropzone MOONGIFT
  • 日付ピッカーを実装するだけのシンプルなスクリプト・Pikaday

    シンプルな日付ピッカーを実装する 為のスクリプト・Pikadayのご紹介。 jQueryなどに依存せず、独自で動作 する非依存型スクリプトなので使い やすいのでは無いかと思います。 シンプルな非依存型のデートピッカーです。ありそうでないような。 普通のデートピッカーです。他ライブラリを必要としないので手軽に使えそうですね。圧縮版で9KBほど。jQuery依存版も一応あるみたいです。 Sample 動作サンプルです。日語にはまだ直してないです。 コード<script src="pikaday.js"></script> <script> var picker = new Pikaday( { field: document.getElementById('foo'), firstDay: 1, minDate: new Date('2000-01-01'), maxDate: new Da

    日付ピッカーを実装するだけのシンプルなスクリプト・Pikaday
  • テキストの末尾処理はお任せ·trunk8 MOONGIFT

    trunk8は文字列の末尾処理を行うjQueryライブラリです。 Webサイトを作る際には長過ぎる文字に対して適当なところで区切る処理がよく行われます。サーバサイドで行う手もありますが、今回はtrunk8というクライアントサイドの文字切りライブラリを紹介します。 ベーシックな使い方。単にtrunk8を呼び出すだけ。 複数行も問題なし。 増やせば自動的に調整されます。 末尾文字は自由に決められます。 内容を更新すればそれに合わせて変化します。 YouTube風のトグルもできます。 画面幅に合わせて自動リサイズも可能です。 trunk8はクライアントサイドなのでより柔軟な文字のカットが行えます。面白いのは文字数ではなく該当DOMの幅に合わせて変化する点でしょう。複数行対応、区切った場合の最後の文字を変更したり、文字をアップデートしてもちゃんと表示が保てます。YouTube風にもっと読む(少なく

    テキストの末尾処理はお任せ·trunk8 MOONGIFT
  • 1