14
Я использую jquery-style-switcher.js для изменения стиля некоторых элементов. Когда я нажимаю на стиль цветов страницы, это не изменяется, и в источнике этой страницы добавлен этот класс jssError error level0 в ul тег, который содержит цвета. Эти коды работали на HTML-странице, но в CMS нет! Я отлаживаю этот js-файл хром и понимаю, что когда этот js-файл в общем html-файле запущен: событие вызывает его addClickEvents выполнено, но на моем веб-сайте, который использовал этот шаблон для скина сайта: addClickEvents function do not казнены. Функция, которая называет addClickEvents является инициализацией функцииОшибка при изменении стиля страницы с помощью jquery
init: function ($root, config) {
this.$root = $root;
this.config = config ? config : {};
this.setDefaultTheme();
if(this.defaultTheme) {
// try cookies
if (this.config.cookie) {
this.checkCookie();
}
// try hover
if (this.config.hasPreview) {
this.addHoverEvents();
}
// finally, add click events
this.addClickEvents();
} else {
this.$root.addClass('jssError error level0');
}
}
В этой функции (INIT): значения DefaultTheme не определенно !!!!
Почему defaultTheme не определен? если вы можете ответить на этот вопрос, проблема будет решена.
JQuery стиле-switcher.js:
(function ($) {
var jStyleSwitcher,
_defaultOptions = {
hasPreview: true,
defaultThemeId: 'jssDefault',
fullPath: 'css/',
cookie: {
expires: 30,
isManagingLoad: true
}
},
// private
_cookieKey = 'jss_selected',
_docCookies = {};
/*\
|*|
|*| :: cookies.js ::
|*|
|*| A complete cookies reader/writer framework with full unicode support.
|*|
|*| revision #1
|*|
|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*|
|*| This framework is released under the GNU Public License, version 3 or later.
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*| Syntaxes:
|*|
|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*| * docCookies.getItem(name)
|*| * docCookies.removeItem(name[, path[, domain]])
|*| * docCookies.hasItem(name)
|*| * docCookies.keys()
|*|
\*/
_docCookies = {
getItem: function (sKey) {
if (!sKey) {
return null;
}
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
return false;
}
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this.hasItem(sKey)) {
return false;
}
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) {
return false;
}
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: function() {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
}
return aKeys;
}
};
jStyleSwitcher = function ($root, config) {
return this.init($root, config);
};
jStyleSwitcher.prototype = {
/**
* {Object} DOM reference to style option list
*/
$root: null,
/**
* {Object} configs for the style switcher
*/
config: {},
/**
* {Object} jQuery reference to <link> tag for swapping CSS
*/
$themeCss: null,
/**
* {String} default theme page was loaded with
*/
defaultTheme: null,
init: function ($root, config) {
this.$root = $root;
this.config = config ? config : {};
this.setDefaultTheme();
if(this.defaultTheme) {
// try cookies
if (this.config.cookie) {
this.checkCookie();
}
// try hover
if (this.config.hasPreview) {
this.addHoverEvents();
}
// finally, add click events
this.addClickEvents();
} else {
this.$root.addClass('jssError error level0');
}
},
setDefaultTheme: function() {
this.$themeCss = $('link[id=' + this.config.defaultThemeId + ']');
if(this.$themeCss.length) {
this.defaultTheme = this.$themeCss.attr('href');
}
},
resetStyle: function() {
this.updateStyle(this.defaultTheme);
},
updateStyle: function(newStyle) {
this.$themeCss.attr('href', newStyle);
},
getFullAssetPath: function(asset) {
return this.config.fullPath + asset + '.css';
},
checkCookie: function() {
var styleCookie;
// if using cookies and using JavaScript to load css
if (this.config.cookie && this.config.cookie.isManagingLoad) {
// check if css is set in cookie
styleCookie = _docCookies.getItem(_cookieKey);
if (styleCookie) {
newStyle = this.getFullAssetPath(styleCookie);
// update link tag
this.updateStyle(newStyle);
// update default ref
this.defaultTheme = newStyle;
}
}
},
addHoverEvents: function() {
var self = this;
this.$root.find('a').hover(
function() {
var asset = $(this).data('theme'),
newStyle = self.getFullAssetPath(asset);
// update link tag
self.updateStyle(newStyle);
},
function() {
// reset link tag
self.resetStyle();
}
);
},
addClickEvents: function() {
var self = this;
this.$root.find('a').click(
function() {
var asset = $(this).data('theme'),
newStyle = self.getFullAssetPath(asset);
// update link tag
self.updateStyle(newStyle);
// update default ref
self.defaultTheme = newStyle;
// try to store cookie
if (self.config.cookie) {
_docCookies.setItem(_cookieKey, asset, self.config.cookie.expires, '/');
}
}
);
}
};
$.fn.styleSwitcher = function (options) {
return new jStyleSwitcher(this, $.extend(true, _defaultOptions, options));
};
})(jQuery);
HTML этого раздела в моей странице:
<div id="colour-variations">
<a class="option-toggle"><i class="icon-gear"></i></a>
<h3>Preset Colors</h3>
<ul class="jssError error level0">
<li><a href="javascript: void(0);" data-theme="style"></a></li>
<li><a href="javascript: void(0);" data-theme="pink"></a></li>
<li><a href="javascript: void(0);" data-theme="blue"></a></li>
<li><a href="javascript: void(0);" data-theme="turquoise"></a></li>
<li><a href="javascript: void(0);" data-theme="orange"></a></li>
<li><a href="javascript: void(0);" data-theme="lightblue"></a></li>
<li><a href="javascript: void(0);" data-theme="brown"></a></li>
<li><a href="javascript: void(0);" data-theme="green"></a></li>
</ul>
</div>
Вы можете увидеть template, который является общим сайтом. Я использую этот шаблон в скине для dotnetnuke7, и эта проблема возникла.
Пожалуйста, разместите код в фрагменте (см. Иллюстрацию) (http://i.imgur.com/p94EZRA.png?1)), [jsFiddle.net] (http://jsfiddle.net), [ PenCode.io] (http://pencode.io) или [Plnkr.co] (http://plnkr.co) Кроме того, вы должны обратиться к [this] (http://stackoverflow.com/ help/mcve) и [that] (http://stackoverflow.com/questions/how-to-ask) – zer00ne
Включите свои цветовые темы, а также 'style.css',' pink.css' ... 'green.css ' – zer00ne
Также необходимо' default.css'. У вас есть проблемы с этим плагином, который переключает стили, но вы вообще не предоставляете CSS. Какие правила имеют эти классы? 'jssError',' error', 'level0',' color-vari', 'option-toggle' и т. д. Этот img ничего не показывает нам о базовом коде. – zer00ne