Authentication




Cancel OK
B!コメントする  2013-01-17 19:46:00 by old

Bootstrapでのtype=file

bootstrapにはいろんな装飾がお手軽に出来るけどなぜか type=file だけない…。
なぜかは分からない。
これから実装されるのかもしれないけど。

でもファイルのアップロードだけ従来のものだとかなり浮く。
もう投げ出してしまいたいくらい。

そこでGoogle先生に聞いてアップロード部分を装飾してみた。

まずアップロード部分

<input type="file" id="file-input" name="upload" style="display: none;">
<div class="input-prepend">
<a class="btn" onclick="$('#file-input').click();"></a>
<input id="cover" class="input-xlarge" type="text" placeholder="select file" autocomplete="off" readonly>
<input type="button" value="アップロード" class="btn" />
</div>

イメージはこんな感じ



次にJQuery先生でちょいちょい記述

<script>$('#file-input').change(function() {
$('#cover').val($(this).val());
});</script>


これで完了。
テキストの部分は隠しておいて、ファイルあげたらそれを見えるように切り替えるという感じ。

けっこうかっこいい感じになった。
ついでにアップロードで画面が変わるのが嫌なのでJQueryのuploadを使ってボタンを押したら画面を遷移せずにアップロードするように追加。

$('input[type=button]').click(function() {

$('input[type=file]').upload('./indexsetting?restore=<? echo encode('restore'); ?>', function(res) {
jAlert(res.filename + ' をアップロードしました', 'アップロードテスト');
}, 'json');
});


事前に

<script src="js/jquery.upload-1.0.2.min.js"></script>
<script src="js/jquery.alerts.js"></script>

とCSSで以下を読み込んでおく必要があります。

#popupcontainer {
min-width:300px; /* Dialog will be no smaller than this /
max-width:600px; /
Dialog will wrap after this width /
border:solid 5px #999;
background:#fff;
color:#000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#popuptitle {
margin:0; padding:0;
border:solid 1px #fff;
border-bottom:solid 1px #999;
background:#ccc;
color:#666;
font-size:14px;
font-weight:bold;
text-align:center;
line-height:1.75em;
cursor:default;
}
#popup
content { margin:0; padding:1em 1.75em; background:transparent url("img/icon/color/information.png") no-repeat 16px 16px; }
#popupcontent.alert { background-image:url("img/icon/color/information.png"); }
#popup
content.confirm { background-image:url("img/icon/color/attention.gif"); }
#popupcontent.prompt { background-image:url("img/icon/color/help.png"); }
#popup
message { padding-left:20px; }
#popuppanel { text-align:center; margin:1em 0 0 1em; }
#popup
prompt { margin:.5em 0; }
/
custom dialog styles */
#popup_container.style_1 { color:#a4c6e2; background:#005294; border-color:#113f66; }
#popup_container.style_1 #popup_title { color:#fff; font-weight:normal; text-align:left; background:#76a5cc; border:solid 1px #005294; padding-left:1em; }
#popup_container.style_1 #popup_content { background:none; }
#popup_container.style_1 #popup_message { padding-left:0em; }
#popup_container.style_1 input[type='button'] { border:outset 2px #76a5cc; color:#a4c6e2; background:#3778ae; }


戻り値を受け取るalertの部分も装飾しているので全体的にきれいに統一感がだせています。
ちなみにalertはこんな感じ



iGoogleも細かい部分は実装したので現在ひとりでアルファテスト中。
これがおわればβ版として公開できると思います。



デザイン  

  • コメント
  • コメントはまだありません