<rich:fileupload>组件</rich:fileupload>的自定义按钮问题

时间:2012-05-01 22:52:30

标签: file-upload richfaces

我正在研究的项目目前正在使用richfaces 3.3.3。我已禁用除“添加”按钮以外的所有按钮,或者在我们的示例中,我们将其称为“浏览”并使用addControlLabel。

<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" maxFilesQuantity="#{fileUploadBean.uploadsAvailable}"
    addControlLabel="Browse" immediateUpload="#{fileUploadBean.autoUpload}" listHeight="0" listWidth="auto"
    allowFlash="#{fileUploadBean.useFlash}" styleClass="float-left">
    <a4j:support event="onuploadcomplete" reRender="mainMsgPanel,upload,homeTable,errorPanelImage,panelErrorMessage,imageSuccessMessage"  />
    <a4j:support event="onsizerejected" reRender="mainMsgPanel,upload,homeTable,uploadMessage,panelErrorMessage,imageSuccessMessage,errorPanelImage"
        action="#{fileUploadBean.uploadRejected}" />
</rich:fileUpload>

选择文件并从“文件上传”对话框窗口按下“打开”按钮后,文件将自动上传所选文件。问题是,一旦按下“打开”按钮,按钮的图像就会被按下,几乎就是按钮本身的整个高度,但是“浏览”文本被推到右边,文本的颜色发生变化从白色到黑色。

我有截图,但我还不能在这里发布,所以,这里是指向包含每张图片的公共Dropbox的链接。

此屏幕截图是在上传任何文件之前的样子: http://dl.dropbox.com/u/74251265/fileupload-start.jpg

此屏幕截图就是在选择文件并按下“文件上传”对话框窗口中的“打开”按钮后的样子: http://dl.dropbox.com/u/74251265/fileupload-during.jpg

完成上传后,用户界面将返回正确的布局,如第一个屏幕截图所示。

这是我的按钮CSS和渲染组件时生成的大多数RichFaces类:

.rich-fileupload-toolbar-decor {
    border: none;
}

.rich-fileupload-list-decor {
    border: none;
}

.rich-fileupload-button-border {
    border: none;
    margin: 0;
    width: 100%;
}

.rich-fileupload-button-press,
.rich-fileupload-ico-add {
    background-image: none;
    padding: 2px 0 0 0;
}

.rich-fileupload-ico-start,
.rich-fileupload-ico-stop,
.rich-fileupload-ico-clear {
    display: none;
    background-image: none;
}

.rich-fileupload-ico {
    padding: 2px 0 0 0;
    background-image: none;
}

.rich-fileupload-button,
.rich-fileupload-button-light,
.rich-fileupload-button-press {
    border: none;
    position: relative;
    color: white;
    text-decoration: none;
    padding: 0;
    width: 93px;
    height: 24px;
    cursor: pointer;
    background-image: none;
    background: url("/img/layout/button_browe-blue-93x24.png") no-repeat;
}

.rich-fileupload-button-content {
    padding: 4px 0;
    text-align: center;
    text-shadow: 1px 1px #000;
}

我迷失了导致这种情况发生的原因。有没有人有任何想法,意见和建议?什么都有帮助。感谢

0 个答案:

没有答案