الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

Jquery Accordion يحتاج إلى تطوير : مساعدة

بدأه MORPHUS في 21 فبراير 2009 · 7 رد · 1,131 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم

أردت تطوير كود Jquery Accordion موجود أصلا على هذا الرابط :

http://berndmatzner.de/jquery/hoveraccordion/

وهو يتسم بالميزات التالية :

- يحفظ لك اللنك الذي ضغطت عليه ويظهره بسمة مختلفة حتى ولو انتقلت إلى صفحة أخرى

- صغر الحجم وكفاءته

غير أن الكود يشتغل فقط على 2 مستويات :

- عنوان

- رابط

وأردت تطويره بحيث يشتغل على ثلاثة مستويات :

- عنوان

- عنوان فرعي

- رابط

ولكن للأسف فشلت فشلا ذريعا فهل من مساعدة ؟

أنا وضعت الملفات الخاصة بتشغيل الكود في المرفقات حتى أسهل لمن يريد أن يساعد أن الحصول على الكود المصدري (يمكن تحويل الصفحة من index.php إلى index.html ) فهي لا تحتاج إلى سيرفر للتشغير.

جزاكم الله خيرا

accordion.rar

تم تعديل هذه المشاركة بواسطة MORPHUS في 21 فبراير 2009 في 03:34

#2

لايكفي التعديل على كود HTML فقط بل عليك أن تعدل بال jquery.hoveraccordion أيضاً

#3
خالد_الحوراني كتب:
لايكفي التعديل على كود HTML فقط بل عليك أن تعدل بال jquery.hoveraccordion أيضاً

هذا صحيح !!! وهنالك تكمن المشكلة

حيث لا يكفي التعديل على Html او CSS ، فالمشكلة في ملف javascript والتي أنا مبتدئ جدا فيها. غير أن المشروع الذي أستخدمه لا ينتظرني حتى أتعلم jQuery !

شكرا على ردك

#4

جرب accordion الذي يأتي مع jQuery UI أفضل بكثير

أو عدل بالملف السابق وإذا واجهتك مشاكل أخبرني، الجافا سكربت مثلها مثل أي لغة برمجية مع بعض الإضافات فقط

#5

السلام عليكــم ورحمـة الله وبركاتــة ،،

عندي كود عدلت عليه من فترة به نفس طلبك لو نفع معاك غير فقط الألوان 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	last=null;
	$(".msg_body").hide();
	$(".sub_msg_body").hide();

	$(".msg_head").mouseover(function(){
		$(this).next(".msg_body").slideToggle(600).siblings(".msg_body:visible").slideUp("600");			
		$(this).toggleClass("active");
		$(this).siblings(".msg_head").removeClass("active");		
	});

	$(".sub_head").mouseover(function(){
		$(this).next(".sub_msg_body").slideToggle(600);	
	});	

	$(".msg_body .link,.sub_msg_body .link").click(function(){
		$(last).css({'background-color':'#CDC8B1', 'border-left': '5px solid #ccc'});
		$(this).css({'background-color':'#ffe', 'border-left': '5px solid #ccc'});
		last=this;
	});	


});
</script>
<style type="text/css">
body {
	margin: 10px auto;
	width: 570px;
	font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.msg_list {
	margin: 0px;
	padding: 0px;
	width: 383px;
}
p {
	padding: 0 0 1em;
}
.msg_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color:#FFCCCC;
	margin:1px;
}
.msg_body {
	padding: 5px 10px 15px;
	background-color:#F4F4F8;
}
.sub_head {
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#7AC5CD;	
}
.sub_msg_body {
	padding: 5px 10px 15px;
	background-color:#F4F4F8;
}
.msg_body .link{		  
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#7AC5CD;			
}
.sub_msg_body .link{	  
	padding: 5px 10px;
	cursor: pointer;	
	background-color:#CDC8B1;			
}
a {text-decoration:none; }
.active {background-color:#A2B5CD;}

</style>
</head>
<body>
<div align="center">
  <p>Click on the each news head to toggle
</p>

</div>
<div class="msg_list">
		<p class="msg_head">Header-1</p>		
		<div class="msg_body">
		  <div class="link"><a href='#'>link-1</a></div> 
		  <p class="sub_head">Sub-Header-1 </p>	
		  <div class="sub_msg_body">
			<div class="link"><a href='#'>link-1</a></div><br />
			<div class="link"><a href='#'>link-2</a></div>
		  </div>			  
		  <div class="link"><a href='#'>link-2</a></div> 
		</div>

		<p class="msg_head">Header-2</p>		
		<div class="msg_body">
		  <div class="link"><a href='#'>link-1</a></div><br/>			  
		  <div class="link"><a href='#'>link-2</a></div> 
		</div>	
</div>
</body>
</html>

I Say Nothing

#6

يعطيكي العافية

كود ممتاز جدا !!!

أنا جربته بعد ما غيرت الستايل تبعه، ولكن تبقى جزئية تنقصه وهي لما أروح من صفحة لصفحة، تنغلق القائمة والزائر لا يعرف أي رابط هو اللي ضغط عليه آخر مرة.

باختصار :

- عندي كود يحافظ على الرابط اللي ضغطت عليه ولكن يشتغل على 2 مستويات

- وعندي كود يشتغل على 3 مستويات ولكن لا يحافظ على الرابط الذي ضغطت عليه

:happy:

أنا أشكركم على اهتمامكم بالموضوع.

وإن شاء الله نصل إلى نتيجة

#7
اقتباس
ولكن تبقى جزئية تنقصه وهي لما أروح من صفحة لصفحة، تنغلق القائمة والزائر لا يعرف أي رابط هو اللي ضغط عليه آخر مرة.

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

امكن اكون مافهمت المشكلة صح .. ولو نفس اللي قلت يبقى لو شخص جرب ويقولنا اذا وصل لنفس النتيجة .

I Say Nothing

#8

أنا وضعت الكود بدون أية تغييرات (فقط أضفت الروابط عوض عن # )

ويمكن تجربة الصفحة على هذا الرابط

http://www.rosamkg.com/accordion/index.php

وأشكرك مرة أخرى على مجهودك

مواضيع مشابهة