タグ

uiとsampleに関するkasihara1のブックマーク (3)

  • JavaScript なスライダーライブラリのまとめ

    自分用の備忘録としてですが JavaScript なスライダーライブラリのまとめです。 音量の設定とか RGB での色設定とか感覚的な数値を入力させるためのUIとしてぴったりなアレです。今流行のページスライダーではありません。一昔前は Flash で作られたライブラリが多かった記憶がありますが、最近では JavaScript でもできちゃいますって感じで様々なライブラリが公開されています。 Javascriptでできているスライダーありませんかね? の人力検索はてなの情報を大いに参考にさせて頂きました。 基的な考え方として、見た目は各種パーツの画像を作り込むことでどうにでも変更できます。機能的には有名どころの JavaScript ライブラリを用いていればそれほど不満が出ることも無いかと思うので、現状お使いのライブラリの系列のものを使うとムダにメモリ使用量とかライブラリ同士での汚染とか考

  • 第23回 JavaScriptによるUIの実装:スライダー | gihyo.jp

    こんにちは、前回、前々回に引き続き、JavaScriptUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基となるHTMLは次の通りです。 スライダーの基HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty

    第23回 JavaScriptによるUIの実装:スライダー | gihyo.jp
  • HTML5でローカルファイルのドラッグアンドドロップで画像ファイルを表示 - コンピュータクワガタ

    HTML5でローカルの画像ファイルをファイルのアップロードなしでプレビューするというのをやってみたかったのでやってみました。 意外にというか、つまらないところで引っかかったのでメモしておきます。 まず、参考したサイトは以下の2つです。 html5の File API を使って、アップロード無しで画像プレビュー http://d.hatena.ne.jp/favril/20100506/1273143063 Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた http://d.hatena.ne.jp/scalar/20101026/1288068169 作ったのが以下のソースとなります。上記のサイトのコピペを駆使しております。 <!DOCTYPE html> <html> <head> <meta charset=

    HTML5でローカルファイルのドラッグアンドドロップで画像ファイルを表示 - コンピュータクワガタ
  • 1