2

私が取り組んでいるプロジェクトは現在、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

アップロードが完了すると、最初のスクリーンショットに示すように、UI は正しいレイアウトに戻ります。

ボタンの 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;
}

何がこれを引き起こしているのか、私は迷っています。ご意見、ご感想、ご提案はありますか？何でも役に立ちます。ありがとう

4

0 に答える 0