• 0
She

اخفاء واظهار اجزاء من الصفحة hide()

سؤال

اخواتي الكرام

احتاج مساعدتكم حاجة ماسة فلي 3 اسابعي من العمل والدراسة للجافاسكريبت الا اني لم اتقن بعد

 

دلي هذا الكود المراد منه اخفاء جزء واظهار جزء من الصفحة بناء على ما تم اختياره في الدرب داون ليست

 

الا انه الا يعمل فهل من مرشد ينقذني

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryTest._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">    <title></title>    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">    </script> <script type="text/javascript">             $(document).ready(function () {                    var isPostBackObject = document.getElementById('isPostBack');            if (isPostBackObject == "1") {                $("#div2").hide();                $("#div3").hide();                $("#div4").hide();                                    };                        $("#Button1").click(function () {                var rbvalue = $("input[name='<%=Intent.UniqueID%>']:radio:checked").val();                if (rbvalue == "Confirm") {                                       $("#div2").show();                    $("#div3").hide();                    $("#div4").hide();                   // $("#Panel1").show();                } else if (rbvalue == "Postpone") {                                       $("#div3").show();                    $("#div4").hide();                    $("#div2").hide();                                   } else if (rbvalue == "Decline") {                                      $("#div4").show();                    $("#div2").hide();                    $("#div3").hide();                } else {                    alert("How'd you get here? Who sent you?");                }            });                   });                   });</script></head><body>    <form id="form1" runat="server">    <div>        <div id="HasBuffet">                      <div id="div1">                div number 1 :                <br />                <asp:RadioButtonList runat="server" ID="Intent">                    <asp:ListItem Value="Confirm">show div2</asp:ListItem>                    <asp:ListItem Value="Postpone">show div3</asp:ListItem>                    <asp:ListItem Value="Decline">show div 4 </asp:ListItem>                </asp:RadioButtonList>                <asp:Button ID="Button1" runat="server" Text="Button" />            </div>                           <div id="div2">                    <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>                </div>                      <div id="div3">                <asp:DropDownList ID="DropDownList1" runat="server">                </asp:DropDownList>            </div>            <div id="div4">                <asp:Label ID="Label1" runat="server" Text="صبر جميل"></asp:Label>            </div>        </div>    </div>    </form></body></html>

code bihained C#

 

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace JQueryTest{    public partial class _Default : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {                       if (IsPostBack)            {                ClientScript.RegisterHiddenField("isPostBack", "1");            }                                          }    }}

 

أو تجدون الابلكشن هنا

http://www.4shared.com/rar/DDtcU9nP/jquerytest_2.html

 

لك الشكر الجزيل

تم تعديل بواسطه She
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

2 إجابة على هذا السؤال .

  • 0

السلام عليكم

 

أنت تستخدمي مكتبة jQuery وأهم ما يميز هذه المكتبة عنصر الإختيار أو الـ selector , فإتقان التعامل مع هذا الجزء هو أساس التعامل مع هذه المكتبة .

 

نظرة سريعة على الـ selector في jQuery فمن خلال ما تقدمه هذه المكتبة يمكن الوصول لعناصر HTML بسهولة وبكود قصير , فشعار هذه المكتبة أكتب القليل ونفذ الكثير .

- الـ selector أو المختار -كترجمة له وهو يعني الذي من خلاله يتم إختيار عناصر HTML - ببساطة يتكون من الشكل التالي $("") وداخل علامتي الإقتباس المفردتين أو الزوجيتين يتم وضع العناصر المراد الوصول إليها .

* أمثلة سريعة على الـ selector :

$("div")

- هذا يعني إختيار جميع عناصر الـ div الموجودة في الوثيقة .

 

--------------------------------------------------------------------

$("#myid")

- هذا يعني إختيار العناصر التي تحمل المعرف id ذو القيمة myid فقط .

 

---------------------------------------------------------------------

$(".myclass")

- هذا يعني إختيار العناصر التي تحمل الخاصية class ذات القيمة myclass فقط .

 

-----------------------------------------------------------------------

 

وبصورة عامة يمكن الوصول لعناصر HTML من خلال خصائصها بإستخدام الشكل العام التالي :

$("element[attribute=value]")

- فـ element تعني أي عنصر من عناصر اللغة الهيكلية HTML كـ div و span و input و h1 و باقي العناصر

- الـ attribute هي الخاصية للعنصر كـ id و class و  name و title و value وغيرها من الخصائص وأيضاً لا يشترط أن تتقيد بالخصائص الخاصة بكل عنصر من عناصر HTML فيمكن لك أن تضع خصائصك الخاصة والوصول إليها بنفس الطريقة كأن تضع خاصية باسمك مثلاً .

- الـ value وهي القيمة التي تأخذها الخاصية .

 

وعلى هذا يمكن لنا استخدام هذه الطريقة بشكل عام لكل العناصر كالتالي :

$("div[id=myid]")

- هذا يعني إختيار العناصر من النوع div التي تحمل المعرف id ذو القيمة myid فقط , وهي تساوي الشكل التالي :

$("div#myid")

-----------------------------------------------------

$("span[class=myclass]")

- هذا يعني إختيار العناصر من النوع span التي تحمل الخاصية class ذات القيمة myclass فقط وهي تساوي الكود التالي :

$("span.myclass")

---------------------------------------------------

$("div[ahmed=yes]")

- هذا يعني إختيار العناصر من النوع div التي تحمل الخاصية ahmed ذات القيمة yes

 

----------------------------------------------------

$("#myid div")

- لاحظ المسافة الفارغة , فهذا يعني إختيار جميع العناصر من النوع div التي تقع داخل أي عنصر يحتوي على الخاصية id ذات القيمة myid - حتى وإن وجدت عناصر الـ div داخل عناصر أخرى أي مع تجاهل درجة وجودها -

----------------------------------------------------

$("#myid>div")

- فهذا يعني إختيار جميع العناصر من النوع div التي تقع داخل أي عنصر يحتوي على الخاصية id ذات القيمة myid - ولكن مع إعتبار الدرجة أي يجب أن تكون العناصر div أبناء مباشرين لهذا العنصر ولا يكونوا داخل عناصر أخرى -

-------------------------------------------------

$("#myid,.myclass,div[id=myid],span[name=myspan]")

- إخيار أكثر من عنصر دفعة واحدة وتتم من خلال الفصل بين العناصر بإستخادم الفاصلة .

 

* هذه كانت أهم طرق الـ selector للوصول للعناصر وهناك طرق أخرى وإستخدامات أخرى يمكن مشاهدتها على هذا الرابط .

 

- بعد إختيار الـ selector يتم تطبيق الدوال عليه كـ hide و show و val لجلب القيمة و باقي دوال مكتبة jQuery .

 

نعود لموضوع سؤالك أنت كتبت الكود التالي بإستخدا javaScript مباشراً :

var isPostBackObject = document.getElementById('isPostBack');

- وهو يكافي الشكل التالي بإستخدام jQuery :

var isPostBackObject = $('#isPostBack');

- ولكن هذا عبارة عن selector أي كائن في javaScript , فماذا تريدي من هذا الكائن تحديداً ؟

- مثلاً تريدي قيمته سيكون الكود كالتالي :

var isPostBackObject = $('#isPostBack');alert(isPostBackObject.val());

أو بشكل مباشر كالتالي وهو الأفضل :

alert($('#isPostBack').val());

 

- نفرض أن هذا الـ selector يحتوي على خاصية باسم name وتريدي الحصول على قيمة هذة الخاصية سنستخدم الدالة attr  للحصول على قيمة الخاصية أو إعادة ضبطها ويكون الشكل كالتالي :

alert($('#isPostBack').attr("name"));

- وهكذا طالما حددنا الـ selector الذي نريده نستخدم معه الدالة التي نحتاجها .

 

- عذراً فأنا لم أتعامل مع asp من قبل فسأتحدث عن الأمر بشكل عام .

 

- أنت تسألي عن إخفاء وإظهار عناصر على حسب تغيير قيم القائمة المنسدلة لنفرض أن القائمة المنسدلة المعرف id لها هو dropMenu فتوجد دالة change في مكتبة jQuery لتتبع حدث تغيير القائمة ويكون الكود كالتالي :

$("#dropMenu").change(function (){    alert($(this).val());});

- وكلمة this تعني الـ selector الحالي .

 

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

ملاحظة زر button

بسببه لا يعمل فهو يقوم بالاظهار والأخفاء في نفس الوقت

في حال اسبدلت الزر بنص يعمل معي 

 

مع بعض التعديلا وهي

 

 

 $(document).ready(function (isPostBack(

 

و كذلك

 

 

 

 

 

if (isPostBackObject = 1)

اذ يبدو انه لم يكن string كما كنت اظن

تم تعديل بواسطه She
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
زوار
This topic is now closed to further replies.

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .