如何使用HTML和CSS编写小部件/插件？

问题描述

在我简单的微型测试小部件中，我有以下HTML：

<div class="widget-label">This works!</div>

这个CSS：

.widget-label { color: red; }

那么您将如何使用小部件（JS）分发HTML和CSS？

您是否让JS这样创建HTML / CSS ...

(function ($) {
    'use strict';

    $.myWidget = function (element,options) {

        var me = this;
        var $base = $(element);

        var defaultOptions = {
            id: null,};

        var opts = $.extend({},defaultOptions,options);
       
        $("<style type='text/css'> .widget-label { color: red; } </style>").appendTo(element);
        $("<div/>").addClass("widget-label").text("This works!").appendTo(element);

    };


    $.fn.myWidget = function (options) {

        if (options === "instance") {
            return $(this).data('myWidget');
        }

        return this.each(function () {
            if (undefined === $(this).data('myWidget')) {
                var widget = new $.myWidget(this,options);
                $(this).data('myWidget',widget);
            }
        });

    };

})(jQuery)

还是您使用往返于这样的服务器的方式...

(function ($) {
    'use strict';

    $.myWidget = function (element,options);

        $.get("widget.css",function (response) {
                $("head").append($("<style>").append(response));
            });

        $.get("widget.html",function (response) {
                $(element).html(response);
            });
    };


    $.fn.myWidget = function (options) {

        if (options === "instance") {
            return $(this).data('myWidget');
        }

        return this.each(function () {
            if (undefined === $(this).data('myWidget')) {
                var widget = new $.myWidget(this,widget);
            }
        });

    };

})(jQuery)

还是完全不同的方式？

我刚开始编写小部件，因此对您的帮助表示感谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript widget