jquery προβλημμα!

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

jquery προβλημμα!

Δημοσίευση από abeautifulmind » 26 Οκτ 2010 21:14

Καλησπέρα έχω φτιάξει αυτό το admin panel
<!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" />
<title>Untitled Document</title>
<script src="js/jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
//Adjust panel height
$.fn.adjustPanel = function(){
$(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset sub-panel and ul height

var windowHeight = $(window).height(); //Get the height of the browser viewport
var panelsub = $(this).find(".subpanel").height(); //Get the height of sub-panel
var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of sub-panel)
var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel

if ( panelsub >= panelAdjust ) { //If sub-panel is taller than max height...
$(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust sub-panel to max height
$(this).find("ul").css({ 'height' : panelAdjust}); ////Adjust subpanel ul to new size
}
else if ( panelsub < panelAdjust ){ //If sub-panel is smaller than max height...
$(this).find("ul").css({ 'height' : 'auto'}); //Set sub-panel ul to auto (default size)
}
};

//Execute function on load
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

//Each time the viewport is adjusted/resized, execute the function
$(window).resize(function () {
$("#chatpanel").adjustPanel();
$("#alertpanel").adjustPanel();
});
//Click event on Chat Panel and Alert Panel
$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
$(this).next(".subpanel").hide(); //Hide active subpanel
$("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
}
else { //if subpanel is not active...
$(".subpanel").hide(); //Hide all subpanels
$(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
$("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
$(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
}
return false; //Prevent browser jump to link anchor
});

//Click event outside of subpanel
$(document).click(function() { //Click anywhere and...
$(".subpanel").hide(); //hide subpanel
$("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
});
$('.subpanel ul').click(function(e) {
e.stopPropagation(); //Prevents the subpanel ul from closing on click
});

//Show/Hide delete icons on Alert Panel
$("#alertpanel li").hover(function() {
$(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
},function() {
$(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
});
</script>
<style type="text/css">
#footpanel {
position: fixed;
bottom: 0; left: 0;
z-index: 9999; /*--Keeps the panel on top of all other elements--*/
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-bottom: none;
width: 94%;
margin: 0 3%;
}
#footpanel ul {
padding: 0; margin: 0;
float: left;
width: 100%;
list-style: none;
border-top: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
font-size: 1.1em;
}
#footpanel ul li{
padding: 0; margin: 0;
float: left;
position: relative;
}
#footpanel ul li a{
padding: 5px;
float: left;
text-indent: -9999px; /*--For text replacement - Shove text off of the page--*/
height: 16px; width: 16px;
text-decoration: none;
color: #333;
position: relative;
}
html #footpanel ul li a:hover{ background-color: #fff; }
html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
background-color: #fff;
height: 17px;
margin-top: -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
border: 1px solid #555;
border-top: none;
z-index: 200; /*--Keeps the active link on top of the sub-panel--*/
position: relative;
}
#footpanel a.home{
background: url(home.png) no-repeat 15px center;
width: 2px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
a.profile{ background: url(user.png) no-repeat center center; }
a.editprofile{ background: url(ergaleia.png) no-repeat center center; }
a.contacts{ background: url(address-book.png) no-repeat center center; }
a.messages{ background: url(mail.png) no-repeat center center; }
a.playlist{ background: url(document-music.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
background: url(chat.png) no-repeat 15px center;
width: 126px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding-left: 40px;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel { float: right; } /*--Right align the chat and alert panels--*/
#footpanel a small {
text-align: center;
width: 70px;
background: url(arrow-270-medium.gif) no-repeat center bottom;
padding: 5px 5px 11px;
display: none; /*--Hide by default--*/
color: #000000;
font-size: 13px;
text-indent: 0;
}
#footpanel a:hover small{
display: block; /*--Show on hover--*/
position: absolute;
top: -35px; /*--Position tooltip 35px above the list item--*/
left: 50%;
margin-left: -40px; /*--Center the tooltip--*/
z-index: 9999;
}
#footpanel ul li div a { /*--Reset link style for sub-panel links--*/
text-indent: 0;
width: auto;
height: auto;
padding: 0;
float: none;
color: #00629a;
position: static;
}
#footpanel ul li div a:hover { text-decoration: underline; } /*--Reset hover style for sub-panel links--*/
#footpanel .subpanel {
position: absolute;
left: 0; bottom: 27px;
display: none; /*--Hide by default--*/
width: 198px;
border: 1px solid #555;
background: #fff;
overflow: hidden;
}
#footpanel h3 {
background: #526ea6;
padding: 5px 10px;
color: #fff;
font-size: 1.1em;
cursor: pointer;
}
#footpanel h3 span { /*--Right aligned "-" icon--*/
font-size: 1.5em;
float: right;
line-height: 0.6em;
font-weight: normal;
}
#footpanel .subpanel ul{
padding: 0; margin: 0;
background: #fff;
width: 100%;
overflow: auto;
padding-bottom: 2px;
}
#footpanel .subpanel li{
float: none; /*--Reset float--*/
display: block;
padding: 0; margin: 0;
overflow: hidden;
clear: both;
background: #fff;
position: static; /*--Reset relative positioning--*/
font-size: 0.9em;
}
#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
padding: 5px;
background: #fff;
color: #777;
float: left;
}
#chatpanel .subpanel li a img {
float: left;
margin: 0 5px;
}
#chatpanel .subpanel li a{
padding: 3px 0; margin: 0;
line-height: 22px;
height: 22px;
background: #fff;
display: block;
}
#chatpanel .subpanel li a:hover {
background: #3b5998;
color: #fff;
text-decoration: none;
}
#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
border-top: 1px solid #f0f0f0;
display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
background: url(delete_x.gif) no-repeat;
float: right;
width: 13px; height: 14px;
margin: 5px;
text-indent: -9999px;
visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
text-align: right;
padding: 5px 10px 5px 0;
}
</style>
</head>

<body >
<div id="footpanel">
<ul id="mainpanel">
<li><a href="#" class="home"><small>Αρχική</small></a></li>
<li><a href="#" class="profile">View Profile <small>Προφίλ</small></a></li>
<li><a href="#" class="editprofile">Edit Profile <small>Επεξεργασία προφίλ</small></a></li>
<li><a href="#" class="contacts">Contacts <small>Επαφές</small></a></li>
<li><a href="#" class="messages">Messages (10) <small>Μηνύματα</small></a></li>
<li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
<li><a href="#" class="videos">Videos <small>Bίντεο</small></a></li>
<li id="alertpanel">
<a href="#" class="alerts">Alerts</a>
<div class="subpanel">
<h3><span> &ndash; </span>Notifications</h3>
<ul>
<li class="view"><a href="#">View All</a></li>
<li>
<a href="#" class="delete">X</a>
<p><!--Content--></p>
</li>
<li>
<a href="#" class="delete">X</a>
<p><!--Content--></p>
</li>
</ul>
</div>
</li>
<li id="chatpanel">
<a href="#" class="chat">Συνομιλία<strong></strong> </a>
<div class="subpanel">
<h3><span> &ndash; </span>Friends Online</h3>
<ul>
<li><span>Family Members</span></li>
<li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
<li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
και όταν κάνω κλικ στο Συνομιλία έπρεπε να ανοίγει το παράθυρο με τους χρήστες σύμφωνα με :
http://www.sohtanaka.com/web-design/fac ... ment-13075
αλλά δεν ανοίγει και δεν μου βγάζει κανένα σφάλμα μήπως πρέπει να καλέσω κάπου το
javascript που έχω? π.χ. στο <li id="chatpanel">
<a href="#" class="chat">Συνομιλία<strong></strong> </a>
να βάλω κάτι μέσα στο a href="#" ?
μπορεί κανείς να βοηθήσει?

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

jquery προβλημμα!

Δημοσίευση από dimsis » 26 Οκτ 2010 21:22

Μετά το <script language="javascript">
στη γραμμή 8 πρέπει να βάλεις
$(document).ready(function(){

και πριν το </script> }); και θα παίξει...

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;

//Adjust panel height
$.fn.adjustPanel = function&#40;&#41;&#123;
$&#40;this&#41;.find&#40;"ul, .subpanel"&#41;.css&#40;&#123; 'height' &#58; 'auto'&#125;&#41;; //Reset sub-panel and ul height

var windowHeight = $&#40;window&#41;.height&#40;&#41;; //Get the height of the browser viewport
var panelsub = $&#40;this&#41;.find&#40;".subpanel"&#41;.height&#40;&#41;; //Get the height of sub-panel
var panelAdjust = windowHeight - 100; //Viewport height - 100px &#40;Sets max height of sub-panel&#41;
var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel

if &#40; panelsub >= panelAdjust &#41; &#123; //If sub-panel is taller than max height...
$&#40;this&#41;.find&#40;".subpanel"&#41;.css&#40;&#123; 'height' &#58; panelAdjust &#125;&#41;; //Adjust sub-panel to max height
$&#40;this&#41;.find&#40;"ul"&#41;.css&#40;&#123; 'height' &#58; panelAdjust&#125;&#41;; ////Adjust subpanel ul to new size
&#125;
else if &#40; panelsub < panelAdjust &#41;&#123; //If sub-panel is smaller than max height...
$&#40;this&#41;.find&#40;"ul"&#41;.css&#40;&#123; 'height' &#58; 'auto'&#125;&#41;; //Set sub-panel ul to auto &#40;default size&#41;
&#125;
&#125;;

//Execute function on load
$&#40;"#chatpanel"&#41;.adjustPanel&#40;&#41;; //Run the adjustPanel function on #chatpanel
$&#40;"#alertpanel"&#41;.adjustPanel&#40;&#41;; //Run the adjustPanel function on #alertpanel

//Each time the viewport is adjusted/resized, execute the function
$&#40;window&#41;.resize&#40;function &#40;&#41; &#123;
$&#40;"#chatpanel"&#41;.adjustPanel&#40;&#41;;
$&#40;"#alertpanel"&#41;.adjustPanel&#40;&#41;;
&#125;&#41;;
//Click event on Chat Panel and Alert Panel
$&#40;"#chatpanel a&#58;first, #alertpanel a&#58;first"&#41;.click&#40;function&#40;&#41; &#123; //If clicked on the first link of #chatpanel and #alertpanel...
alert&#40;'ok'&#41;;
if&#40;$&#40;this&#41;.next&#40;".subpanel"&#41;.is&#40;'&#58;visible'&#41;&#41;&#123; //If subpanel is already active...
$&#40;this&#41;.next&#40;".subpanel"&#41;.hide&#40;&#41;; //Hide active subpanel
$&#40;"#footpanel li a"&#41;.removeClass&#40;'active'&#41;; //Remove active class on the subpanel trigger
&#125;
else &#123; //if subpanel is not active...
$&#40;".subpanel"&#41;.hide&#40;&#41;; //Hide all subpanels
$&#40;this&#41;.next&#40;".subpanel"&#41;.toggle&#40;&#41;; //Toggle the subpanel to make active
$&#40;"#footpanel li a"&#41;.removeClass&#40;'active'&#41;; //Remove active class on all subpanel trigger
$&#40;this&#41;.toggleClass&#40;'active'&#41;; //Toggle the active class on the subpanel trigger
&#125;
return false; //Prevent browser jump to link anchor
&#125;&#41;;

//Click event outside of subpanel
$&#40;document&#41;.click&#40;function&#40;&#41; &#123; //Click anywhere and...
$&#40;".subpanel"&#41;.hide&#40;&#41;; //hide subpanel
$&#40;"#footpanel li a"&#41;.removeClass&#40;'active'&#41;; //remove active class on subpanel trigger
&#125;&#41;;
$&#40;'.subpanel ul'&#41;.click&#40;function&#40;e&#41; &#123;
e.stopPropagation&#40;&#41;; //Prevents the subpanel ul from closing on click
&#125;&#41;;

//Show/Hide delete icons on Alert Panel
$&#40;"#alertpanel li"&#41;.hover&#40;function&#40;&#41; &#123;
$&#40;this&#41;.find&#40;"a.delete"&#41;.css&#40;&#123;'visibility'&#58; 'visible'&#125;&#41;; //Show delete icon on hover
&#125;,function&#40;&#41; &#123;
$&#40;this&#41;.find&#40;"a.delete"&#41;.css&#40;&#123;'visibility'&#58; 'hidden'&#125;&#41;; //Hide delete icon on hover out
&#125;&#41;;

&#125;&#41;;

</script>
<style type="text/css">
#footpanel &#123;
	position&#58; fixed;
	bottom&#58; 0;
	left&#58; 0;
	z-index&#58; 9999; /*--Keeps the panel on top of all other elements--*/
	background&#58; #e3e2e2;
	border&#58; 1px solid #c3c3c3;
	border-bottom&#58; none;
	width&#58; 94%;
	margin&#58; 0 3%;
&#125;
#footpanel ul &#123;
	padding&#58; 0;
	margin&#58; 0;
	float&#58; left;
	width&#58; 100%;
	list-style&#58; none;
	border-top&#58; 1px solid #fff; /*--Gives the bevel feel on the panel--*/
	font-size&#58; 1.1em;
&#125;
#footpanel ul li &#123;
	padding&#58; 0;
	margin&#58; 0;
	float&#58; left;
	position&#58; relative;
&#125;
#footpanel ul li a &#123;
	padding&#58; 5px;
	float&#58; left;
	text-indent&#58; -9999px; /*--For text replacement - Shove text off of the page--*/
	height&#58; 16px;
	width&#58; 16px;
	text-decoration&#58; none;
	color&#58; #333;
	position&#58; relative;
&#125;
html #footpanel ul li a&#58;hover &#123;
	background-color&#58; #fff;
&#125;
html #footpanel ul li a.active &#123; /*--Active state when sub-panel is open--*/
	background-color&#58; #fff;
	height&#58; 17px;
	margin-top&#58; -2px; /*--Push it up 2px to attach the active button to sub-panel--*/
	border&#58; 1px solid #555;
	border-top&#58; none;
	z-index&#58; 200; /*--Keeps the active link on top of the sub-panel--*/
	position&#58; relative;
&#125;
#footpanel a.home &#123;
	background&#58; url&#40;home.png&#41; no-repeat 15px center;
	width&#58; 2px;
	padding-left&#58; 40px;
	border-right&#58; 1px solid #bbb;
	text-indent&#58; 0; /*--Reset text indent since there will be a combination of both text and image--*/
&#125;
a.profile &#123;
	background&#58; url&#40;user.png&#41; no-repeat center center;
&#125;
a.editprofile &#123;
	background&#58; url&#40;ergaleia.png&#41; no-repeat center center;
&#125;
a.contacts &#123;
	background&#58; url&#40;address-book.png&#41; no-repeat center center;
&#125;
a.messages &#123;
	background&#58; url&#40;mail.png&#41; no-repeat center center;
&#125;
a.playlist &#123;
	background&#58; url&#40;document-music.png&#41; no-repeat center center;
&#125;
a.videos &#123;
	background&#58; url&#40;film.png&#41; no-repeat center center;
&#125;
a.alerts &#123;
	background&#58; url&#40;newspaper.png&#41; no-repeat center center;
&#125;
#footpanel a.chat &#123;
	background&#58; url&#40;chat.png&#41; no-repeat 15px center;
	width&#58; 126px;
	border-left&#58; 1px solid #bbb;
	border-right&#58; 1px solid #bbb;
	padding-left&#58; 40px;
	text-indent&#58; 0; /*--Reset text indent since there will be a combination of both text and image--*/
&#125;
#footpanel li#chatpanel, #footpanel li#alertpanel &#123;
	float&#58; right;
&#125; /*--Right align the chat and alert panels--*/
#footpanel a small &#123;
	text-align&#58; center;
	width&#58; 70px;
	background&#58; url&#40;arrow-270-medium.gif&#41; no-repeat center bottom;
	padding&#58; 5px 5px 11px;
	display&#58; none; /*--Hide by default--*/
	color&#58; #000000;
	font-size&#58; 13px;
	text-indent&#58; 0;
&#125;
#footpanel a&#58;hover small &#123;
	display&#58; block; /*--Show on hover--*/
	position&#58; absolute;
	top&#58; -35px; /*--Position tooltip 35px above the list item--*/
	left&#58; 50%;
	margin-left&#58; -40px; /*--Center the tooltip--*/
	z-index&#58; 9999;
&#125;
#footpanel ul li div a &#123; /*--Reset link style for sub-panel links--*/
	text-indent&#58; 0;
	width&#58; auto;
	height&#58; auto;
	padding&#58; 0;
	float&#58; none;
	color&#58; #00629a;
	position&#58; static;
&#125;
#footpanel ul li div a&#58;hover &#123;
	text-decoration&#58; underline;
&#125; /*--Reset hover style for sub-panel links--*/
#footpanel .subpanel &#123;
	position&#58; absolute;
	left&#58; 0;
	bottom&#58; 27px;
	display&#58; none; /*--Hide by default--*/
	width&#58; 198px;
	border&#58; 1px solid #555;
	background&#58; #fff;
	overflow&#58; hidden;
&#125;
#footpanel h3 &#123;
	background&#58; #526ea6;
	padding&#58; 5px 10px;
	color&#58; #fff;
	font-size&#58; 1.1em;
	cursor&#58; pointer;
&#125;
#footpanel h3 span &#123; /*--Right aligned "-" icon--*/
	font-size&#58; 1.5em;
	float&#58; right;
	line-height&#58; 0.6em;
	font-weight&#58; normal;
&#125;
#footpanel .subpanel ul &#123;
	padding&#58; 0;
	margin&#58; 0;
	background&#58; #fff;
	width&#58; 100%;
	overflow&#58; auto;
	padding-bottom&#58; 2px;
&#125;
#footpanel .subpanel li &#123;
	float&#58; none; /*--Reset float--*/
	display&#58; block;
	padding&#58; 0;
	margin&#58; 0;
	overflow&#58; hidden;
	clear&#58; both;
	background&#58; #fff;
	position&#58; static; /*--Reset relative positioning--*/
	font-size&#58; 0.9em;
&#125;
#chatpanel .subpanel li &#123;
	background&#58; url&#40;dash.gif&#41; repeat-x left center;
&#125;
#chatpanel .subpanel li span &#123;
	padding&#58; 5px;
	background&#58; #fff;
	color&#58; #777;
	float&#58; left;
&#125;
#chatpanel .subpanel li a img &#123;
	float&#58; left;
	margin&#58; 0 5px;
&#125;
#chatpanel .subpanel li a &#123;
	padding&#58; 3px 0;
	margin&#58; 0;
	line-height&#58; 22px;
	height&#58; 22px;
	background&#58; #fff;
	display&#58; block;
&#125;
#chatpanel .subpanel li a&#58;hover &#123;
	background&#58; #3b5998;
	color&#58; #fff;
	text-decoration&#58; none;
&#125;
#alertpanel .subpanel &#123;
	right&#58; 0;
	left&#58; auto; /*--Reset left positioning and make it right positioned--*/
&#125;
#alertpanel .subpanel li &#123;
	border-top&#58; 1px solid #f0f0f0;
	display&#58; block;
&#125;
#alertpanel .subpanel li p &#123;
	padding&#58; 5px 10px;
&#125;
#alertpanel .subpanel li a.delete &#123;
	background&#58; url&#40;delete_x.gif&#41; no-repeat;
	float&#58; right;
	width&#58; 13px;
	height&#58; 14px;
	margin&#58; 5px;
	text-indent&#58; -9999px;
	visibility&#58; hidden; /*--Hides by default but still takes up space &#40;not completely gone like display&#58;none;&#41;--*/
&#125;
#alertpanel .subpanel li a.delete&#58;hover &#123;
	background-position&#58; left bottom;
&#125;
#footpanel #alertpanel li.view &#123;
	text-align&#58; right;
	padding&#58; 5px 10px 5px 0;
&#125;
</style>
</head>
<body >
<div id="footpanel">
  <ul id="mainpanel">
    <li><a href="#" class="home"><small>Αρχική</small></a></li>
    <li><a href="#" class="profile">View Profile <small>Προφίλ</small></a></li>
    <li><a href="#" class="editprofile">Edit Profile <small>Επεξεργασία προφίλ</small></a></li>
    <li><a href="#" class="contacts">Contacts <small>Επαφές</small></a></li>
    <li><a href="#" class="messages">Messages &#40;10&#41; <small>Μηνύματα</small></a></li>
    <li><a href="#" class="playlist">Play List <small>Play List</small></a></li>
    <li><a href="#" class="videos">Videos <small>Bίντεο</small></a></li>
    <li id="alertpanel"> <a href="#" class="alerts">Alerts</a>
      <div class="subpanel">
        <h3><span> &ndash; </span>Notifications</h3>
        <ul>
          <li class="view"><a href="#">View All</a></li>
          <li> <a href="#" class="delete">X</a>
            <p>
              <!--Content-->
            </p>
          </li>
          <li> <a href="#" class="delete">X</a>
            <p>
              <!--Content-->
            </p>
          </li>
        </ul>
      </div>
    </li>
    <li id="chatpanel"> <a href="#" class="chat">Συνομιλία<strong></strong> </a>
      <div class="subpanel">
        <h3><span> &ndash; </span>Friends Online</h3>
        <ul>
          <li><span>Family Members</span></li>
          <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
          <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

jquery προβλημμα!

Δημοσίευση από abeautifulmind » 26 Οκτ 2010 21:37

dimsis ευχαριστω πολυ δούλεψε είσαι γ@@@μ@@@@@τος φίλε !!!!!!!!!!!!!!!
να σε ρωτήσω γιατί το κάναμε αυτό ? δυστηχώς τώρα ξεκινάω με java.
Αν έχεις κάποιο καλό site να ξεκινήσω και λίγο πιό εξιδικευμένα πράγματα
π.χ θέλω να τα ενώσω όλα αυτά με php για prive chat θα δυσκολευτώ πολύ λες?
από php-mysql-html είμαι καλά θα έλεγα από java ajax τίποτα.
Eυχαριστώ και πάλι.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

jquery προβλημμα!

Δημοσίευση από dimsis » 26 Οκτ 2010 22:13

Αφού τώρα ξεκινάς το πρώτο είναι να μάθεις πως δεν υπάρχει καμιά σχέση της java με την javascript.
Δεύτερον, το jquery είναι ένα javascript framework.
Στην ουσία δηλαδή φαντάσου το σαν μια βιβλιοθήκη με εντολές που σε βοηθάνε να κάνεις πιο εύκολα πράγματα που με απλή javascript θα σου έπαιρναν περισσότερο χρόνο.

Μια πολύ πρόταση για να μάθεις κάποια πράγματα από jquery είναι να παρακολουθήσεις αυτή τη σειρά των video: http://blog.themeforest.net/screencasts ... eo-series/

και να διαβάσεις αυτό:
http://jqfundamentals.com/book/book.html
http://www.learningjquery.com/ (για αργότερα)
http://book.learningjquery.com/

αλλά και αυτά προυποθέτουν πως έχεις καταλάβει κάποια βασικά πράγματα από javascript αλλιώς δεν θα βγάλεις άκρη. Οπότε για javascript:
http://javascript.crockford.com/
http://oreilly.com/catalog/9780596517748
και έχει και εδώ πολλά tutorials όπως το all time classic του skeftomilos: http://www.freestuff.gr/forums/viewtopic.php?t=21175

Υπάρχουν πάντα και τα βιβλία, για παράδειγμα :
http://www.manning.com/bibeault/
https://www.packtpub.com/jquery-1-3-wit ... 1209yp2yyr (αν και είμαστε στην 1.4.3 jquery)

και ένα πολύ καλό δωρεάν ebook του Woork: http://woork.blogspot.com/2009/01/woork-handbook.html που περιλαμβάνει λίγο από όλα.

Όσο για την ερώτηση σου γιατί χρειαζόταν το $(document).ready() : http://www.learningjquery.com/2006/09/i ... ment-ready

abeautifulmind
Δημοσιεύσεις: 319
Εγγραφή: 02 Μάιος 2010 18:04

jquery προβλημμα!

Δημοσίευση από abeautifulmind » 27 Οκτ 2010 11:43

dimsis Ευχαριστώ πολύ θα τα τσεκάρω όλα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης