似是而非

导航

[转]轻松掌握Ajax.net系列教程七:使用ModalPopupExtender

上一章我们介绍了怎样使用PopupControlExtender,本章我们介绍ModalPopupExtender的使用方法。大家从名字就能看出这两个组件很相似,因此它们的使用方法也是大同小异的。上一章有关PopupControlExtender的介绍有很大部分也适用于ModalPopupExtender,只是它们所产生的效果不同而已,但机制是类似的,因此在本章不再重复介绍一些关键名词,我们只简单介绍ModalPopupExtender的使用方法。如有疑问请查看:轻松掌握Ajax.net系列教程六:使用PopupControlExtender

第一步:建立AJAX Control Toolkit Web Site

要使用ModalPopupExtender我们要使用AJAX Control Toolkit Web Site模板。本例子是演示怎样使用ModalPopup来修改我们的页面风格。建立好网站后我们需要以下控件:N个Panel控件作为Popup载体、一个LinkButton控件用于激活ModalPopup窗口、一个RadioButtonList控件用于选择样式、一段文本、两个Button控件用于确定或取消和一个ModalPopupExtender组件,如下图所示:

其中Panel部分的代码如下:

<asp:Panel ID="Panel1" runat="server" Style="display: none">
            <asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" Width="309px">
                <div>
                    <p>
                        请选择页面风格:</p>
                    <p>
                        <input type="radio" name="Radio" id="RadioA" checked="checked"
                            onclick="styleToSelect = 'sampleStyleA';" />
                        <label for="RadioA" class="sampleStyleA" style="padding: 3px;">风格样式一</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioB"
                            onclick="styleToSelect = 'sampleStyleB';" />
                        <label for="RadioB" class="sampleStyleB"
                            style="padding: 3px;">风格样式二</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioC"
                            onclick="styleToSelect = 'sampleStyleC';" />
                   
                        <label for="RadioC" class="sampleStyleC"
                            style="padding: 3px;">风格样式三</label>
                      
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioD"
                            onclick="styleToSelect = 'sampleStyleD';" />
                        <label for="RadioD" class="sampleStyleD"
                            style="padding: 3px;">
                            风格样式四
                        </label>
                    </p>
                    <p>
                        <label class="sampleStyleD" for="RadioD" style="padding-right: 3px; padding-left: 3px;
                            padding-bottom: 3px; padding-top: 3px">
                            <span style="font-size: 12pt"><span style=""><span style="color: #000000">
                            </span></span></span>
                        </label>
                        <asp:Button ID="OkButton" runat="server" Text="确定" />
                        <asp:Button ID="CancelButton" runat="server" Text="取消" />
                    </p>
                </div>
            </asp:Panel>
        </asp:Panel>

注意:Panel1要加Style="display: none",这样它才能正常隐藏和显示,而Panel2的作用是支持拖拽。大家要细细品味一下这两个Panel所扮演的角色。

控件准备好后我们要准备样式表,由于例子的需要,这次的样式比较多,大家可以直接复制以下代码。其中modalBackground是ModalPopup的背景样式,modalPopup是ModalPopup的样式。

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}
 
.modalPopup {
    background-color:#ffffdd;
    border-width:3px;
    border-style:solid;
    border-color:Gray;
    padding:3px;
    width:250px;
}
 
.sampleStyleA {
    background-color:#FFF;
}
 
.sampleStyleB {
    background-color:#FFF;
    font-family:monospace;
    font-size:10pt;
    font-weight:bold;
}
 
.sampleStyleC {
    background-color:#ddffdd;
    font-family:sans-serif;
    font-size:10pt;
    font-style:italic;
}
 
.sampleStyleD {
    background-color:Blue;
    color:White;
    font-family:Arial;
    font-size:10pt;
}

配置完样式后我们还需要定义一个简单的JS函数,用以替换文本的样式,代码如下:

<script type="text/javascript">
var styleToSelect;
function onOk() {
    $get('Paragraph1').className = styleToSelect;
}
</script>

注意:这里的Paragraph1是指文本的载体ID,大家可以用<p>、<span><div>等作为文本的载体。例如:

<p id="Paragraph1">
        今天天气不错挺风和日丽的<br />
我们下午没有课这天气挺爽的 <br />
我一大中午早早的跑去上自习心里啄么着大学生活是多么美好啊 ……
</p>

第二步:配置ModalPopupExtender

我们切换到源代码模式配置ModalPopupExtender,具体代码如下:

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
            TargetControlID="LinkButton1"
            PopupControlID="Panel1"
            BackgroundCssClass="modalBackground"
            OkControlID="OkButton"
            OnOkScript="onOk()"
            CancelControlID="CancelButton"
            DropShadow="true"
            Drag="true"
            PopupDragHandleControlID="Panel2"/>

TargetControlID是指ModalPopupExtender的目标控件ID,即激活ModalPopup的控件ID,这里应该是LinkButton1PopupControlID是指Popup载体控件的ID,这里应该是Panel1,关于Popup载体的解析请参照“轻松掌握Ajax.net系列教程六:使用PopupControlExtender”。BackGroundCssClass是指ModalPopup的背景样式,前面已经提过,应该是modalBackgroundOkControlID是指确定控件的ID,这里是OkButtonOnOkScript是指当用户确定后所执行的JS脚本,在前面我们已经定义了onOK函数,用于改变文本的样式。注意:这里的语法一定要严格遵守Js的书写格式。CancelControlID是指取消控件的ID,这里应该是CancelButtonDropShadow是指是否留下阴影。Drag是指是否支持拖拽。PopupDragHandleControlID是指可拖拽的控件ID,前面已经提过了,应该是Panel2

到了这里一切已经设置完毕了,运行!效果如下图:

选择好样式后确定,ModalPopup消失,文本的样式发生改变。

结束:

本章主要介绍了ModalPopupExtender的使用方法,它的用法和PopupControlExtender类似,但也有不同。PopupControlExtender可以使用UpdatePanel调用服务器组件返回所需要的值,而ModalPopupExtender只能调用客户端JS脚本。大家要理解两个组件的相同之处和关键的区别,以免互相混淆。

 

引用地址:http://www.falaosao.net/article.asp?id=118

posted on 2009-11-25 15:10  似是而非  阅读(313)  评论(0编辑  收藏  举报