11-09-16, 04:59 AM
السلام عليكم ورحمة الله وبركاته
بداية ارجو من اصحاب التعامل مع الويب بشكل عام الاهتمام بهذا القسم والمرور عليه من حين لاخر
للاسف ليس لدي الشيء الكثر لاقدمه لكن سأبدأ بعون الله من هنا ومشوار الالف ميل يبدأ بخطوة واحدة ونسأل الله أن لا تقف
بسم الله نبدأ:
سنتعامل مع مكتبات الـ JQuery اعذروني سأتخطى الحديث عنها وماهي و و و فلنبدأ من حيث انتهى الاخرون.
س: هل استطيع اجراء التغييرات على الصفحة دون الرجوع للحدث PostBack كما في Asp.net والانتظار حتى ينتهي . مثلا اخفاء
الزر بعد حدث Click ؟
ج: نعم تستطيع ذلك والامر ببساطة كالتالي :
*يجب ان نتعرف على هذا العنصر إما بنوعه او باسمه او باسم الكلاس الذي يأخذه CssClass.
كلنا نعلم هذا المخطط وهذه التاجات في HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
شغلنا راح يكون في منطقة الهيد"<head></head>
الاسكربت اللي الكود السابق مهم جداً لاستدعاء باقي الوظائف التي نحتاجها وتوجد العديد منها يختص كل منها بوظائف معينة
يمكن الحصول عليها من الموقع الخاص بهم
https://jquery.com/download/
وبعضهم يحب تضمينها ضمن ملفات المشروع فينشيء مجلد خاص ويسميه مثلا Js او Scripts
المهم ان تستدعيها قبل اجراء الوظائف الخاصة بها. فلتتابع معي
ترى اننا وضعنا فقط كود برمجي صغير اشبه ما يكون ب Form_Load او Page_Load فأنت تعرف مثلاً Sub New
الذي يعنى باالاحداث قبل تحميل العناصر على الصفحة او الفورم صح؟ لا هنا نحن نريد الاحداث تكون عندما تكون الصفحة جاهزة
وتم تحميل كافة العناصر بها Elements الان سنحتاج لوظيفة ندرجها داخل حدث الاستعداد الذي انشأناه فيكون شكل الاسكربت كالتالي
ومن الكود السابق ستكون انطلاقتنا اما لتعريف المتغيرات او استدعاء العناصر وتجهيز الاحداث كيفيما نحب كالتالي
بداية أحب التنويه على ان العمل الى الان بعيد عن ASP وعناصره الخاصة به فكل ما نحن فيه HTML اذا كنت تريد المتابعة معي
فخذ من صندوق الادوات الخاص ب HTML الذي ستجده اخر الادوات في برنامج الفيجوال دعنا نضيف input ونوعه Button
فيكون شكل كامل الصفحة كالتالي
كما تشاهد لدينا Button اسمه Button1
الان حتى نصل لهذا الزر في الاسكربت يكون كالتالي
لاحظ معي وجود الهاش قبل التسمية #
هنا اي اننا نوعز للكود ان لا يختار اي عنصر الا العنصر الذي اسمه Button1
وبعد نحدد اي حدث نريد؟ اخترنا الحدث Click ولدينا الكثير من الحداث ستكتشفها بنفسك
ماذا نريد ان يكون بعد ان يقوم المستخدم بضغط الزر؟ ليكن مثلا تغيير Val التي تشابه text في الفيجوال مثلا
سنجعل الزر تظهر عليه كلمة VB4arab
سنظيفة وظيفة الحدث
ثم نعزي للحدث التغيير الي سيطرأ على الزر بالشكل التالي
والان سيبصح شكل كامل الصفحة هكذا
طيب شغل الصفحة او اذا كنت نسخت الكود الى ملف مفكرة احفظه بصيغة html جرب الكود
الان اذا اردت اضافة اي اجراء يصاحب تغيير قيمة Val في الزر ركز على
لان اي اجراء تريد يصاحب ال Click سيكون بعده مباشرة
مثلا سنعطلة في الفيجوال مثلا Button1.Enabled=false
هنا الامر مشابه لكن باختلاف طفيف
سيكون كالتالي
وختاما سيكون كامل كود الصفحة بالشكل التالي
وأرجو ان يلاقي هذا الموضوع الدعم الحققي بايراد الامثلة في هذا الصدد Jquery Java Jax Json
خلوني اقول زي العصا السحرية اللي في كهف التنين
ومن اراد صفحة المثال فهي المرفقات
بالتوفيق
بداية ارجو من اصحاب التعامل مع الويب بشكل عام الاهتمام بهذا القسم والمرور عليه من حين لاخر
للاسف ليس لدي الشيء الكثر لاقدمه لكن سأبدأ بعون الله من هنا ومشوار الالف ميل يبدأ بخطوة واحدة ونسأل الله أن لا تقف
بسم الله نبدأ:
سنتعامل مع مكتبات الـ JQuery اعذروني سأتخطى الحديث عنها وماهي و و و فلنبدأ من حيث انتهى الاخرون.
س: هل استطيع اجراء التغييرات على الصفحة دون الرجوع للحدث PostBack كما في Asp.net والانتظار حتى ينتهي . مثلا اخفاء
الزر بعد حدث Click ؟
ج: نعم تستطيع ذلك والامر ببساطة كالتالي :
*يجب ان نتعرف على هذا العنصر إما بنوعه او باسمه او باسم الكلاس الذي يأخذه CssClass.
كلنا نعلم هذا المخطط وهذه التاجات في HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
شغلنا راح يكون في منطقة الهيد"<head></head>
PHP كود :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
يمكن الحصول عليها من الموقع الخاص بهم
https://jquery.com/download/
وبعضهم يحب تضمينها ضمن ملفات المشروع فينشيء مجلد خاص ويسميه مثلا Js او Scripts
المهم ان تستدعيها قبل اجراء الوظائف الخاصة بها. فلتتابع معي
PHP كود :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready();
</script>
الذي يعنى باالاحداث قبل تحميل العناصر على الصفحة او الفورم صح؟ لا هنا نحن نريد الاحداث تكون عندما تكون الصفحة جاهزة
وتم تحميل كافة العناصر بها Elements الان سنحتاج لوظيفة ندرجها داخل حدث الاستعداد الذي انشأناه فيكون شكل الاسكربت كالتالي
PHP كود :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {});
</script>
بداية أحب التنويه على ان العمل الى الان بعيد عن ASP وعناصره الخاصة به فكل ما نحن فيه HTML اذا كنت تريد المتابعة معي
فخذ من صندوق الادوات الخاص ب HTML الذي ستجده اخر الادوات في برنامج الفيجوال دعنا نضيف input ونوعه Button
فيكون شكل كامل الصفحة كالتالي
PHP كود :
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
});
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
</body>
</html>
الان حتى نصل لهذا الزر في الاسكربت يكون كالتالي
PHP كود :
<script>
$(document).ready(function () {
$('#Button1').click();
});
</script>
هنا اي اننا نوعز للكود ان لا يختار اي عنصر الا العنصر الذي اسمه Button1
وبعد نحدد اي حدث نريد؟ اخترنا الحدث Click ولدينا الكثير من الحداث ستكتشفها بنفسك
ماذا نريد ان يكون بعد ان يقوم المستخدم بضغط الزر؟ ليكن مثلا تغيير Val التي تشابه text في الفيجوال مثلا
سنجعل الزر تظهر عليه كلمة VB4arab
سنظيفة وظيفة الحدث
PHP كود :
<script>
$(document).ready(function () {
$('#Button1').click(function () { });
});
</script>
PHP كود :
<script>
$(document).ready(function () {
$('#Button1').click(function () { $('#Button1').val("VB4Arab"); });
});
</script>
PHP كود :
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#Button1').click(function () { $('#Button1').val("VB4Arab"); });
});
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
</body>
</html>
الان اذا اردت اضافة اي اجراء يصاحب تغيير قيمة Val في الزر ركز على
PHP كود :
$('#Button1').val("VB4Arab");
مثلا سنعطلة في الفيجوال مثلا Button1.Enabled=false
هنا الامر مشابه لكن باختلاف طفيف
سيكون كالتالي
PHP كود :
$('#Button1').prop('disabled', true);
PHP كود :
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#Button1').click(function () {
$('#Button1').val("VB4Arab");
$('#Button1').prop('disabled', true);
});
});
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
</body>
</html>
خلوني اقول زي العصا السحرية اللي في كهف التنين
ومن اراد صفحة المثال فهي المرفقات
بالتوفيق
سبحان الله والحمدلله ولا إله إلا الله والله أكبر
اللهم اغْفِرْ لِلمؤمنين والمؤمنات والمسلمين والمسلمات الأحياء منهم والأموات
