小编典典

Uploadify按钮:是否使用CSS样式?

css

是否可以用简单的CSS样式的按钮替换Uploadify按钮(包含向上/向上/向下状态的图形)?


阅读 417

收藏
2020-05-16

共1个答案

小编典典

我已经能够提出一个可行的解决方案。基本概要如下:

  • 禁用Uploadify按钮图像 buttonImg: " "
  • 使Flash对象透明 wmode:"transparent"
  • 使用CSS将伪造的样式buttona标签放置在Flash对象后面
  • 初始化Uploadify后,设置对象的宽度和高度以匹配其后面的按钮

Flash对象将屏蔽其下方的按钮,使其免受鼠标悬停等事件的影响;因此,要获得悬停效果,您需要采取一些其他步骤:

  • 将按钮和上载对象都包装在div中
  • 初始化Uploadify后,设置包装器div的宽度和高度以匹配按钮
  • 然后,您可以使用jQuery处理.hover()包装div上的事件,并将样式应用于按钮

放在一起:

HTML

<div class="UploadifyButtonWrapper">
    <a>Upload Files</a>
    <div class="UploadifyObjectWrapper">
       <input type="file" id="Uploadify" name="Uploadify" />
    </div>
</div>

CSS

div.UploadifyButtonWrapper{
    position:relative;
}

/* fake button */
div.UploadifyButtonWrapper a {
    position:absolute; /* relative to UploadifyButtonWrapper */
    top:0;
    left:0;
    z-index:0;
    display:block;
    float:left;
    border:1px solid gray;
    padding:10px;
    background:silver;
    color:black;
}

/* pass hover effects to button */
div.UploadifyButtonWrapper a.Hover {
    background:orange;
    color:white;
}

/* position flash button above css button */
div.UploadifyObjectWrapper {
    position:relative;
    z-index:10;
}

Javascript:

$("input.Uploadify", self).uploadify({
    ...
    buttonImg: " ",
    wmode: "transparent",
    ...
});
var $buttonWrapper = $(".UploadifyButtonWrapper", self);
var $objectWrapper = $(".UploadifyObjectWrapper", self);
var $object = $("object", self);
var $fakeButton = $("a", self);
var width = $fakeButton.outerWidth();
var height = $fakeButton.outerHeight();
$object.attr("width", width).attr("height", height);
$buttonWrapper.css("width", width + "px").css("height", height + "px")
$objectWrapper.hover(function() {
    $("a", this).addClass("Hover");
}, function() {
    $("a", this).removeClass("Hover");
});
2020-05-16