はてなブックマーク

モバイルサイトなどのファイルアップロード機能で、通常のファイルセレクタのフォームではなく、ファイルアップロード用のボタンを設置してファイル選んだ瞬時にアップロードを開始したい場合がある。 こんなイメージ。(DevHubというチャットツールのモバイルサイト実装したアップロードボタン。右端の黒いボタン) メリットとしては、ファイル選択直後にアップロードが開始するのでアップロードまでの手順を削減できる。 html html は input の type="file" タグを非表示で設置し、その代わりボタンを表示する。(以下の例は TwitterBootstrap を使っている前提) <input type="file" id="upload_chat" name="file" style="display:none"></input> <button id="upload_chat_button

やりたいこと 自分の作るWebアプリでもGithubのように絵文字を入力できるようにしたい さらにコロン( : )スタートで快適にサジェストしたい 完成イメージ ※このテキストはWebチャットアプリ「DevHub」に絵文字対応を行った手順を元になるべく最短ルートで実現できる方法を記述しています。不明点や詳細については各プラグインのドキュメントを参照ください。 使うもの emojify.js http://hassankhan.github.io/emojify.js/ チートシート(入力時の参考に) http://www.emoji-cheat-sheet.com/ jquery-textcomplete http://yuku-t.com/jquery-textcomplete/ 絵文字を表示できるようにする emojify.js を html ヘッダで読み込んでおく。 emoji 用の

heatmap の初期化、適用の javascript を書く html.erb または js ファイルに CalHeatMap の生成と初期化を記述。 各オプションの詳細は公式ドキュメント参照する。 以下はポイント itemSelector は div の id と合わせる data に Rails で定義する API を記述する rails から json で返したデータをパースするメソッドを定義して afterLoadData に設定する(eval しないと json として読み込めなかったので) var startDate = new Date(); startDate.setMonth(startDate.getMonth() - 5); var parser = function(data) { return eval("(" + data + ")"); }; var cal