0

私はjqueryダイアログボックスで作業しています...背景色のテーマにGoogle APIを使用する方法を使用したくありません。例として独自のものを使用したい：閉じるボタンはXの円の中にある必要があり、タイトルバーの背景は#FFFFFF に設定し、ダイアログ ボックスの高さと幅を自分のデータに合わせて調整する必要があります (動的ではありません)。これまでのところ、ダイアログ ボックスで div をポップアップすることはできますが、高さと幅を変更することはできません。調整しました。誰かが私にチュートリアルや微調整を案内してくれませんか...どうもありがとう

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="JqueryLib/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<h:outputStylesheet library="css" name="application_1.css"></h:outputStylesheet>
<style type="text/css">


</style>
<script>
$(document).ready(function(){
$("#viewDetails").click(function(){

$("#popup").dialog();



})    
});
</script>
</h:head>
<body>
<form id="Form1">
<h:outputText id= "viewDetails" value="View Details" outcome="#"/>
<div id="popup" class="popup" title="MyTitle" style="display: none">
This is my data table....where I can not adjust the data inside the dialog box...
</div>

</form>
</body>
</ui:composition>

タイトルバーのテーマを持つGoogle APIを使用したくありません。CSSをカスタマイズしたい

4

1 に答える 1

0

jQuery ダイアログ ボックスをカスタマイズする方法の例を次に示します。

$(function() {
    $( "#dialog" ).dialog({position:['middle',60],  // set the position on the page to the middle and 60px down from the top margin
        open: function(event, ui) {  
        jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span style="float:right;"><img src="/EIWeb/images/Icons/x.png" /></span>');  // remove the titlebar background, remove the default button and replace with my own
    },  
        dialogClass: 'ui-widget-shadow',  // display a widget shadow
        modal: true,    // display the modal overlay
        autoOpen: false, // do not auto open
        width: '650px', // force set the width

        close: function(ev, ui) {$(this).close();}  // Set the dialog to close and remove upon clicking the "x" 
    });

    $( ".dialogOpener" ).click(function() { // Set a class to open the dialog
        $( "#dialog" ).dialog( "open" );
        return false;
    });
    $( ".btnDone" ).click(function(){ // Set a class to close the dialog
        $('.ui-dialog-content').dialog( "close" );
    });
});

これが言っているのは、背景のタイトルバーのシェーディングを削除したいということです (タイトルだけで何もありません)。デフォルトの閉じるボタンを削除し、それを自分の "x" 画像に置き換えて、ui-widget-shadowクラスを作成し、幅を 650px に設定します。

また、これは、閉じる「x」をクリックすると、ダイアログが閉じて削除されることを示しています。また、ダイアログ内でクローザーとして使用するボタン「btnDone」を分類しました (「キャンセル」ボタンなど)。

これが役立つ場合は、私をあきらめてください。

于 2013-02-26T18:26:11.893 に答える