Jump to content
  • 0
Sign in to follow this  
kirilsakh

Как сделать - только один пример пожалуйста

Question

kirilsakh    0

Всем привет. Решил попробовать сделать виджит.

В общем делаю следующее. Создаю новый сайт или документ, как угодно.

Создаю текст и накладываю на него виджит, или типо виджит. Виджит меняет только цвет текста.

Виджит выглядит следующим образом

<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget
	name="Цвет"
	formatNumber="2"
	localization="none"
	creator="Я" 
	defaultWidth="20"
	defaultHeight="20" 
	isResizable="false">
	<parameters>
		<text name="qwerty" label="Цвет" defaultValue="#fff"/>

	</parameters>
	<headHTML>
	<![CDATA[
	<style>
.txt
{
color: {param_qwerty};
}
</style>
		]]>
</headHTML>
	</HTMLWidget>

Но почему то цвет не меняется. Что не так я делаю? Подскажите пожалуйста.

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0
6 часов назад, kirilsakh сказал:

Но почему то цвет не меняется. Что не так я делаю? Подскажите пожалуйста.

Всё не так делаете. Прежде чем делать виджет, напишите правильный, рабочий css код, проверьте его, а уже потом делайте виджет

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

странно .. чем код 

<style>
.txt {
color:#f0f;
}
</style>

неправильный?

для класса txt задаст цвет..

во вложении готовый виджет

осталось выбрать текст и зайти в стили символов(в меню окно -стили символов) - и там создать новый стиль txt

проверено работает

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

также стоит обратить внимание на тип параметра color - он удобнее

т.е.  вместо  

<text name="qwerty" label="Цвет" defaultValue="#fff"/>
<color name="qwerty" label="Text Color" defaultValue="#C74040"/>

а еще одно 

formatNumber="3"

единственное кошерное руководство по виджетописанию  Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

одна проблема - на английском.. есть перевод предыдущей версии данного руководства - но он неполный.

тут когда-то был отличный разбор и перевод всего этого процесса - но по ходу уплыл в платный раздел.. а жаль

Share this post


Link to post
  • 0
kirilsakh    0

Спасибо большое. Только я хотел сделать что бы виджит вставил, и текст сразу поменялся, не создавать дополнительные стили. 

Share this post


Link to post
  • 0
11 час назад, Greymouse2 сказал:

странно .. чем код неправильный?

Ну, сам по себе он правильный конечно, но в контексте того, что хочет ТС - "Только я хотел сделать что бы виджит вставил, и текст сразу поменялся, не создавать дополнительные стили." - вот этим он и не правильный. (это было сразу понятно из вопроса ТС)

Да и, честно говоря совершенно не понимаю зачем нужен такой виджет, если всё настраивается средствами Музы.

Share this post


Link to post
  • 0
kirilsakh    0
2 минуты назад, Павел Хомерики сказал:

Ну, сам по себе он правильный конечно, но в контексте того, что хочет ТС - "Только я хотел сделать что бы виджит вставил, и текст сразу поменялся, не создавать дополнительные стили." - вот этим он и не правильный. (это было сразу понятно из вопроса ТС)

Да и, честно говоря совершенно не понимаю зачем нужен такой виджет, если всё настраивается средствами Музы.

Ну это понятно что в программе это можно сделать без виджита. Я пытаюсь сделать хоть что то что бы работало что бы понять и научится как делать эти виджиты. Мне бы хотя бы какой нибудь примерчик в этом плате а то в интернете нету вообще. 

Буду очень благодарен.

Share this post


Link to post
  • 0
55 минут назад, kirilsakh сказал:

Ну это понятно что в программе это можно сделать без виджита. Я пытаюсь сделать хоть что то что бы работало что бы понять и научится как делать эти виджиты. Мне бы хотя бы какой нибудь примерчик в этом плате а то в интернете нету вообще. 

Буду очень благодарен.

Вам же дали ссылку Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. там масса примеров, скачивайте и изучайте


Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

И надо понимать, что виджет в Музе - это всего лишь оболочка для массива кода, в которой выведены настройки, но не более.
Принцип создания такой - пишете код или находите в интернете нужные фрагменты кода, проверяете его работоспособность и только после этого оборачиваете его в оболочку виджета. То есть, код должен изначально работать так как вам надо, без оболочки. Сама оболочка не несет никакой программной составляющей

Share this post


Link to post
  • 0
kirilsakh    0

Я все это читал и на русском языке. Я не могу понять только одного - как применить эффект для объекта. Я в программе Muse создал кнопку, хочу применить к ней эффект

Вот рабочий эффект с кнопкой.

<!DOCTYPE html>

<head>
	<meta charset="UTF-8" />
	<style>
		.la-anim-1 {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 3px;
			background: #ed4e6e;
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			pointer-events: none;
		}

		.la-anim-1::after {
			position: absolute;
			top: 0;
			right: 0;
			width: 100px;
			height: 100%;
			background: #ed4e6e;
			box-shadow: 0 0 15px #ed4e6e, 0 0 5px #ed4e6e;
			content: '';
			opacity: 0;
			-webkit-transition: opacity 0.2s, box-shadow 2s 4s;
			transition: opacity 0.2s, box-shadow 2s 4s;
			-webkit-transform: rotate(2deg) translateY(-2px);
			transform: rotate(2deg) translateY(-2px);
		}

		.la-anim-1.la-animate {
			z-index: 100;
			opacity: 0;
			-webkit-transition: -webkit-transform 5s ease-in, opacity 1s 5s;
			transition: transform 0.5s ease-in, opacity 1s 0.5s;
			-webkit-transform: translate3d(0%, 0, 0);
			transform: translate3d(0%, 0, 0);
		}

		.la-anim-1.la-animate::after {
			box-shadow: 0 0 3px #ed4e6e, 0 0 1px #ed4e6e;
			opacity: 1;
		}
	</style>
</head>
<body>
	


	<div class="la-anim-1"></div>
	<div id="la-buttons">
		<button data-anim="la-anim-1">YouTube</button>
	</div>


	<script>
		( function( window ) {

			'use strict';

			var hasClass, addClass, removeClass;
			if ( 'classList' in document.documentElement ) {
				hasClass = function( elem, c ) {
					return elem.classList.contains( c );
				};
				addClass = function( elem, c ) {
					elem.classList.add( c );
				};
				removeClass = function( elem, c ) {
					elem.classList.remove( c );
				};
			}
			else {
				hasClass = function( elem, c ) {
					return classReg( c ).test( elem.className );
				};
				addClass = function( elem, c ) {
					if ( !hasClass( elem, c ) ) {
						elem.className = elem.className + ' ' + c;
					}
				};
				removeClass = function( elem, c ) {
					elem.className = elem.className.replace( classReg( c ), ' ' );
				};
			}

			function toggleClass( elem, c ) {
				var fn = hasClass( elem, c ) ? removeClass : addClass;
				fn( elem, c );
			}
			var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
	define( classie );
} else {
	window.classie = classie;
}
})( window );


	var inProgress = false;
	Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
		var anim = el.getAttribute( 'data-anim' ),
		animEl = document.querySelector( '.' + anim );
		el.addEventListener( 'click', function() {
			if( inProgress ) return false;
			inProgress = true;
			classie.add( animEl, 'la-animate' );
			setTimeout( function() {
				classie.remove( animEl, 'la-animate' );

				inProgress = false;
			}, 2000 );
		} );
	} );
</script>
</body>
</html>

 

А вот XML который у меня получился.

<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget name="xxxxx" formatNumber="1" 
	localization="none" creator="xxxx@mail.ru">
	<parameters>
		

	</parameters>
	<headHTML>
		<![CDATA[
		<style>
		.la-anim-1 {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 3px;
			background: #ed4e6e;
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
			pointer-events: none;
		}

		.la-anim-1::after {
			position: absolute;
			top: 0;
			right: 0;
			width: 100px;
			height: 100%;
			background: #ed4e6e;
			box-shadow: 0 0 15px #ed4e6e, 0 0 5px #ed4e6e;
			content: '';
			opacity: 0;
			-webkit-transition: opacity 0.2s, box-shadow 2s 4s;
			transition: opacity 0.2s, box-shadow 2s 4s;
			-webkit-transform: rotate(2deg) translateY(-2px);
			transform: rotate(2deg) translateY(-2px);
		}

		.la-anim-1.la-animate {
			z-index: 100;
			opacity: 0;
			-webkit-transition: -webkit-transform 5s ease-in, opacity 1s 5s;
			transition: transform 0.5s ease-in, opacity 1s 0.5s;
			-webkit-transform: translate3d(0%, 0, 0);
			transform: translate3d(0%, 0, 0);
		}

		.la-anim-1.la-animate::after {
			box-shadow: 0 0 3px #ed4e6e, 0 0 1px #ed4e6e;
			opacity: 1;
		}
	</style>
		]]>
	</headHTML>


	<bodyEndHTML>
		<![CDATA[
		<script>
		( function( window ) {

			'use strict';

			var hasClass, addClass, removeClass;
			if ( 'classList' in document.documentElement ) {
				hasClass = function( elem, c ) {
					return elem.classList.contains( c );
				};
				addClass = function( elem, c ) {
					elem.classList.add( c );
				};
				removeClass = function( elem, c ) {
					elem.classList.remove( c );
				};
			}
			else {
				hasClass = function( elem, c ) {
					return classReg( c ).test( elem.className );
				};
				addClass = function( elem, c ) {
					if ( !hasClass( elem, c ) ) {
						elem.className = elem.className + ' ' + c;
					}
				};
				removeClass = function( elem, c ) {
					elem.className = elem.className.replace( classReg( c ), ' ' );
				};
			}

			function toggleClass( elem, c ) {
				var fn = hasClass( elem, c ) ? removeClass : addClass;
				fn( elem, c );
			}
			var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
	define( classie );
} else {
	window.classie = classie;
}
})( window );


	var inProgress = false;
	Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
		var anim = el.getAttribute( 'data-anim' ),
		animEl = document.querySelector( '.' + anim );
		el.addEventListener( 'click', function() {
			if( inProgress ) return false;
			inProgress = true;
			classie.add( animEl, 'la-animate' );
			setTimeout( function() {
				classie.remove( animEl, 'la-animate' );

				inProgress = false;
			}, 2000 );
		} );
	} );
</script>
		]]>
	</bodyEndHTML>
	
</HTMLWidget>

 

И как сделать что бы эффект приминился к кнопке? Или не судьба показать?

Share this post


Link to post
  • 0
1 час назад, kirilsakh сказал:

Я все это читал и на русском языке.

Должно быть Вы не внимательны. В русском варианте нет примеров и много еще чего. Читайте английскую версию.
 

 

1 час назад, kirilsakh сказал:

И как сделать что бы эффект приминился к кнопке? Или не судьба показать?

Ну как не судьба? Обычные же правила css. Что бы стиль применить к объекту надо назначить этот стиль объекту.
Создайте стиль графики  и назначьте его нужному объекту. Или используйте ID объектов. Простое помещение виджета на страницу ничего не даст. Помещая виджет на страницу, вы по сути вставляете просто код который в нем присутствует. Хоть поверх нужного объекта помещайте хоть под него - толку не будет, если он не подключен к объекту. С чем он должен работать то?

Share this post


Link to post
  • 0
kirilsakh    0
42 минуты назад, Павел Хомерики сказал:

Должно быть Вы не внимательны. В русском варианте нет примеров и много еще чего. Читайте английскую версию.
 

 

Ну как не судьба? Обычные же правила css. Что бы стиль применить к объекту надо назначить этот стиль объекту.
Создайте стиль графики  и назначьте его нужному объекту. Или используйте ID объектов. Простое помещение виджета на страницу ничего не даст. Помещая виджет на страницу, вы по сути вставляете просто код который в нем присутствует. Хоть поверх нужного объекта помещайте хоть под него - толку не будет, если он не подключен к объекту. С чем он должен работать то?

Ого. Теперь понимаю.

А ID объекта можно узнать через исходник в браузере, верно да? Если да, то вопросов больше нет. И на этом спасибо.

Share this post


Link to post
  • 0
В 03.01.2016 at 14:04, kirilsakh сказал:

Я все это читал и на русском языке. Я не могу понять только одного - как применить эффект для объекта. Я в программе Muse создал кнопку, хочу применить к ней эффект

Вот рабочий эффект с кнопкой.

И как сделать что бы эффект приминился к кнопке? Или не судьба показать?

все просто  

1. по id -

$('#u254').css("color","#000");

неудобно что что id надо прописывать 

2 по гиперссылки - подсказка - так сделано в ТМ анимайт - удобнее но.. есть подводные камни

3. задавая имя стиля - это реально самый правильный и безболезненный вариант.

$('.utext').css("color","#000");

 

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...