[AJAX]利用Google AJAX Libraries API來載入jQuery或SWFObject

2009-02-12

23919
0
ASP.NET

今天在網路上看到一個範例是利用Google API來載入一些常用的js
就做兩個範例,一個jQuery,一個SWFObject,教大家如何使用呀..
此兩個範例由舊文章來變化,差別在於js是動態載入

今天在網路上看到一個範例是利用Google API來載入一些常用的js

就做兩個範例,一個jQuery,一個SWFObject,教大家如何使用呀..

此兩個範例由舊文章來變化,差別在於js是動態載入

jQuery→利用Javascript實作網頁頁籤(Tab)

jQuery.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery.aspx.cs" Inherits="jQuery" %> <!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 runat="server"> <title>jQuery</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");//載入jquery,最新版本1.x</script> <style type="text/css"> .tab { border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid; width:200px; height:200px; } </style> </head> <body> <form id="form1" runat="server"> <div id="Group1"> <a href='#' onclick='ClickTab("0")'>tab1</a> <a href='#' onclick='ClickTab("1")'>tab2</a> <div id='G1Div0' style="display: block" class="tab"> F6 Team</div> <div id='G1Div1' style="display: none" class="tab"> puma</div> </div> </form> </body> </html> <script type="text/javascript"> function ClickTab(Index) { //原始javascript //var child = document.getElementById("Group1").getElementsByTagName("div"); //for (var i=0;i<child.length;i++) //{ // child[i].style.display="none"; //} //使用jquery $("#Group1 > div").hide(); //原始javascript //document.getElementById("G1Div"+Index).style.display="block"; //使用jquery $("#G1Div"+Index).show(); } </script>

執行結果：

SWFObject→利用SWFObject讓你的Blog有音樂播放的功能

swfobject.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="swfobject.aspx.cs" Inherits="swfobject" %> <!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 runat="server"> <title>swfobject</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("swfobject","2");//載入swfobject,最新版本2.x</script> </head> <body> <form id="form1" runat="server"> <div> <div id='flash_music1'> </div> <br /> <div id='flash_music2'> </div> </div> </form> </body> </html> <script type="text/javascript"> //2.x版的做法 Player("http://f6.wretch.yimg.com/eeephone/25/1852859806.mp3","flash_music1");//音樂來源(歌名:同手同腳),要加入的Div(flash_music1) Player("http://f6.wretch.yimg.com/eeephone/25/1852859809.mp3","flash_music2");//音樂來源(歌名:偏心),要加入的Div(flash_music2) function Player(filename,id) { var flashvars = {}; var params = {}; var attributes = {}; flashvars.file = filename;//檔案路徑 flashvars.width = "400"; flashvars.height = "20"; flashvars.backcolor = "0xEEEEEE"; flashvars.frontcolor = "0x2966E9"; flashvars.lightcolor = "0xFF3366"; flashvars.autostart = "false";//是否自動播放 flashvars.showdigits = "true";//是否顯示digits flashvars.repeat = "true";//是否重覆播放 //參考無名的swf檔,因為它的比較美觀 swfobject.embedSWF("http://l.yimg.com/wretch.yimg.com/photos/serv/video/video_player/BGMusicPlayer.swf", id, "400", "20", "7", "", flashvars, params, attributes); } </script> <%-- <script type="text/javascript"> //1.5版的做法 Player("http://f6.wretch.yimg.com/eeephone/25/1852859806.mp3","flash_music1");//音樂來源(歌名:同手同腳),要加入的Div(flash_music1) Player("http://f6.wretch.yimg.com/eeephone/25/1852859809.mp3","flash_music2");//音樂來源(歌名:偏心),要加入的Div(flash_music2) function Player(filename,id) { var so = new SWFObject("http://l.yimg.com/wretch.yimg.com/photos/serv/video/video_player/BGMusicPlayer.swf", "line", 400, 20, 7);//參考無名的swf檔,因為它的比較美觀 so.addVariable("file", filename);//檔案路徑 so.addVariable("width", "400"); so.addVariable("height", "20"); so.addVariable("backcolor","0xEEEEEE"); so.addVariable("frontcolor","0x2966E9"); so.addVariable("lightcolor","0xFF3366"); so.addVariable("autostart", "false");//是否自動播放 so.addVariable("showdigits","true");//是否顯示digits so.addVariable("repeat","true");//是否重覆播放 so.write(id);//將flash加入至div } </script> --%>

執行結果：

參考網址：
http://code.google.com/intl/zh-TW/apis/ajaxlibs/
http://demo.tc/view.aspx?id=425
http://blog.miniasp.com/post/2008/10/Consider-using--Google-AJAX-Libraries-API-when-deploying-website.aspx

回首頁