محمود عفيفى
03-05-2011, 12:20 AM
http://www.abc4web.net/upload/images2/gj2lc6cde5.png
بسم الله الرحمن الرحيم
كيفية عمل قائمة منسدلة للموقع باستخدام Ext Core
وجدت شرح مميز فى إحدى المدونات (للأسف توقف عملها :)) ) وأضفت له بعض التعديلات وربنا يستر.
هناك العديد من مكتبات تطوير بنية الصفحات باستخدام Javascript و من أشهرها مكتبة jQuery و التي يكثر استخدامها الآن في العديد من المواقع الكبرى و يمكن تطويعها لعمل العديد من التأثيرات الرائعة و أيضاً مكتبة Mootools و Prototype و غيرها . و لكننا اليوم على موعد مع مجموعة جديدة ظهرت حديثاً للنور و هي مكتبة Ext Core (http://extjs.com/) .
وتتمتع مكتبة Ext Core بسهولة الاستخدام و السرعة التي تظهر في أدائها , و سنسعترض في هذا المقال كيفية عمل قائمة منسدلة سواء عرضية أو طولية مع مساعدة CSS في تطوير الشكل .
هناك العديد من الأمثلة المتوفرة لعمل قائمة منسدلة باستخدام CSS فقط و التحكم فيها من خلال عدة عناصر مثل Position و z-index للتحكم في مكان الظهور و كيفية الاخفاء , و لكن أحياناً ما نحتاج لبعض التأثير الجمالي على القائمة التي نستخدمها . القائمة التي لدينا اليوم بسيطة و سهلة و التعديل فيها أيضاً بسيط سواء في كود HTML أو في CSS .
http://www.abc4web.net/vb/../upload/images2/hxldffddqe.png (http://docma7moud.0fees.net/botta/ext-core-menu/menu.htm) http://www.abc4web.net/vb/../upload/images2/gp7wbnu3yk.png (http://www.abc4web.net/vb/attachment.php?attachmentid=1427&stc=1&d=1304323814)
كيفية إدراج مكتبة Ext Core في الصفحة :-
هناك الطريقة التقليدية و هي تنزيل ملف Ext Core على موقعك و إضافته من خلال عنصر Script إلى وسم < head > , و لكن من الأفضل لسرعة أداء موقعك جلب مكتبات تطوير بنية الصفحات Ajax Libraries API من خلال Google فهي تساهم في سرعة الصفحة الخاصة بك و توفير مساحة من عملية تحميل الملف كل مرة من خلال موقعك :
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>
يمكن جلب روابط المكتبات الأخرى مثل jQuery, Mootools من خلال الصفحة الخاصة بها على Google Code (http://code.google.com/apis/ajaxlibs/documentation/index.html).
إضافة الملفات اللازمة لتشغيل القائمة:-
يجب إضافة مجموعة الملفات اللازمة لتشغيل القائمة سواء ملفات الجافاسكربت أو ملفات CSS و يتم إضافتها داخل وسم وسم <head> :
<link href="menu.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.ux.Menu('simple-horizontal-menu', {
transitionType: 'slide',
direction: 'horizontal', // default
delay: 0.2, // default
autoWidth: true, // default
transitionDuration: 0.3, // default
animate: true, // default
currentClass: 'current' // default
});
new Ext.ux.Menu('simple-vertical-menu', {
direction: 'vertical'
});
});
</script>
في الكود السابق تمت إضافة ملفات Javascript و CSS لتشغيل القائمة و إضافة الكود الخاص بإعدادات القائمتين العرضية أو الطولية .
إضافة القائمة في الصفحة:-
لاستخدام القائمة في الصفحة ما عليك إلا اختيار إذا كنت ستستخدم القائمة الطولية أو العرضية
القائمة العرضية:-
و يكون كود HTML للقائمة العرضية كالتالي :
<ul id="simple-horizontal-menu">
<li><a href="#">عنصر قائمة رئيسية 1</a></li>
<li><a href="#">عنصر قائمة رئيسية 2</a></li>
<li><a href="#">عنصر قائمة رئيسية 3</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a></li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة رئيسية 4</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 4</a></li>
<li><a href="#">عنصر قائمة داخلية 5</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a></li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة داخلية 6</a></li>
</ul>
</li>
</ul>
في الكود السابق تم استدعاء إعدادات القائمة و تحويلها لقائمة عرضية بمساعدة ملفات التنسيق و الجافاسكربت من خلال معرف simple-horizontal-menu , ثم البدء في تكوين قائمة باستخدام عنصر <ul> و اشتقاق العناصر الداخلية منه باستخدام <li> , و كذلك تكوين قائمة منبثقة من العنصر الداخلي كما في الكود السابق :
<li><a href="#">عنصر قائمة داخلية 5</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a></li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
القائمة الطولية
<ul id="simple-vertical-menu">
<li><a href="#">تجربة</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a>
<ul>
<li><a href="#">sub عنصر قائمة داخلية 1</a></li>
<li><a href="#">sub عنصر قائمة داخلية 2</a></li>
<li><a href="#">sub عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة رئيسية 2</a></li>
<li><a href="#">عنصر قائمة رئيسية 3</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 4</a></li>
<li><a href="#">عنصر قائمة داخلية 5</a></li>
<li><a href="#">عنصر قائمة داخلية 6</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة رئيسية 4</a></li>
</ul>
نفس الفكرة في القائمة الطولية من خلال استدعاء معرف simple-vertical-menu لجلب إعدادات القائمة الطولية و منها يتم استخدام عناصر <ul> و <li> لعمل القائمة .
ملف التنسيق CSS :-
أما التنسيق باستخدام CSS فهو مثل التنسيق لأي قائمة أخرى يتم عملها باستخدام HTML من خلال التحكم بتنسيق عناصر ul, li, a و التي تعرض القائمة في HTML
body{
direction: rtl;
}
.ux-menu-container {
position: relative;
}
.ux-menu,
.ux-menu ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 1;
}
.ux-menu li {
position: relative;
float: right;
}
.ux-menu ul {
position: absolute;
top: 0;
left: 0;
}
.ext-border-box .ux-menu-ie-iframe,
.ext-ie7 .ux-menu-ie-iframe {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none;
zoom: 1;
z-index: -1;
filter:mask();
}
.ux-menu-vertical .ux-menu-item-main {
clear: left;
}
.ux-menu a {
display: block;
position: relative;
text-decoration: none;
color: #432;
border-left: 1px solid #e3dad1;
border-top: 1px solid #e3dad1;
border-bottom: 1px solid #e3dad1;
background: #f3efec url('images/menu-item-bg.png') repeat;
font-size: 12px;
line-height: 12px;
padding: 10px 14px;
}
.ux-menu a.ux-menu-link-last {
border-right: 1px solid #e3dad1;
}
ux.menu ul a {
width: 100%;
}
.ux-menu a:focus,
.ux-menu a:hover,
.ux-menu a.ux-menu-link-hover {
border-color: #d2e3f4;
background: url(images/'menu-item-bg-over.png') repeat;
outline: 0;
}
.ext-ie .ux-menu-clearfix {
zoom: 1;
}
.ux-menu-clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.ux-menu a.ux-menu-link-parent {
padding-right: 24px;
min-width: 1px;
}
.ux-menu ul a,
.ux-menu.ux-menu-vertical a {
border-bottom: 0px;
border-right: 1px solid #e3dad1;
}
.ux-menu ul a.ux-menu-link-last,
.ux-menu.ux-menu-vertical a.ux-menu-link-last {
border-bottom: 1px solid #e3dad1;
}
.ux-menu-arrow {
display: block;
width: 8px;
height: 6px;
right: 10px;
top: 14px;
position: absolute;
background: url('images/menu-arrow-down.png') no-repeat;
font-size: 0;
}
.ux-menu.ux-menu-vertical .ux-menu-arrow,
.ux-menu ul .ux-menu-arrow {
width: 6px;
height: 8px;
top: 13px;
background: url('images/menu-arrow-right.png') no-repeat;
}
.ext-border-box .ux-menu-arrow {
top: 17px;
}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,
.ext-border-box .ux-menu ul .ux-menu-arrow {
top: 16px;
}
.ux-menu ul.ux-menu-hidden {
display: none;
}
http://www.abc4web.net/vb/../upload/images2/hxldffddqe.png (http://docma7moud.0fees.net/botta/ext-core-menu/menu.htm) http://www.abc4web.net/upload/images2/gp7wbnu3yk.png (http://www.abc4web.net/vb/attachment.php?attachmentid=1427&stc=1&d=1304323814)
بسم الله الرحمن الرحيم
كيفية عمل قائمة منسدلة للموقع باستخدام Ext Core
وجدت شرح مميز فى إحدى المدونات (للأسف توقف عملها :)) ) وأضفت له بعض التعديلات وربنا يستر.
هناك العديد من مكتبات تطوير بنية الصفحات باستخدام Javascript و من أشهرها مكتبة jQuery و التي يكثر استخدامها الآن في العديد من المواقع الكبرى و يمكن تطويعها لعمل العديد من التأثيرات الرائعة و أيضاً مكتبة Mootools و Prototype و غيرها . و لكننا اليوم على موعد مع مجموعة جديدة ظهرت حديثاً للنور و هي مكتبة Ext Core (http://extjs.com/) .
وتتمتع مكتبة Ext Core بسهولة الاستخدام و السرعة التي تظهر في أدائها , و سنسعترض في هذا المقال كيفية عمل قائمة منسدلة سواء عرضية أو طولية مع مساعدة CSS في تطوير الشكل .
هناك العديد من الأمثلة المتوفرة لعمل قائمة منسدلة باستخدام CSS فقط و التحكم فيها من خلال عدة عناصر مثل Position و z-index للتحكم في مكان الظهور و كيفية الاخفاء , و لكن أحياناً ما نحتاج لبعض التأثير الجمالي على القائمة التي نستخدمها . القائمة التي لدينا اليوم بسيطة و سهلة و التعديل فيها أيضاً بسيط سواء في كود HTML أو في CSS .
http://www.abc4web.net/vb/../upload/images2/hxldffddqe.png (http://docma7moud.0fees.net/botta/ext-core-menu/menu.htm) http://www.abc4web.net/vb/../upload/images2/gp7wbnu3yk.png (http://www.abc4web.net/vb/attachment.php?attachmentid=1427&stc=1&d=1304323814)
كيفية إدراج مكتبة Ext Core في الصفحة :-
هناك الطريقة التقليدية و هي تنزيل ملف Ext Core على موقعك و إضافته من خلال عنصر Script إلى وسم < head > , و لكن من الأفضل لسرعة أداء موقعك جلب مكتبات تطوير بنية الصفحات Ajax Libraries API من خلال Google فهي تساهم في سرعة الصفحة الخاصة بك و توفير مساحة من عملية تحميل الملف كل مرة من خلال موقعك :
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>
يمكن جلب روابط المكتبات الأخرى مثل jQuery, Mootools من خلال الصفحة الخاصة بها على Google Code (http://code.google.com/apis/ajaxlibs/documentation/index.html).
إضافة الملفات اللازمة لتشغيل القائمة:-
يجب إضافة مجموعة الملفات اللازمة لتشغيل القائمة سواء ملفات الجافاسكربت أو ملفات CSS و يتم إضافتها داخل وسم وسم <head> :
<link href="menu.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core-debug.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.ux.Menu('simple-horizontal-menu', {
transitionType: 'slide',
direction: 'horizontal', // default
delay: 0.2, // default
autoWidth: true, // default
transitionDuration: 0.3, // default
animate: true, // default
currentClass: 'current' // default
});
new Ext.ux.Menu('simple-vertical-menu', {
direction: 'vertical'
});
});
</script>
في الكود السابق تمت إضافة ملفات Javascript و CSS لتشغيل القائمة و إضافة الكود الخاص بإعدادات القائمتين العرضية أو الطولية .
إضافة القائمة في الصفحة:-
لاستخدام القائمة في الصفحة ما عليك إلا اختيار إذا كنت ستستخدم القائمة الطولية أو العرضية
القائمة العرضية:-
و يكون كود HTML للقائمة العرضية كالتالي :
<ul id="simple-horizontal-menu">
<li><a href="#">عنصر قائمة رئيسية 1</a></li>
<li><a href="#">عنصر قائمة رئيسية 2</a></li>
<li><a href="#">عنصر قائمة رئيسية 3</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a></li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة رئيسية 4</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 4</a></li>
<li><a href="#">عنصر قائمة داخلية 5</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a></li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة داخلية 6</a></li>
</ul>
</li>
</ul>
في الكود السابق تم استدعاء إعدادات القائمة و تحويلها لقائمة عرضية بمساعدة ملفات التنسيق و الجافاسكربت من خلال معرف simple-horizontal-menu , ثم البدء في تكوين قائمة باستخدام عنصر <ul> و اشتقاق العناصر الداخلية منه باستخدام <li> , و كذلك تكوين قائمة منبثقة من العنصر الداخلي كما في الكود السابق :
<li><a href="#">عنصر قائمة داخلية 5</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a></li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
القائمة الطولية
<ul id="simple-vertical-menu">
<li><a href="#">تجربة</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 1</a></li>
<li><a href="#">عنصر قائمة داخلية 2</a>
<ul>
<li><a href="#">sub عنصر قائمة داخلية 1</a></li>
<li><a href="#">sub عنصر قائمة داخلية 2</a></li>
<li><a href="#">sub عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة داخلية 3</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة رئيسية 2</a></li>
<li><a href="#">عنصر قائمة رئيسية 3</a>
<ul>
<li><a href="#">عنصر قائمة داخلية 4</a></li>
<li><a href="#">عنصر قائمة داخلية 5</a></li>
<li><a href="#">عنصر قائمة داخلية 6</a></li>
</ul>
</li>
<li><a href="#">عنصر قائمة رئيسية 4</a></li>
</ul>
نفس الفكرة في القائمة الطولية من خلال استدعاء معرف simple-vertical-menu لجلب إعدادات القائمة الطولية و منها يتم استخدام عناصر <ul> و <li> لعمل القائمة .
ملف التنسيق CSS :-
أما التنسيق باستخدام CSS فهو مثل التنسيق لأي قائمة أخرى يتم عملها باستخدام HTML من خلال التحكم بتنسيق عناصر ul, li, a و التي تعرض القائمة في HTML
body{
direction: rtl;
}
.ux-menu-container {
position: relative;
}
.ux-menu,
.ux-menu ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 1;
}
.ux-menu li {
position: relative;
float: right;
}
.ux-menu ul {
position: absolute;
top: 0;
left: 0;
}
.ext-border-box .ux-menu-ie-iframe,
.ext-ie7 .ux-menu-ie-iframe {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
display: none;
zoom: 1;
z-index: -1;
filter:mask();
}
.ux-menu-vertical .ux-menu-item-main {
clear: left;
}
.ux-menu a {
display: block;
position: relative;
text-decoration: none;
color: #432;
border-left: 1px solid #e3dad1;
border-top: 1px solid #e3dad1;
border-bottom: 1px solid #e3dad1;
background: #f3efec url('images/menu-item-bg.png') repeat;
font-size: 12px;
line-height: 12px;
padding: 10px 14px;
}
.ux-menu a.ux-menu-link-last {
border-right: 1px solid #e3dad1;
}
ux.menu ul a {
width: 100%;
}
.ux-menu a:focus,
.ux-menu a:hover,
.ux-menu a.ux-menu-link-hover {
border-color: #d2e3f4;
background: url(images/'menu-item-bg-over.png') repeat;
outline: 0;
}
.ext-ie .ux-menu-clearfix {
zoom: 1;
}
.ux-menu-clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.ux-menu a.ux-menu-link-parent {
padding-right: 24px;
min-width: 1px;
}
.ux-menu ul a,
.ux-menu.ux-menu-vertical a {
border-bottom: 0px;
border-right: 1px solid #e3dad1;
}
.ux-menu ul a.ux-menu-link-last,
.ux-menu.ux-menu-vertical a.ux-menu-link-last {
border-bottom: 1px solid #e3dad1;
}
.ux-menu-arrow {
display: block;
width: 8px;
height: 6px;
right: 10px;
top: 14px;
position: absolute;
background: url('images/menu-arrow-down.png') no-repeat;
font-size: 0;
}
.ux-menu.ux-menu-vertical .ux-menu-arrow,
.ux-menu ul .ux-menu-arrow {
width: 6px;
height: 8px;
top: 13px;
background: url('images/menu-arrow-right.png') no-repeat;
}
.ext-border-box .ux-menu-arrow {
top: 17px;
}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,
.ext-border-box .ux-menu ul .ux-menu-arrow {
top: 16px;
}
.ux-menu ul.ux-menu-hidden {
display: none;
}
http://www.abc4web.net/vb/../upload/images2/hxldffddqe.png (http://docma7moud.0fees.net/botta/ext-core-menu/menu.htm) http://www.abc4web.net/upload/images2/gp7wbnu3yk.png (http://www.abc4web.net/vb/attachment.php?attachmentid=1427&stc=1&d=1304323814)