Документация

Создание внешней формы настроек

Ниже приведен пример создания тестового виджета с пользовательской формой настроек.

Описание виджета

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://wdgt.yandex.ru/ns/">
<head>
<meta name="type" content="iframe" />
<meta name="src" content="..." />
<widget:preferences src="..." width="200" height="150">
<preference name="test" type="hidden" />
</widget:preferences>
</head>
</html>

Сам виджет

Содержимое элемента <iframe>. Адрес источника загрузки указан в свойсвте src в описании виджета.

<html>
<head>
<script src="http://img.yandex.net/webwidgets/1.3/WidgetApi.js"></script>
<script>
widget.onload = function() { $('.test').val( this.getValue('test') ) }
</script>
</head>
<body>
<p class="test"></p>
<a href="#" onclick="widget.showPreferences(); return false">open prefs</a>
</body>
</html>

Форма настроек

Адрес источника загрузки указан в атрибуте src тега <widget:preferences>.

<html>
<head>
<script src="http://img.yandex.net/webwidgets/1.3/WidgetApi.js"></script>
<script>
function save()
{
  widget.savePreferences({ test: widget.getValue('test')+", "+$('.input').val() });
  widget.hidePreferences();
}
function hide() { widget.hidePreferences(); }
</script>
</head>
<body>
<input type="text" class="input" /> <input value="Add this and close" type="button" onclick="save(); return false" />
<br /><br /><input value="Close" type="button" onclick="hide(); return false" />
</body>
</html>
параметры форма настроекпользовательскаявнешняя