Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2019, 17:15
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

как добавить одно из свойств стиля, которое содержиться в массиве
В плагине создана переменная, которая содержит ассоциативный массив данных в виде объекта и затем устанавливается
в параметрах по умолчаниию.
/*атибуты стиля тега 'th'*/
        var styleAttributesForTh = {
            'border': 'solid 1px green',
            'padding': '5px',
            'width': 'auto',
            'font-size': '20px',
            'font-style': 'italic'
 
        };
 
        * arrTh - массив заголовков*/
        var options = $.extend({
 
            selectorForCreateElemInto: 'body',
            classTableName: nameTable,
            classTableHeadName: nameTableHead,
            classTableBodyName: nameTableBody,
 
            arrTh: [],/*['id', 'имя', 'возраст', 'login']*/
            arrDataAttrName: [], /*[ {'data-dataType': 'dateType'}, {data-dataType': 'nameType','data-maxLength': '7',}]*/
            styleForTable: styleAttributesForTable,
            styleForTh: styleAttributesForTh,
            styleForTd: styleAttributesForTd
 
        }, prop);



Но при вызове плагина, хотелось бы менять лишь некоторые параметры из этого массива, например вот так
$(document).ready(function () {
 
    var selector = '.tableEmployees';
    $(selector).createTablePlugin({
 
 
        styleForTh: {'font-size': '15px'},
 
.....



ну и добавлять новые стили в этот массив ....
Но так не работает.
А как можно сделать, чтобы заработало ?
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2019, 17:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

alex-romanov,
/*атибуты стиля тега 'th'*/
        var styleAttributesForTh = {
            'border': 'solid 1px green',
            'padding': '5px',
            'width': 'auto',
            'font-size': '20px',
            'font-style': 'italic'

        };
        prop.styleForTh = $.extend({}, styleAttributesForTh, prop.styleForTh);
        /* arrTh - массив заголовков*/
        var options = $.extend({

            selectorForCreateElemInto: 'body',
            classTableName: nameTable,
            classTableHeadName: nameTableHead,
            classTableBodyName: nameTableBody,

            arrTh: [],/*['id', 'имя', 'возраст', 'login']*/
            arrDataAttrName: [], /*[ {'data-dataType': 'dateType'}, {data-dataType': 'nameType','data-maxLength': '7',}]*/
            styleForTable: styleAttributesForTable,
           //styleForTh: styleAttributesForTh,
            styleForTd: styleAttributesForTd

        }, prop);
Ответить с цитированием
  #3 (permalink)  
Старый 15.02.2019, 18:16
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

а как передается параметр при вызове.

Поясните пожалуйста

prop.styleForTh = $.extend({}, styleAttributesForTh, prop.styleForTh);


$(document).ready(function () {

	    var selector = '.tableEmployees';

	    $(selector).createTablePlugin({

...
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2019, 19:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

alex-romanov,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">

</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.fn.plugin = function (prop) {
        /*атибуты стиля тега 'th'*/
        var styleAttributesForTh = {
            'border': 'solid 1px green',
            'padding': '5px',
            'width': 'auto',
            'font-size': '20px',
            'font-style': 'italic'

        };


        /* arrTh - массив заголовков*/
        var options = $.extend({
             selectorForCreateElemInto: 'body'
        }, prop);

        options.styleForTh = $.extend({}, styleAttributesForTh, options.styleForTh);

        return this.each(function (index, self) {
        $(self).css(options.styleForTh)
    })
}
</script>
<script type="text/javascript">
$(window).load(function(){
$(".box").plugin({
     styleForTh : {
         border : 'solid 5px red'
     }
});
$(".too").plugin();

});
</script>
  <title></title>
</head>
<body>
<button class="box">is box</button>
<div class="too">is too</div>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 15.02.2019, 23:36
Аспирант
Отправить личное сообщение для alex-romanov Посмотреть профиль Найти все сообщения от alex-romanov
 
Регистрация: 02.02.2019
Сообщений: 67

я сделал так, как вы показали в примере

$(selector).createTablePlugin({

       
 styleForTh: {
            border: 'solid 5px red'
        },
.....




В плагине у меня для таблицы несколько стилей

/*атибуты стиля тега 'table'*/
        var styleAttributesForTable = {};

        /*атибуты стиля тега 'th'*/
        var styleAttributesForTh = { };

        /*атибуты стиля тега 'td'*/
        var styleAttributesForTd = { };

        /*Параметры по умолчанию:
        * selectorForCreateElemInto - указываем селектор контейнера, внутри которого создается
        * элемент;
        * arrTh - массив заголовков*/

        var options = $.extend({

 
            styleForTable: styleAttributesForTable,
            styleForTh: styleAttributesForTh,
            styleForTd: styleAttributesForTd,

        }, prop);


        options.styleForTh = $.extend({}, styleAttributesForTh, options.styleForTh);

/*применить настройки по умолчанию*/
        function applySettingsDefault() {

            /*Стили для таблицы*/
            styleAttributesForTable = {
                'border': "solid 2px blue",
                'border-collapse': 'collapse', /*убираем расстояние между ячейками*/
                'margin-top': '2%',
                'padding-top': '2%',
                'margin-left': '2%',
                'margin-bottom': '2%',
                'margin-right': '10%',
                'height': '40%',
                'width': '100%',
                'background-color': '#FFFFE0',
                'cellspacing': '0'
            };

            /*атибуты стиля тега 'th'*/
              styleAttributesForTh = {
                 'border': 'solid 1px green',
                  'padding': '5px',
                  'width': 'auto',
                  'font-size': '18px',
                  'font-style': 'italic'
            };

            /*атибуты стиля тега 'td'*/
             styleAttributesForTd = {
                 'border': 'solid 1px purple',
                  'width': 'auto',
                  'font-size': '15px'
            };

        }


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

$(selector).createTablePlugin({

        styleForTh: {
            border: 'solid 5px red'
        },
...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить методы объекту после конструирования. DragorWW Общие вопросы Javascript 23 21.01.2013 20:39
Как обрезать строку и добавить символы в середине, в зависимости от длинны строки andreyua Firefox/Mozilla 12 10.12.2010 15:44
Как добавить элемент в XML через DOM используя PHP? bayah Серверные языки и технологии 6 11.08.2010 13:33
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Скрипт калькулятора (не могу добавить еще одно значение) Jee_Day Я не знаю javascript 2 22.05.2009 13:19