13.02.2019, 17:15
|
|
Аспирант
|
|
Регистрация: 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'},
.....
ну и добавлять новые стили в этот массив ....
Но так не работает.
А как можно сделать, чтобы заработало ?
|
|
13.02.2019, 17:29
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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);
|
|
15.02.2019, 18:16
|
|
Аспирант
|
|
Регистрация: 02.02.2019
Сообщений: 67
|
|
а как передается параметр при вызове.
Поясните пожалуйста
prop.styleForTh = $.extend({}, styleAttributesForTh, prop.styleForTh);
$(document).ready(function () {
var selector = '.tableEmployees';
$(selector).createTablePlugin({
...
|
|
15.02.2019, 19:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
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>
|
|
15.02.2019, 23:36
|
|
Аспирант
|
|
Регистрация: 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'
},
...
|
|
|
|
