将CSS设置添加到新的JQuery插件中

Adding CSS settings to a new JQuery Plugin

本文关键字：JQuery 插件 CSS 设置 添加      更新时间：2023-09-26

我是这类事情的新手，但我已经创建了一个简单的插件，我希望它最终成为一个简单WSIWYG编辑器。

这是我的插件的简单设置部分

$.fn.ap_wysiwyg = function(options){
        // extend the option with the default ones
        var settings = $.extend({
            width : "800px",
            height : "600px",
        },options);

以下是HTML中的内联脚本，用于调用插件

$(document).ready(function(){
  $("#ap-wysiwyg").ap_wysiwyg({
    width : "600px",
    height : "400px",
    css : {
      'background-color' : '#000'
    }
  });
});

很简单，内联html的宽度和高度覆盖了我的主脚本中的默认设置，这太棒了，但我试图添加CSS，如背景色和边距，但它们似乎不适用于我的html。就目前情况来看，html内部的div的样式为宽度：600px；高度：400px，这很完美，但它跳过了我想要手动应用的CSS样式。

var containerDiv = $("<div/>",{
           css : {
               width : settings.width ,
               height : settings.height,
               border : "1px solid #ccc"
           }
       });

在这里，我在旅途中创建了一个div，它应用了我的宽度和高度，但我的想法是，插件中解析的设置可以是任何东西，我需要它来获取解析的CSS并应用它。

例如，它看到有一个边距或背景，所以它添加了边距：设置。边距和背景色：设置。背景色

我该怎么做？因为我的方法显然不起作用。

相反，您可以尝试以下效果：

var containerDiv = $("<div/>").width(settings.width).height(settings.height).css(settings.css);

这应该将您的设置正确地应用于任何元素。如果这对你有用，请告诉我。希望它能有所帮助！

相关文章：