Site edit. File upload input button UI change. .overlap button style added.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11760 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
ChanMyeong 2012-10-17 07:37:37 +00:00
parent ab79cc4552
commit 1443edc1eb
5 changed files with 15 additions and 17 deletions

View file

@ -110,7 +110,8 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
.x a.active{color:#000;font-weight:bold;text-decoration:none}
.x .module_search+[readonly]{border-top-right-radius:0;border-bottom-right-radius:0}
.x .module_search+[readonly]+a.x_btn{border-top-left-radius:0;border-bottom-left-radius:0;vertical-align:top;margin-left:-5px}
.x input[type="file"].overlap{position:absolute;overflow:hidden;opacity:0;border:0;filter:alpha(opacity=0);padding:3px 9px;cursor:pointer}
.x .fileBtn{position:relative;display:inline-block}
.x .fileBtn>input[type="file"]{position:absolute;overflow:hidden;opacity:0;border:0;filter:alpha(opacity=0);padding:3px 9px;cursor:pointer}
/* Image Sprite */
.x a[target="_blank"]:after,
.x>.body>.gnb>ul>li>a>i,

View file

@ -110,7 +110,8 @@ body>.x,.x label,.x table,.x input,.x textarea,.x select,.x button{font-size:13p
.x a.active{color:#000;font-weight:bold;text-decoration:none}
.x .module_search+[readonly]{border-top-right-radius:0;border-bottom-right-radius:0}
.x .module_search+[readonly]+a.x_btn{border-top-left-radius:0;border-bottom-left-radius:0;vertical-align:top;margin-left:-5px}
.x input[type="file"].overlap{position:absolute;overflow:hidden;opacity:0;border:0;filter:alpha(opacity=0);padding:3px 9px;cursor:pointer}
.x .fileBtn{position:relative;display:inline-block}
.x .fileBtn>input[type="file"]{position:absolute;overflow:hidden;opacity:0;border:0;filter:alpha(opacity=0);padding:3px 9px;cursor:pointer}
/* Image Sprite */
.x a[target="_blank"]:after,
.x>.body>.gnb>ul>li>a>i,

View file

@ -190,9 +190,10 @@ jQuery(function($){
// File input .overlap style
$('input[type="file"].overlap').each(function(){
var $this = $(this);
var $btn = $this.prev('button');
$this.parent().css('position','relative');
$this.width($btn.width()).height($btn.height()).offset($btn.offset());
$this.wrap('<span class="fileBtn" />').before('<button type="button">');
var $button = $this.prev('button');
$button.text($this.attr('title')).addClass($this.attr('class')).removeClass('overlap');
$this.attr('class','overlap').width($button.width()).height($button.height()).offset($button.offset());
});
// Email Masking
$.fn.xeMask = function(){

View file

@ -190,9 +190,10 @@ jQuery(function($){
// File input .overlap style
$('input[type="file"].overlap').each(function(){
var $this = $(this);
var $btn = $this.prev('button');
$this.parent().css('position','relative');
$this.width($btn.width()).height($btn.height()).offset($btn.offset());
$this.wrap('<span class="fileBtn" />').before('<button type="button">');
var $button = $this.prev('button');
$button.text($this.attr('title')).addClass($this.attr('class')).removeClass('overlap');
$this.attr('class','overlap').width($button.width()).height($button.height()).offset($button.offset());
});
// Email Masking
$.fn.xeMask = function(){

View file

@ -242,8 +242,7 @@
</figure>
<div class="btnBoth">
<button type="button" class="fileRemover x_btn x_pull-left">삭제</button>
<button type="button" class="fileTrigger x_btn x_btn-primary x_pull-right">변경</button>
<input type="file">
<input type="file" class="overlap x_btn x_btn-primary x_pull-right" title="변경">
</div>
</form>
<form action="">
@ -254,8 +253,7 @@
</figure>
<div class="btnBoth">
<button type="button" class="fileRemover x_btn x_pull-left">삭제</button>
<button type="button" class="fileTrigger x_btn x_btn-primary x_pull-right">이미지 올리기</button>
<input type="file">
<input type="file" class="overlap x_btn x_btn-primary x_pull-right" title="이미지 올리기">
</div>
</form>
<form action="">
@ -266,8 +264,7 @@
</figure>
<div class="btnBoth">
<button type="button" class="fileRemover x_btn x_pull-left">삭제</button>
<button type="button" class="fileTrigger x_btn x_btn-primary x_pull-right">이미지 올리기</button>
<input type="file">
<input type="file" class="overlap x_btn x_btn-primary x_pull-right" title="이미지 올리기">
</div>
</form>
</fieldset>
@ -2698,9 +2695,6 @@ setTimeout(function(){
});
*/
// File upload
$('.fileTrigger').click(function(){
$(this).next('input[type="file"]').click();
});
$('input[type="file"]').change(function(){
$(this).closest('form').submit();
});