如何创建一个拥有自己的 css 和 javascript 的用户控件

Question

我正在实现类似建议的东西 on this question，在另一个控件中嵌套一个动态生成的用户控件。

我面临的问题是一些控件有一些 javascript 函数或 css 类没有被加载。

例如，我有一个恢复到这个 ListBox:

的控件

<div class="form-group listbox-align" style="width:100%;">
    <asp:ListBox ID="ListBox_Options" runat="server" CssClass="multiselect-group listbox-element" AutoPostBack="false"></asp:ListBox>
</div>

而此控件独有的 css 类（listbox-align 和 listbox-element）如下所示：

.listBox-align {
    text-align: left;
}

.listBox-align .input-group-btn {
    display: none;
}

加载页面时，我有此组件的 javascript 代码：

$(document).ready(function () {
    var listBox = '#<%=ListBox_Options.ClientID %>';

    Sys.Application.add_load(function () {
        aplicarComponenteOctopusSearchable(listBox, '100%');
    });
});

function aplicarComponenteOctopusSearchable(seletor, btnWidth) {
    try {
        $(seletor).multiselect({
            includeSelectAllOption: false,
            allSelectedText: 'All',
            selectAllText: 'All',
            nSelectedText: 'Selected',
            nonSelectedText: 'Select...',
            buttonWidth: btnWidth,
            maxHeight: 400,
            enableFiltering: true,
            filterPlaceholder: 'Filter...',
            enableCaseInsensitiveFiltering: true
        });
    } catch (e) {
        alert(e.message);
    }
}

现在我无法正确使用这个组件，因为我不知道如何加载这个 css 和 javascript 一次并且只在使用这个用户控件的页面上（它会在一些事件后添加）。

谁能帮我解决这个问题？

Answer 1

我在 Javascript 中编写了这个函数，您可以这样调用：

loadjscssfile(RelativeFilePathToFile, "css")

我用它在按键事件的复活节彩蛋中添加或更新现有的 CSS classes，但你不需要所有这些。但它可以添加新的 CSS 或添加一个新的 CSS class 来覆盖现有的全局

已经有一段时间了，但它应该也适用于 Javascript 文件，只需查看有关添加它们的传递内容的函数。

// this function is to add an additional javascript or CSS file on demand to a page
function loadjscssfile(filename, filetype) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)

    this.IsSwap = true;

} // end function to load js/css files

// 已更新以添加此文件，我已使用此文件在文件加载后将其删除。它适用于 CSS 文件（我有 add/remove .css 文件的快捷键作为更改布局的复活节彩蛋），不确定这是否适用于 javascript：

function removejscssfile(filename, filetype) {
    var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none" //determine element type to create nodelist from
    var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none" //determine corresponding attribute to test for
    var allsuspects = document.getElementsByTagName(targetelement)
    for (var i = allsuspects.length; i >= 0; i--) { //search backwards within nodelist for matching elements to remove
        if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1)
            allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
    }

    this.IsSwap = false;

}

这样称呼它：

 removejscssfile(RelativePathYouPassedToDynmaicallyAddtheFileHere, "css")

如何创建一个拥有自己的 css 和 javascript 的用户控件

How can I create a user control having it's own css and javascript

javascript

css

asp.net

webforms

aspx-user-control