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>
<script>$('#file-input').change(function() {
$('#cover').val($(this).val());
});</script>
$('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>
#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;
}
#popupcontent { 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"); }
#popupcontent.confirm { background-image:url("img/icon/color/attention.gif"); }
#popupcontent.prompt { background-image:url("img/icon/color/help.png"); }
#popupmessage { padding-left:20px; }
#popuppanel { text-align:center; margin:1em 0 0 1em; }
#popupprompt { 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; }
関連記事