Advance .Net

导航

 
YahooUI之Dialog的使用
YahooUI Library提供了丰富的交互性的组件，本篇但要介绍YahooUI中Dialog的使用：
1.首先要在head区域中加入如下语句：
<link href="build/fonts/fonts-min.css" rel="stylesheet" type="text/css" />
    <link href="build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
    <link href="build/container/assets/skins/sam/container.css" rel="stylesheet" type="text/css" />

    <script src="build/utilities/utilities.js" type="text/javascript"></script>

    <script src="build/button/button-min.js" type="text/javascript"></script>

    <script src="build/container/container-min.js" type="text/javascript"></script>

    <script src="build/yahoo/yahoo.js" type="text/javascript"></script>

    <script src="build/event/event.js" type="text/javascript"></script>

    <script src="build/dom/dom.js" type="text/javascript"></script>

    <script src="build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

    <script src="build/dragdrop/dragdrop-min.js" type="text/javascript"></script>

    <script src="build/connection/connection-min.js" type="text/javascript"></script>
2.给body加上样式属性class=" yui-skin-sam"
3.初始化设置Dialog,代码如下(在body区域中）：
<script>
YAHOO.namespace("example.container");

function init() {
    
    // Define various event handlers for Dialog
    var handleSubmit = function() {
        this.submit();
        
        
    };
    var handleCancel = function() {
        this.cancel();
    };
    var handleSuccess = function(o) {
        var response = o.responseText;
        response = response.split("<!")[0];
        var data=YAHOO.example.container.dialog1.getData();
        document.getElementById("resp").innerHTML = response;
    };
    var handleFailure = function(o) {
        var data=YAHOO.example.container.dialog1.getData();
        alert("Submission failed: " + o.status+o.message+o.description);
    };

    // Instantiate the Dialog
    YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
                            { width : "30em",
                              fixedcenter : true,
                              visible : false, 
                              constraintoviewport : true,
                              buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
                                      { text:"Cancel", handler:handleCancel } ]
                            });

    
    YAHOO.example.container.dialog1.validate = function() {
        var data = this.getData();
        
        if (data.firstname == "" || data.lastname == "") {
            alert("Please enter your first and last names.");
            return false;
        } else {
            return true;
        }
    };

    // Wire up the success and failure handlers
    YAHOO.example.container.dialog1.callback = { success: handleSuccess,
                             failure: handleFailure };
    
    // Render the Dialog
    YAHOO.example.container.dialog1.render();

    YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
    YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
}

YAHOO.util.Event.onDOMReady(init);
</script>
这样基本上就完成了，在些我贴出我的项目中的一个文件以供参考。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dialog Quickstart Example</title>

<style type="text/css">

body {
    margin:0;
    padding:0;
}
</style>


    <link href="build/fonts/fonts-min.css" rel="stylesheet" type="text/css" />
    <link href="build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
    <link href="build/container/assets/skins/sam/container.css" rel="stylesheet" type="text/css" />

    <script src="build/utilities/utilities.js" type="text/javascript"></script>

    <script src="build/button/button-min.js" type="text/javascript"></script>

    <script src="build/container/container-min.js" type="text/javascript"></script>

    <script src="build/yahoo/yahoo.js" type="text/javascript"></script>

    <script src="build/event/event.js" type="text/javascript"></script>

    <script src="build/dom/dom.js" type="text/javascript"></script>

    <script src="build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>

    <script src="build/dragdrop/dragdrop-min.js" type="text/javascript"></script>

    <script src="build/connection/connection-min.js" type="text/javascript"></script>

    <!--there is no custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Dialog Quickstart Example</h1>

<div class="exampleIntro">
    <p>The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page &mdash; whether interally to the page or by sending the information to the server via form post or XMLHttpRequest.  This example shows how to do the latter.  Click the button to show the Dialog instance and its form fields; fill out the form; submit the form.  Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.</p>            
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<style>
#example {height:30em;}
label { display:block;float:left;width:45%;clear:left; }
.clear { clear:both; }
#resp { margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
#resp li { font-family:monospace }
</style>

<script>
YAHOO.namespace("example.container");

function init() {
    
    // Define various event handlers for Dialog
    var handleSubmit = function() {
        this.submit();
        
        
    };
    var handleCancel = function() {
        this.cancel();
    };
    var handleSuccess = function(o) {
        var response = o.responseText;
        response = response.split("<!")[0];
        var data=YAHOO.example.container.dialog1.getData();
        document.getElementById("resp").innerHTML = response;
    };
    var handleFailure = function(o) {
        var data=YAHOO.example.container.dialog1.getData();
        alert("Submission failed: " + o.status+o.message+o.description);
    };

    // Instantiate the Dialog
    YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
                            { width : "30em",
                              fixedcenter : true,
                              visible : false, 
                              constraintoviewport : true,
                              buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
                                      { text:"Cancel", handler:handleCancel } ]
                            });

    
    YAHOO.example.container.dialog1.validate = function() {
        var data = this.getData();
        
        if (data.firstname == "" || data.lastname == "") {
            alert("Please enter your first and last names.");
            return false;
        } else {
            return true;
        }
    };

    // Wire up the success and failure handlers
    YAHOO.example.container.dialog1.callback = { success: handleSuccess,
                             failure: handleFailure };
    
    // Render the Dialog
    YAHOO.example.container.dialog1.render();

    YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
    YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
}

YAHOO.util.Event.onDOMReady(init);
</script>

<div>
<button id="show">Show dialog1</button> 
<button id="hide">Hide dialog1</button>
</div>

<div id="dialog1">
<div class="hd">Please enter your information</div>
<div class="bd">
<form method="POST" runat=server>
    <label for="firstname">First Name:</label><input type="textbox" name="firstname" />
    <label for="lastname">Last Name:</label><input type="textbox" name="lastname" />
    <label for="email">E-mail:</label><input type="textbox" name="email" /> 

    <label for="state[]">State:</label>
    <select multiple name="state[]">
        <option value="California">California</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New York">New York</option>
    </select> 

    <div class="clear"></div>

    <label for="radiobuttons">Radio buttons:</label>
    <input type="radio" name="radiobuttons[]" value="1" checked/> 1
    <input type="radio" name="radiobuttons[]" value="2" /> 2
    
    <div class="clear"></div>

    <label for="check">Single checkbox:</label><input type="checkbox" name="check" value="1" /> 1
    
    <div class="clear"></div>
        
    <label for="textarea">Text area:</label><textarea name="textarea"></textarea>

    <div class="clear"></div>

    <label for="cbarray">Multi checkbox:</label>
    <input type="checkbox" name="cbarray[]" value="1" /> 1
    <input type="checkbox" name="cbarray[]" value="2" /> 2
    
<asp:Button ID="Button1" runat="server" Text="Button"  />
</form>
</div>
</div>

<div id="resp">Server response will be displayed in this area</div>    

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

    </body>
</html>
posted on 2008-05-21 13:34  胡振  阅读(2322)  评论(2)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3