کار نکردن jquery ui [بایگانی]

cpuram

پنج شنبه 18 اردیبهشت 1393, 17:22 عصر

سلام دوستان
من از این آدرس http://jsfiddle.net/r4Q39/ وقتی قسمت html و javascript رو تو یه صفحه در کامپیوترم اجرا میکنم دقیقا نتیجه نمیده .یعنی با کلیک رو یک لینک، لینک باز قبلی جمع میشه و من نمیخوام جمع بشه فقط کاربر خودش کلیک میکنه جمع کنه مثل همین که هست .
لطفا زحمت بکشید کداشو تو یه صفحه بریزید من که نتونستم ممنون.

qartalonline

پنج شنبه 18 اردیبهشت 1393, 17:36 عصر

برای این کار نیازی به استفاده از jQuerUI نیستش از متد slideToggle خود jQuery استفاده کنید.
https://api.jquery.com/slideToggle/
http://www.w3schools.com/jquery/eff_slidetoggle.asp

cpuram

پنج شنبه 18 اردیبهشت 1393, 17:44 عصر

برای این کار نیازی به استفاده از jQuerUI نیستش از متد slideToggle خود jQuery استفاده کنید.
https://api.jquery.com/slideToggle/
http://www.w3schools.com/jquery/eff_slidetoggle.asp

تشکر.نمیشه در حال حاضر فقط باید از ui استفاده کنم چون قبلا ساخته شده و فقط میخوام این قابلیت اضافه بشه.
لطفا همینو کپی کنید من نمیتونم نمیدونم چرا نمیشه.

qartalonline

پنج شنبه 18 اردیبهشت 1393, 18:07 عصر

اون لینکی که گذاشتید هم علاوه بر QueryUI از jQuery استفاده کرده.

$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons,
collapsible: true
});
$("#header1").click(function(e) {
return false;
$("#accordion").accordion("option", "icons", false);
});
});

$('#accordion .accClicked').off('click').click(function() {
$(this).next().toggle('fast');
});

cpuram

پنج شنبه 18 اردیبهشت 1393, 20:09 عصر

لطفا ببینید مشکل فایل ضمیمه من چیه؟ چرا accordion بدون اینکه روش کلیک بشه بسته میشه در صورتی که تو لینکی که دادم اینطوری نیست.118787

cpuram

پنج شنبه 18 اردیبهشت 1393, 20:44 عصر

نمیدونم چرا ولی درست شد اینطوری
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){

$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
icons: icons,
collapsible: true
});
$( "#header1" ).click(function(e) { return false;
$( "#accordion" ).accordion( "option", "icons", false );
});
});

$('#accordion .accClicked')
.off('click')
.click(function(){
$(this).next().toggle('fast');
});
});//]]>

</script>

qartalonline

پنج شنبه 18 اردیبهشت 1393, 22:47 عصر

کد زیر رو تست کردم کار میکنه:
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons,
collapsible: true
});

$('#accordion .accClicked').off('click').click(function() {
$(this).next().toggle('fast');
});
});

باید تکه کد آخر داخل $(function(){ ... }); نوشته میشد.

cpuram

پنج شنبه 18 اردیبهشت 1393, 22:52 عصر

کد زیر رو تست کردم کار میکنه:
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
headerSelected: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons,
collapsible: true
});

$('#accordion .accClicked').off('click').click(function() {
$(this).next().toggle('fast');
});
});

باید تکه کد آخر داخل $(function(){ ... }); نوشته میشد.

الان مشکلم اینه که آیکن باز و بسته تغییر نمیکنه.یکسره رو حالت باز هست.

qartalonline

جمعه 19 اردیبهشت 1393, 08:45 صبح

من تکه کد زیر رو حذف کرده بودم احتمالا به خاطر این بود.
$( "#header1" ).click(function(e) { return false; $( "#accordion" ).accordion( "option", "icons", false );
});

cpuram

جمعه 19 اردیبهشت 1393, 08:47 صبح

نه منظورم روی کد خودمه کد آخر هم توش هست.

qartalonline

جمعه 19 اردیبهشت 1393, 14:12 عصر

کاش کدهاتون رو کامل بذارید تا مشکل دقیق بررسی بشه.

cpuram

جمعه 19 اردیبهشت 1393, 14:38 عصر

تو همین صفحه http://jsfiddle.net/r4Q39/ شما تنظیمات رو مثل عکس من انجام بدید لطفا.
118802

به این شکل در میاد.
118803

اگه دقت کنید میبینید دومی با اینکه تو حالت باز هست ولی فلشش(کنار section 2) رو بسته نشون میده.

qartalonline

جمعه 19 اردیبهشت 1393, 18:17 عصر

این هم کد کامل، شما قسمت جاوا اسکریپت رو کپی کنید تو صفحه خودتون، درست میشه.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Customize Accordion</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons,
collapsible: true
});
$('#accordion h3').off('click').click(function() {
if ($(this).hasClass('ui-state-active')) {
$(this).next().slideUp('fast');
$(this).removeClass('ui-accordion-header-active ui-state-active ui-corner-top')
.addClass('ui-corner-all')
.attr('aria-selected', 'false')
.children('.ui-accordion-header-icon').removeClass('ui-icon-circle-arrow-s').addClass('ui-icon-circle-arrow-e');

} else {
$(this).next().slideDown('fast');
$(this).addClass('ui-accordion-header-active ui-state-active ui-corner-top')
.removeClass('ui-corner-all')
.attr('aria-selected', 'true')
.children('.ui-accordion-header-icon').addClass('ui-icon-circle-arrow-s').removeClass('ui-icon-circle-arrow-e');
}
});
});
</script>
</head>
<body>

<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>

</body>
</html>

cpuram

جمعه 19 اردیبهشت 1393, 18:20 عصر

خیلی ممنون از زحمتی که برام کشیدین .