قرار دادن دو دستور jquery کنار هم

[sarah1361]

سلام دوستان
من در یک صفحه ASp.netمی خام از دو دستور jquery در کنار هم استفاده کنم
یکی یاعث ایجاد TabMenu می شه و یکی برای ایجاد یک گالری مشه
هر کدوم تک تک در صفحات جدا خوب کار مکنند اما من نمیدونم برای
استفاده همزمان چه کنم ؟
کسی هست به من کمک کنه؟

<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>

این کد گالری بود(کد بالا)

///////////////////////////////////////////////////



<script type="text/javascript">
$(document).ready(function () {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function () {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});

این هم کد بعدی
/////////////////////////////////////////////////
در ضمن این دو از دو نسخه متفاوتjqueryاستفاده میکنند که هر دو رو در Head اضافه کردم

[امیـرحسین]

در ضمن این دو از دو نسخه متفاوتjqueryاستفاده میکنند که هر دو رو در Head اضافه کردم
هان؟ دو تا jQuery تو صفحه دارید؟ عجب کار فاجعه ای!
اگر واقعا یکی از پلاگین ها نیاز به نسخه قدیمی تر داره و با نسخه جدید کار نمی کنه، دنبال مشابهش باشید (حتما پیدا میشه) یا خودتون بنویسیدش.
اگر دوست ندارید، ترتیب قرار دادن تگهای <SCRIPT> در صفحه رو اینجا بذارید. طبیعتا هر پلاگین باید بعد از jQuery که ازش پشتیبانی می کنه باشه چون استفاده از دو تا jQuery، باعث میشه دومی اولی رو Overwrite کنه.

[mehdi.mousavi]

سلام دوستان من در یک صفحه ASP.NETمی خام از دو دستور jquery در کنار هم استفاده کنم یکی یاعث ایجاد TabMenu می شه و یکی برای ایجاد یک گالری مشه هر کدوم تک تک در صفحات جدا خوب کار مکنند اما من نمیدونم برای استفاده همزمان چه کنم ؟ کسی هست به من کمک کنه؟


سلام.
در حقیقت شما می خواهید از دو jQuery Plugin در یک صفحه استفاده کنید. این کار هیچ مشکلی نداره و انجام پذیر هستش. لطفا HTML، CSS و JavaScript های مورد استفاده رو اینجا قرار بدید تا ببینم مشکلش چی هستش.

موفق باشید.

[sarah1361]

سلام.
در حقیقت شما می خواهید از دو jQuery Plugin در یک صفحه استفاده کنید. این کار هیچ مشکلی نداره و انجام پذیر هستش. لطفا HTML، CSS و JavaScript های مورد استفاده رو اینجا قرار بدید تا ببینم مشکلش چی هستش.

موفق باشید.


plugin1
کد HTML



<div id="slideshow">
<img src="img1.png" alt="SlideShow Image 1" class="active" />
<img src="img2.png" alt="SlideShow Image 2" />
<img src="img3.png" alt="SlideShow Image 3" />
</div>


کد JavaScript



<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>

کد CSS



#slideshow {
position:relative;
height:350px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

/////////////////////////////////////////////////////// گالری عکس


plugin2

کد HTML



<div class="container" dir="rtl">
<ul class="tabs">
<li class="">
<a href="#tab1" class="aa"> سامانه ورود کارآموزان</a>

</li>

<li class="">
<a href="#tab2" class="aa">سامانه مدیریت آموزشگاه </a>
</li>
<li class="">
<a href="#tab3" class="aa">پیوندهای مفید</a>
</li>
<li class="">
<a href="#tab5" class="aa">دوره های درحال برگزاری مرکز </a>
</li>
<li class="">
<a href="#tab4" class="aa">دانلود جزوه و کتاب </a>
</li>

</ul>
<div class="tab_container">
<div id="tab1" class="tab_content" style="display:block";>
<p> کارآموز گرامی لطفا جهت استفاده از امکانات سایت بر روی لینک زیر کلیک کنید</p>
<br />
<a class="LoginStudent" href="../OtherWebPage/LoginStudent.aspx" title="ورود به سایت"> سامانه ورود کارآموزان</a>
</div>
<div id="tab2" class="tab_content" style="display:block";>
<p> مدیریت محترم لطفا جهت استفاده از امکانات سایت بر روی لینک زیر کلیک کنید</p>
<br />
<a class="LoginStudent" href="../OtherWebPage/LoginStudent.aspx" title="ورود به سایت"> سامانه ورود کارکنان و مدیریت</a>
</div>

<div id="tab3" class="tab_content" style="display:block";>

<ul class="thumb">
<li><a class="Link" href="#"></a></li>


</ul>

</div>
<div id="tab4" class="tab_content" style="display:block";>

<ul class="thumb">
<li><a class="Link" href="#"></a></li>


</ul>

</div>

<div id="tab5" class="tab_content" style="display:block";>

<ul class="thumb">
<li><a class="Link" href="#"></a></li>


</ul>

</div>
</div>

کد JavaScript



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>



<script type="text/javascript">



$(document).ready(function()
{

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function () {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;

});



});

</script>


کد CSS




[/CODEul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: none;
border-left: none;
width: 100%;
}
ul.tabs li {
float:right;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border-bottom: 2px solid #82b8f8 ;
border-left: none;
border-right:none;
border-top:none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background-image:url('../images/BkMenuitem3.png');

}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
/*border: 1px solid #fff; --Gives the bevel look with a 1px white border inside the list item--*/
outline: none;

}
ul.tabs li a:visited
{
background-image:url('../images/BkMenuitem2.png');

}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background-image:url('../images/BkMenuitem2.png');
border-bottom:none; /*--Makes the active tab look like it's connected with its content--*/
border-right:none;
border-left:none;
}
.tab_container {
border-bottom:none;
border-top: none;
overflow: hidden;
clear: both;
float: left;
width: 100%;
background: #fff;
border-left:none;
border-right:none;
}
.tab_content
{

padding: 20px;
font-size: 1.2em;
background-image:url('../images/BakssTabMenu.png');
background-position:left bottom;
background-repeat:no-repeat;
border-bottom: 2px solid #82b8f8;
border-left:none;
border-right:none;
border-top: none;
}
a.LoginStudent
{
color:#0e6eab;

}
a.LoginStudent:hover
{
color:#4873a3;
}
a.Link
{
width:100px;
height:100px;
background-image:url('../images/Arm1.png');
background-repeat:no-repeat;

}



ممنون از شما :خجالت:

[sarah1361]

هان؟ دو تا jQuery تو صفحه دارید؟ عجب کار فاجعه ای!
اگر واقعا یکی از پلاگین ها نیاز به نسخه قدیمی تر داره و با نسخه جدید کار نمی کنه، دنبال مشابهش باشید (حتما پیدا میشه) یا خودتون بنویسیدش.
اگر دوست ندارید، ترتیب قرار دادن تگهای <SCRIPT> در صفحه رو اینجا بذارید. طبیعتا هر پلاگین باید بعد از jQuery که ازش پشتیبانی می کنه باشه چون استفاده از دو تا jQuery، باعث میشه دومی اولی رو Overwrite کنه.

دوست من مشکل من همینه که نمی دونم از چه ترتیبی استفاده کنم
من هر دو رو به صورت جدا گذاشتم حالا می خام بدونم چینش چطوری باشه

[mehdi.mousavi]

در ضمن این دو از دو نسخه متفاوتjqueryاستفاده میکنند که هر دو رو در Head اضافه کردم

سلام.
من متاسفانه بی دقتی کردم و این بخش از جمله شما رو ندیدم. وقتی کد رو ارسال کردید، متوجه شدم که از دو نسخه متفاوت jQuery دارید استفاده می کنید و وقتی کلیه پستهای ارسال شده به این Thread رو خوندم، متوجه شدم که بی دقتی کردم.

همونطوری که امیر حسین گفتن، این کار کار جالبی نیستش. شما می تونید با یه حقه مشکل رو رفع کنید، اما توصیه میکنم این کارو نکنید. اون حقه اینه که این دو Plugin رو در دو IFrame متفاوت آدرس کنید تا Load این دو نسخه از jQuery تداخلی در کار دیگری پیش نیاره.

روش بهتر، بررسی اون دو Plugin و تغییر کد مربوطه هستش، تا هر دو Plugin از یک نسخه استفاده کنن (طبیعتا نسخه جدیدتر). قاعدتا این کار چندان پیچیده نیست (البته اینم بستگی به Plugin مربوطه داره و نمیشه همینطوری در موردش صحبت کرد).

موفق باشید.

[sarah1361]

سلام.
من متاسفانه بی دقتی کردم و این بخش از جمله شما رو ندیدم. وقتی کد رو ارسال کردید، متوجه شدم که از دو نسخه متفاوت jQuery دارید استفاده می کنید و وقتی کلیه پستهای ارسال شده به این Thread رو خوندم، متوجه شدم که بی دقتی کردم.

همونطوری که امیر حسین گفتن، این کار کار جالبی نیستش. شما می تونید با یه حقه مشکل رو رفع کنید، اما توصیه میکنم این کارو نکنید. اون حقه اینه که این دو Plugin رو در دو IFrame متفاوت آدرس کنید تا Load این دو نسخه از jQuery تداخلی در کار دیگری پیش نیاره.

روش بهتر، بررسی اون دو Plugin و تغییر کد مربوطه هستش، تا هر دو Plugin از یک نسخه استفاده کنن (طبیعتا نسخه جدیدتر). قاعدتا این کار چندان پیچیده نیست (البته اینم بستگی به Plugin مربوطه داره و نمیشه همینطوری در موردش صحبت کرد).

موفق باشید.



سلام آقای موسوی
من به توصیه آقای امیر حسین می خام بگردم و از plugin هایی استفاده کنم که از یه نسخه
استفاده کنن فقط می شه بگید نوشتن بخش javascript هر دو چطور باشه (تقدم و تاخر دو
دستور چطور باشه؟)

[mehdi.mousavi]

سلام آقای موسوی من به توصیه آقای امیر حسین می خام بگردم و از plugin هایی استفاده کنم که از یه نسخه استفاده کنن فقط می شه بگید نوشتن بخش javascript هر دو چطور باشه (تقدم و تاخر دو دستور چطور باشه؟)

سلام.
بله، این توصیه خوبه. اما سوال اینه که قبلش شما آزمایش نکردید ببینید آیا میشه هر دو Plugin رو تحت jQuery 1.4.2 اجرا کرد یا خیر؟

اما در مورد تقدم، تاخر. ببینید. در حالت کلی این مساله اهمیتی نداره که ابتدا کدوم رو Invoke کنید. مگه اینکه هر دو پلاگین قرار باشه روی یک Element کار کنن و بواسطه کاری که انجام میدن، تداخلی پیش بیاد.

در واقع، شما میتونید به سادگی، توی Ready Handler خودتون، پشت سرهم بدون هیچ ترتیب خاصی هر Plugin ای رو که مایلید اجرا کنید:

$(function(){
$('#myDiv').pluginOne();
$('#anotherDiv').pluginTwo({whateverParam: whateverValue});
});

بطور نمونه در کد فوق، من ابتدا pluginOne و سپس pluginTwo رو روی دو Element متفاوت اجرا میکنم. کد فوق وقتی اجرا میشه که DOM Document شما Load شده و درخت مربوطه در حافظه توسط Browser ساخته شده... بدین ترتیب، شما می تونید Plugin های بعدی رو زیر هم فراخوانی کرده و استفاده کنید.

موفق باشید.