JavaScript Telerik if更换

Question

使用teleriks拖放演示，我能够重现功能，但是，我想做的是，如果浏览器不符合HTML5，我想加载一个不同的功能。下面是我使用的代码。

<script type="text/javascript">
    var $ = $telerik.$;
    function pageLoad() {
        if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
            $(".wrapper").replaceWith(
                $("<span><strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong></span>"));
        }
    }

    function added(sender, args) {
        if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {

            $(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
        }
    }

</script>

我知道你想用你想要的代码替换这一部分：

if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
            $(".wrapper").replaceWith(

如何在.replaceWith中包含以下内容(

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
    </telerik:RadAsyncUpload>
    <br />
    <telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />

    <div style="position:relative;">
        <table>
            <tr>
                <td id="controlContainer">
                    <telerik:RadUpload
                        ID="RadUpload1" runat="server"
                        MaxFileInputsCount="5"
                        OverwriteExistingFiles="false" />

                    <telerik:RadProgressArea id="progressArea1" runat="server"/>

                    <asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
                </td>
                <td>
                    <div class="smallModule">
                        <div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">

                            <asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>

                            <asp:Repeater ID="repeaterResults" runat="server" Visible="False">
                                <HeaderTemplate>
                                    <div class="title">Uploaded files in the target folder:</div>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <%#DataBinder.Eval(Container.DataItem, "FileName")%>
                                    <%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
                                    <br />
                                </ItemTemplate>
                            </asp:Repeater>
                        </div></div></div></div>
                            </td>
                            </tr>                              
                            </table>
                            </div>
                            </div>

Answer 1

这就是我如何做到的，通过创建额外的div并隐藏基于div的元素

<script type="text/javascript">
    var $ = $telerik.$;
    function pageLoad() {
        if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
            $(".wrapper").replaceWith(
            $("")); 
        }
    }

    function added(sender, args) {
        if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {

            $(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
            $(".nonHTML5").replaceWith(
            $(""));
        }
    }

</script>

<div class="wrapper">

    <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
    </telerik:RadAsyncUpload>
    <br />
    <telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
    </div>
    <div class ="nonHTML5" style="position:relative;">
        <table>
            <tr>
                <td id="controlContainer">
                    <telerik:RadUpload
                        ID="RadUpload1" runat="server"
                        MaxFileInputsCount="5"
                        OverwriteExistingFiles="false" />

                    <telerik:RadProgressArea id="progressArea1" runat="server"/>

                </td>
                <td>
                    <div class="smallModule">
                        <div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">

                            <asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>

                            <asp:Repeater ID="repeaterResults" runat="server" Visible="False">
                                <HeaderTemplate>
                                    <div class="title">Uploaded files in the target folder:</div>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <%#DataBinder.Eval(Container.DataItem, "FileName")%>
                                    <%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
                                    <br />
                                </ItemTemplate>
                            </asp:Repeater>
                        </div></div></div></div>
                            </td>
                            </tr>                              
                            </table>
                            </div>
                            <asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
                            </td>
                            </tr>