JavaScript Telerik, если замена

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>