Подключение настроек плагина из пользовательского тега

[Critical Error]

Здравствуйте. Есть небольшая проблема с подключением настроек из пользовательского тега data-settings для плагина coda slider.

В шаблоне идет след. код:

<div id="slider-1" class="slider-plugin" data-plugin="slider" data-settings="{autoSlide:1,autoSlideInterval:10000,slideEaseFunction:'linear',slideEaseDuration:300,autoHeightEaseFunction:'linear',autoHeightEaseDuration:300,crossLinking:0,dynamicArrows:0}">
код шаблона плагина
</div>

Таких блоков на странице несколько. ID и настройки в атрибуте data-settings у каждого разные.

Инициализация происходит в подключаемом js-файле след. образом

(function($){
	$(document).ready(function() {
		$('div[data-plugin=slider]').each(function(){
			var slider = $(this);
			var settings = slider.attr('data-settings');
			slider.codaSlider(settings);
		});
	});
});

В итоге, на странице плагины включаются, но с дефолтными настройками.

Подскажите, пожалуйста, что я упускаю?

[keltanas]

Инициализация происходит в подключаемом js-файле след. образом

(function($){
	$(document).ready(function() {
		$('div[data-plugin=slider]').each(function(){
			var slider = $(this);
			var settings = slider.attr('data-settings');
			slider.codaSlider(settings);
		});
	});
});

Подскажите, пожалуйста, что я упускаю?

Ну так настройки должны передаваться, как объект, а вы передаете строку. Напишите

$('div[data-plugin=slider]').each(function(){
    var slider = $(this);
    var settings = slider.attr('data-settings');
    console.log( settings );
    slider.codaSlider(settings);
});

и посмотрите в консоли, что написано, тогда поймете.

Чтобы работало, надо eval-ить результат. Попробуйте так:

$('div[data-plugin=slider]').each(function(){
    var slider = $(this);
    var settings = slider.attr('data-settings');
    console.log( settings );
    settings = eval( settings );
    console.log( settings );
    slider.codaSlider(settings);
});

[lexxcode]

нужно выбирать данные из data-settings не через attr, а через data

Вот пример

Смотреть в консоль в хроме или мозилле, там будет Object.

Обратите внимание на кавычки у data-settings

[nerv]

alexriz, а еще, чтобы твой вариант работал, атрибут должен иметь формат JSON? )

[lexxcode]

ну очевидно. А что тебя так развеселило?

[nerv]

alexriz, на другом форуме отжигают ) Кстати, вышла новая версия jquery 1.8.1 - http://jquery.com/download/

Edited September 6, 2012 by nerv

[lexxcode]

на другом форуме отжигают )

значит, мне видимо этого не понять)

Кстати, вышла новая версия jquery 1.8.1

я в курсе, а что?

[mishka]

Можно брать данные из любого атрибута(если вдруг не html5 и важна валидность), также можно их брать и через attr. В итоге получим строку. а эту строку можно распарсить с помощью $.parseJSON()

Необходимо строго соблюдать формат JSON

[Critical Error]

До того, как прочитать ответы, делал так:

<div id="slider-1" class="slider-plugin slider-catalyst" data-plugin="slider" data-settings='{autoSlide:1,autoSlideInterval:10000,slideEaseFunction:"linear",slideEaseDuration:300,autoHeightEaseFunction:"linear",autoHeightEaseDuration:300,crossLinking:0,dynamicArrows:0}'>
...код слайдов...
</div>


<div id="slider-2" class="slider-plugin slider-default" data-plugin="slider" data-setting="{autoSlide:1,autoSlideInterval:10000,crossLinking:0,dynamicArrows:0,dynamicTabs:0}">
...код слайдов...
</div>

В js инициализирую так:

var plugins = {};

$( '[data-plugin]', plugins ).each(function(){
	var	plugin = $(this),
		type = plugin.data('plugin'),
		settings = plugin.data('settings');

	if( type=='slider' && settings ){
		plugin.codaSlider(settings);
	}
});

Не работает, зараза

С Вашими примерами тоже.

[lexxcode]

Critical Error, я специально отметил, обратите внимание на кавычки!

data-settings='{"autoSlide":"1","autoSlideInterval":"10000","slideEaseFunction":"linear"
,"slideEaseDuration":"300","autoHeightEaseFunction":"linear","autoHeightEaseDuration":"
300","crossLinking":"0","dynamicArrows":"0"}'

Показываю еще раз, может так понятней будет

[Critical Error]

Работает

$('[data-plugin]').each(function(){
	var	plugin = $(this),
		type = plugin.data('plugin'),
		settings = plugin.data('settings');

	settings = $.extend( settings, settings );

	if( type=='slider' && settings ){
		plugin.codaSlider(settings);
	}
});

alexriz, в кавычки обернул только ключи и помогло

... "autoSlide":1,"autoSlideInterval":10000, ...

Спасибо всем большое за помощь

[lexxcode]

в кавычки обернул только ключи и помогло

ну с числами, да так можно, а строки все равно придется в кавычки оборачивать