استخدام ادوات Jquery Ui في مشروع Asp.net
اولا : أنشاء مستر بيج داخل مشروع Asp.net
سوف نستخدم ادوات Jquery ui مع المستر بيج وذلك لجعل استخدامها اسهل , فنحن نحتاج فقط لوضع الريفرنس الخاص بها في المستر بيج , وبعد ذلك نستخدم الادوات في باقي الصفحات التابع لهذه المستر بيج ,
بعد ان قمنا بانشاء المستر بيج كما في الصورة السابقة , نحتاج الان الي وضع الملفات الخاصة بالجي كويري والسي اس اس لكني نستطيع استخدامها بطريقة صحيحة , تذكرو اننا سنقوم بوضعها في صفحة المستر بيج .
الصور التالية توضح الملفات التي سنستخدمها وهي موجودة في مشروع ال asp.net
ثلاث ملفات هامة , ملفين جافا سكربت , وملف سي اس اس كما موضع بالصورتين السابقتين , الان عرفتنا مكان وجود الملفات , قم بسحبها في تاج الهيد في صفحة المستر بيج كما في الكود التالي
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
ثم في تاج الهيد ايضا نقوم بكتابة الكود الخاص باستخدام اداتي التاب والاكورديون
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
$("#accordion").accordion();
});
</script>
ثانيا كتابة الكود الخاص باداة التاب والاكورديون (كود التصميم )
يجب علينا اولا انشاء صفحة ونقوم بجعلها داخل المستر بيج التي قمنا بانشاؤها سابقا
قم بعد ذلك نقوم بكتابة كود التصميم الخاص باداتي التاب واالكورديون
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1">
tab1 conent
</div>
<div id="tabs-2">
tab2 content
</div>
<div id="tabs-3">
tab3 content
</div>
</div>
<div id="accordion">
<h3>First</h3>
<div>div one content</div>
<h3>Second</h3>
<div>div two content</div>
<h3>Third</h3>
<div>div three content</div>
</div>
ثالثا : استخدام المزيد من الادوات
لاستخدام المزيد من الادوات قم بالدخول علي الموقع التالي
http://jqueryui.com/
يمكنك قراءة الشرح الخاص بكل اداة او تحميل الادوات واستخدام الامثلة الجاهزة علي كل اداة
يمكنك تحميل المثال العملي الذي قمنا بشرحه من هنا
بالتوفيق ان شاء الله
