PDA

View Full Version : چگونگی ایجاد ساختار، منوی درختی در جی کوئری



mo_mokh_com1
یک شنبه 05 اردیبهشت 1389, 17:28 عصر
سلام و خسته نباشید، من یه منوی درختی برای محصولات یه سایت لازم دارم !!!
اطلاعاتم رو با php به طور سالم و دقیق گرفتم .
حالا میخام توسط جی کوئری اونها رو نشون بدم که دیگه refresh نشه برای کلیک کردن روی هر محصول.
خواهشا کمکم کنید ، برنامه ای برای این کار وجود نداره ؟ !!!!!!!!!! :گریه:

mehdi.mousavi
سه شنبه 07 اردیبهشت 1389, 13:18 عصر
سلام و خسته نباشید، من یه منوی درختی برای محصولات یه سایت لازم دارم !!!

سلام.
ببینید این TreeView (http://jquery.bassistance.de/treeview/demo/) کارتون رو راه میندازه.
اگر خوشتون اومد، Source اش رو میتونید از اینجا دریافت کنید (http://jquery.bassistance.de/treeview/jquery.treeview.zip).

موفق باشید.

mahsa.n
دوشنبه 19 دی 1390, 11:57 صبح
نحوه راست چین کردنش چه جوریه؟؟؟؟؟؟؟؟؟؟؟

pary_daryayi
سه شنبه 21 آذر 1391, 08:00 صبح
سلام دوستان .من از این کدها استفاده کردم و اجرا شد . فقط یه مشکلی وجود داره . وقتی یکی از منوها را داخل تگ <a> میزارم و روش کلیک میکنم ، هیچ اتفاقی نمیفته و به صفحه ای که میخوام نمیرم. ممنون میشم راهنمایی کنید که چه تغییری تو کد ایجاد کنم . هرچی تغییر ایجاد کردم نشد.

css:


.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}

.treeview ul {
background-color: white;
margin-top: 4px;
}

.treeview li {
margin: 0;
padding: 3px 0pt 3px 16px;
}
.treeview li:hover { cursor: pointer; }
.treeview li { background: url(./images/treeview-default-line.gif) 0 0 no-repeat;width:100px; }
.treeview li.last { background-position: 0 -1766px }
.treeview li span.plus {
background:url('./images/plus.gif') no-repeat;
cursor: pointer;
padding-left:10px;
vertical-align:middle;
color:green;
}
.treeview li span.minus{
background:url('./images/minus.gif') no-repeat;
cursor: pointer;
vertical-align:middle;
padding-left:10px;
color:red;
}


jquery:


$(document).ready(function() {

var sds = document.getElementById("dum");
if(sds == null){
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
var sdss = document.getElementById("dumdiv");
if(sdss == null){
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}

$("#treeview li").toggle(
function() {
$(this).children('ul').slideDown()
if ($(this).hasClass('inner')) {
$(this).removeClass('inner').addClass('innerview') ;
$idd=$(this).children('span').attr('id');

$('#'+$idd).removeClass('plus').addClass('minus');

}
},
function() {
$(this).children('ul').slideUp()
if ($(this).hasClass('innerview')) {
$(this).removeClass('innerview').addClass('inner') ;
$idd=$(this).children('span').attr('id');
$('#'+$idd).removeClass('minus').addClass('plus');
}
}
);
});


html:


<ul id="treeview" class='treeview'>
<li class="inner"><span class='plus' id="TamilNadu">Tamilnadu</span>
<ul style="display: none">
<li><span id="Thanjavur"><a href="../../del.php">Thanjavur</a></span></li>
<li><span id="Chennai">Chennai</span></li>
</ul>
</li>
</ul>
</ul>
<div valign=top style="font-size: 10px;color: #dadada;" id="dumdiv">
<a href="http://www.hscripts.com" id="dum" style="font-size: 10px;color: #dadada;text-decoration:none;color: #DADADA;">&copy;h</a></div>


فایل ضمیمه :
96449