Uploadify按钮：是否使用CSS样式？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

  • 禁用Uploadify按钮图像 buttonImg: " "

  • 使Flash对象透明 wmode:"transparent"

  • 使用CSS将伪造的样式button或a标签放置在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");
});

以上是 Uploadify按钮：是否使用CSS样式？ 的全部内容， 来源链接： utcz.com/qa/404262.html

回到顶部