下載101架站平台使用手冊  (請按右鍵另存新檔)

101 架站平台 YouTube 線上教學 101 架站平台 YouTube 線上教學
進階使用教學 進階使用教學
組合檢視 查看較為便宜的費率 樹狀檢視
討論文章 [ 前一個 | 下一個 ]
如何貼入引用外部的 jQuery 效果而不會與平台既有的 jQuery 衝突?
由於新一代的網頁瀏覽器對於 jQuery 的技術支援性越來越好,加上 jQuery 這個開放原始碼社群一直不斷開發出許多相當棒的特效,越來越多的網站開始使用 jQuery 所提供的特效,常見的例子有相簿所使用的 Light Box,點擊相簿縮圖後,背景會變暗,照片會有快顯視窗放大,然後可以一張一張往下看,或是關閉相簿放大檢視後回到相簿縮圖畫面等。但由於平台開發當初已經有自己建立的 jQuery 程式庫了,大部分的內建功能都或多或少有運用內建的 jQuery 程式庫,因此當使用者在網頁文章原始碼中想要貼入引用外部的 jQuery 特效時,有時會發現平台內建的某些功能就失效了,原因是被引用的外部 jQuery 語法跟平台本身的 jQuery 程式庫在版本及呼叫功能時有互相衝突所導致,解決方法如下︰

1. 首先來看想要引用的外部 jQuery 語法範例︰
1<script src="http://某網址/jquery-1.3.2.min.js" type="text/javascript"></script>
2<script type='text/javascript'>
3........這裡通常會有許多 javascript function 的定義,許多是以 $ 為開頭的........
4</script>



2. 解決方法的第一步是在 jQuery 語法中加上一段不要衝突的 javascript 腳本宣告︰
1<script type='text/javascript'>
2    var jQuery132 = jQuery.noConflict(true);
3</script>


加上了之後整段語法就變成︰
1<script src="http://某網址/jquery-1.3.2.min.js" type="text/javascript"></script>
2<script type='text/javascript'>
3    var jQuery132 = jQuery.noConflict(true);
4</script>

5<script type='text/javascript'>
6........這裡通常會有許多 javascript function 的定義,許多是以 $ 為開頭的........
7</script>



3. 接下來解決方法的第二步,就是要把功能定義區段中所有用 $ 的地方,把 $ 換成 jQuery132 來取代,例如︰
1$(function()

就要換成
1jQuery132(function()

餘此類推.....

如此一來,就可以利用平台網頁文章原始碼中貼入引用外部 jQuery 腳本來做特殊效果了,舉一個例子如下︰

HTML 原始碼 (注意︰因為論壇 bbcode 語法的關係,都把 HTML color code 前面的#換成全形字型,若要使用這段代碼,請下載附件「照片 slide 秀.txt」)︰

 1<html>
 2<head>
 3<title>圖片切換,帶標題文字</title>
 4<script type="text/javascript" src="http://codefans.net/ajaxjs/jQuery1.3.2.js"></script>
 5<script type='text/javascript'>
 6    var jQuery132 = jQuery.noConflict(true);
 7</script>
 8<style type="text/css">
 9body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
10img{border:none;}em{font-style:normal;}
11a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
12a:hover{color:#000;text-decoration:underline;}
13.clear{height:0;overflow:hidden;clear:both;}
14.play{width:500px;height:375px;border:#ccc 1px solid; text-align:left; margin:30px;}
15.textbg{margin-top:345px;z-index:1;filter:alpha(opacity=40);opacity:0.4;width:500px;position:absolute;height:30px;background:#000;}
16.text{margin-top:345px;z-index:2;padding-left:10px;font-size:14px;font-weight:bold;width:340px;color:#fff;line-height:30px; overflow:hidden;position:absolute;cursor:pointer;}
17.num{margin:350px 5px 0 350px;z-index:3;width:145px; text-align:right;position:absolute;height:25px;}
18.num a{margin:0 2px;width:20px;height:20px;font-size:14px; font-weight:bold;line-height:20px;cursor:pointer;color:#000;padding:0 5px;background:#D7D6D7;text-align:center}
19.num a.on{background:#FFD116;color:#A8471C;}
20.num a.on2{background:#D7D6D7;color:#000;}
21.content img{width:500px;height:375px;}
22</style>
23</head>
24<body>
25<div class="play">
26    <ul>
27        <li class="textbg" style="list-style: none;"></li>
28        <li class="text" style="list-style: none;"></li>
29        <li class="num" style="list-style: none;"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
30        <li class="content" style="list-style: none;">
31            <a href="#" target="_blank"><img src="http://codefans.net/jscss/demoimg/wall1.jpg" alt="澳大利亞:體驗藍山風光,感受澳洲風情" /></a>
32            <a href="#" target="_blank"><img src="http://codefans.net/jscss/demoimg/wall2.jpg" alt="九月抄底旅遊,馬上行動" /></a>
33            <a href="#" target="_blank"><img src="http://codefans.net/jscss/demoimg/wall3.jpg" alt="港澳旅遊:超值特價,奢華享受" /></a>
34            <a href="#" target="_blank"><img src="http://codefans.net/jscss/demoimg/wall4.jpg" alt="炎炎夏日哪裡去,途牛帶你海濱遊" /></a>
35            <a href="#" target="_blank"><img src="http://codefans.net/jscss/demoimg/wall5.jpg" alt="定途牛旅遊線路,優惠購買樂相冊" /></a>
36            <a href="#" target="_blank"><img src="http://codefans.net/jscss/demoimg/wall3.jpg" alt="三亞自助遊" /></a>
37        </li>
38    </ul>
39</div>
40<script type=text/javascript>
41var t = n = 0, count = jQuery132(".content a").size();
42jQuery132(function(){
43    var play = ".play";
44    var playText = ".play .text";
45    var playNum = ".play .num a";
46    var playConcent = ".play .content a";
47   
48    jQuery132(playConcent + ":not(:first)").hide();
49    jQuery132(playText).html(jQuery132(playConcent + ":first").find("img").attr("alt"));
50    jQuery132(playNum + ":first").addClass("on");
51    jQuery132(playText).click(function(){window.open(jQuery132(playConcent + ":first").attr('href'), "_blank")});
52    jQuery132(playNum).click(function() {
53       var i = jQuery132(this).text() - 1;
54       n = i;
55       if (i >= count) return;
56       jQuery132(playText).html(jQuery132(playConcent).eq(i).find("img").attr('alt'));
57       jQuery132(playText).unbind().click(function(){window.open(jQuery132(playConcent).eq(i).attr('href'), "_blank")})
58       jQuery132(playConcent).filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
59       jQuery132(this).removeClass("on").siblings().removeClass("on");
60       jQuery132(this).removeClass("on2").siblings().removeClass("on2");
61       jQuery132(this).addClass("on").siblings().addClass("on2");
62    });
63    t = setInterval("showAuto()", 5000);
64    jQuery132(play).hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);});
65})
66function showAuto(){
67    n = n >= (count - 1) ? 0 : ++n;
68    jQuery132(".num a").eq(n).trigger('click');
69}
70</script>
71</body>
72</html>

附件: 照片 slide 秀.txt (4.0k)
檢舉 檢舉

 

© 亞伯拉罕科技股份有限公司 since 2005 ∣ 服務時間:9:00-18:00 | http://www.101superweb.com  | All rights reserved.
101架站平台由亞伯拉罕科技股份有限公司(www.yabolahan.com)所提供及維護
電話:(02)2930-6398 | 傳真:(02)2930-6397 | E-Mail:[email protected]