Как я могу создать пользовательский элемент управления, имеющий свой собственный CSS и JavaScript - PullRequest
Новая
       18

Как я могу создать пользовательский элемент управления, имеющий свой собственный CSS и JavaScript

0 голосов
/ 07 июня 2018

Я реализую что-то вроде предложенного по этому вопросу , имея динамически сгенерированный пользовательский элемент управления, вложенный в другой.

Проблема, с которой я сталкиваюсь, заключается в том, что некоторые элементы управления имеют некоторые 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 только один раз и только на страницах, которые используют этот пользовательский элемент управления (он будет добавлен после некоторого события).

Кто-нибудь может мне помочь с этим?

1 Ответ

0 голосов
/ 07 июня 2018

У меня есть эта функция, которую я написал в Javascript, которую вы называете так: 

loadjscssfile(RelativeFilePathToFile, "css")

Я использовал ее, чтобы добавить или обновить существующие классы CSS в пасхальном яйце при событиях нажатия клавиш, но вам не нужновсе это.Но он работает, чтобы добавить новый CSS или добавить новый класс CSS, который будет переопределять существующий в глобальном.

Это было давно, но он должен работать и с файлами 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 (у меня были сочетания клавиш для добавления / удаления файла .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")
...