[إستفسار] كيف أستعمل mootools ؟

[السريع]

السلام عليكم ..
توفر mootools ادوات رائعة ..
كيف يمكنني إستعمالها ؟

الرجاء إفادتي بشرح و لو كان بسيطاً ، و كـ مثال هذا الإيفيكت ..
http://demos.mootools.net/Fx.Elements

لا مشكلة لدي مع كودات الـ css او الـ html ، تتلخص مشكلتي في كودات الـ js ، لا اعلم كيف اضعها .. !

شكرأً ..

[Developer.]

وعليكم السلام,,

انت وضعت الحل بنفسك
فالمثال الموجود بالموقع هو مثال جميل وبسيط ببساطة اذا اردت فهم كيف يعمى ويف تعمله انت بنفسه قم بتتبع الID الخاص باى element فى كود الHTML وقارنه بالموجود بالJS وستصل للحل بأذن الله ..

[السريع]

وعليكم السلام,,

انت وضعت الحل بنفسك
فالمثال الموجود بالموقع هو مثال جميل وبسيط ببساطة اذا اردت فهم كيف يعمى ويف تعمله انت بنفسه قم بتتبع الID الخاص باى element فى كود الHTML وقارنه بالموجود بالJS وستصل للحل بأذن الله ..

السلام عليكم ،

سؤالي هو ، كيف أدرج كود الـ js بالصفحة ؟

[السريع]

هل الموضوع في المكان الخطأ ؟!

[الغريم]

لطالما اعجبت في مكتبة Moo لما فيه من روعة الإبتكارات في تطوير استعراض صفحات الويب.
لكن لا ادري دائما اتكاسل عند استخدام خصائصها ، و لكن عندما ارى شخص يطلب المساعدة فيها اقوم بإستخدامها
مع ان المفروض يكون " نفسي نفسي " لول
على العموم بشرح لك لن الموقع واضع الاكواد و الشرح للمستوى المتقدم .

00 تم التعديل على بعض الاكواد و إضافة بعض 00

استخدام CSS

<style type="text/css">
#kwicks_container {
	background-color: violet;
	height: 100px;
}
#kwicks {
	position: relative;
}
#kwicks .kwick {
	float: left;
	display: block;
	width: 117px;
	height: 100px;
}
#kwick_red {
	background-color: red;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}
#kwick_orange {
	background-color: orange;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}
#kwick_yellow {
	background-color: yellow;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}
#kwick_green {
	background-color: green;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}
#kwick_blue {
	background-color: blue;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}
#kwick_indigo {
	background-color: indigo;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	color: #fff;
}
#kwick_violet {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	background-color: violet;
}
</style>

استخدام الجافا سكربت بطلب ملف js لكبر حجمه لانه لن يسع هيدر الهتمل و اسمه
mootools.svn.js ( ستجده في المرفقات ) .

<script type="text/javascript" src="mootools.svn.js"></script>

و ايضا هذا السكربت يضع في الهيدر كذلك

<script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 117, szSmall  = 100, szFull   = 219;
			
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 300, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
			
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
			
		}); 
	</script>

وهكذا يكون انتهينا من وسم Head
الان نذهب للطباعة في وسم Body ووضع كود HTML

<div id="demo">
	<ul id="kwicks">
		<li id="kwick_red" class="kwick"><span class="style1"><strong>أحمر</strong></span> </li>
		<li id="kwick_orange" class="kwick"><span>برتقالي</span> </li>
		<li id="kwick_yellow" class="kwick"><span>أصفر</span> </li>
		<li id="kwick_green" class="kwick"><span>أخضر</span> </li>
		<li id="kwick_blue" class="kwick"><span>أزرق</span> </li>
		<li id="kwick_indigo" class="kwick"><span>عيناوي</span> </li>
		<li id="kwick_violet" class="kwick"><span>بنفسجي</span> </li>
	</ul>
</div>

و انتهينا
اتمنى ان اكون افدتك
اخوك الغريم
Algareem com

[السريع]

شكراً جزيلاً لك عزيزي الغريم ..

سأقوم بالتجربة حالما يتوفر الوقت ..