JavaScript 测试Google Map API（testgmap.js）
// Main
function load() {
// Check compatibility
if (GBrowserIsCompatible()) {
gmap2 = new GMap2(document.getElementById("map"));
gmap2.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Adding controls to the map
gmap2.addControl(new GLargeMapControl());
gmap2.addControl(new GMapTypeControl());
// Register an event listener to display the latitude and longitude
GEvent.addListener(gmap2, "moveend", function() {
var center = gmap2.getCenter();
document.getElementById("gmessage").innerHTML = center.toString();
});
} else {
var map = document.getElementById("map");
map.innerHTML = "You cannot use this browser.<br />";
}
}
// Move map
function moveMap() {
window.setTimeout(
function() { gmap2.panTo(new GLatLng(37.4569, -122.1569)); },
1000
);
}
// Opening an info window
function displayInfoWindow() {
gmap2.openInfoWindow(gmap2.getCenter(), document.createTextNode("Hello, world"));
}
// Opening an info window with HTML
function displayInfoWindowHtml() {
var msg = "<div style='width:250px'><a href='http://www.yahoo.com/'><b>Yahoo!.com</b></a></div>";
gmap2.openInfoWindowHtml(gmap2.getCenter(), msg);
}
// Displays a polyline
// you must include the VML namespace and CSS in your HTML document
// to view polylines in IE.
function mapOverlaysPolyline() {
var points = [];
points.push(new GLatLng(37.4219, -122.1119));
points.push(new GLatLng(37.4419, -122.1619));
points.push(new GLatLng(37.4719, -122.1319));
gmap2.addOverlay(new GPolyline(points, '#000000', 5, 0.7));
}
// Creating icon
function mapOverlaysIcon() {
var icon = new GIcon();
icon.image = "http://xoops.ikinuku.com/images/gmap/yazirusi.png";
icon.shadow = "http://xoops.ikinuku.com/images/gmap/shadow.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(20, 34);
var marker = new GMarker(gmap2.getCenter(), icon);
gmap2.addOverlay(marker);
}
// Creating icon which are always shown at center of the map
function mapOverlaysCrossIcon() {
var icon = new GIcon();
icon.image = "http://xoops.ikinuku.com/images/gmap/cross.png";
icon.iconSize = new GSize(100, 100);
icon.iconAnchor = new GPoint(50, 50);
var marker = new GMarker(gmap2.getCenter(), icon);
gmap2.addOverlay(marker);
GEvent.addListener(gmap2, "move", function() {
gmap2.clearOverlays();
marker = new GMarker(gmap2.getCenter(), icon);
gmap2.addOverlay(marker);
});
}
// Display info windows above marker
// This uses simple api to show a thumbnail of web page.
function mapOverlaysMarker1() {
var point = new GLatLng(37.4285, -122.1293);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var html = '<div style="width:300px"><a href="http://blog.ikinuku.com/">'
+ '<img src="http://img.simpleapi.net/small/http://blog.ikinuku.com/"'
+ ' alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0"></a><br />'
+ '<a href="http://blog.ikinuku.com/"><b>My Blog</b></a></div>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}
// Display tabbed info windows Above marker
function mapOverlaysMarker2withTab() {
var point = new GLatLng(37.4348, -122.1568);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var img = new Image();
img.src = 'http://xoops.ikinuku.com/images/gmap/daibutu01.gif';
var html = '<div style="width:300px"><img src="' + img.src + '" align="left"/>'
+ '<b>[[Display image test]]</b><br />'
+ 'Sample image<br />'
+ 'Big Buddha</div>';
var infoTabs = [
new GInfoWindowTab("Tab 1", html),
new GInfoWindowTab("Tab 2", "Tab test")
];
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
}
// Display info windows with music link above markers
function mapOverlaysMarker3withPodcast() {
var point = new GLatLng(37.4356, -122.1380);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var html = '<div style="width:300px"><a href="http://mt.ikinuku.com/podcast/test.mp3">Test music</a></div>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}
// Download a csv file by using GDownloadUrl class
function downloadCsvCoordinateFile() {
GDownloadUrl('http://xoops.ikinuku.com/misc/ajax/sample.csv', function(data, responseCode) {
var rows = data.split('\n');
for (var i = 0; i < rows.length; i++) {
var lat = rows[i].split(',')[0];
var lon = rows[i].split(',')[1];
var point = new GLatLng(lat, lon);
var marker = new GMarker(point);
gmap2.addOverlay(marker);
var music = rows[i].split(',')[2];
var title = rows[i].split(',')[3];
createInfoWindow(marker, music, title);
}
});
}
// Click handling
function mapOverlaysMarkerShowHide() {
GEvent.addListener(gmap2, "click", function(overlay, point) {
if (overlay) {
gmap2.removeOverlay(overlay);
} else {
gmap2.addOverlay(new GMarker(point));
}
});
}
// Clear all overlays
function clearOverlays() {
gmap2.clearOverlays();
GEvent.clearListeners(gmap2, "click");
GEvent.clearListeners(gmap2, "move");
}JavaScript 获取URL参数（2种方法）
var Url = location.href;
Url = Url.replace(/.*\?(.*?)/,"$1");
Variables = Url.split ("&");
for (i = 0; i < Variables.length; i++) {
Separ = Variables[i].split("=");
eval ('var '+Separ[0]+'="'+Separ[1]+'"');
}
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}JavaScript setOpacity
function setOpacity( element, alpha ) {
var style = element.style;
if( style.MozOpacity != undefined ) { //Moz and older
style.MozOpacity = alpha;
}
else if( style.filter != undefined ) { //IE
style.filter = "alpha(opacity=0)";
element.filters.alpha.opacity = ( alpha * 100 );
}
else if( style.opacity != undefined ) { //Opera
style.opacity = alpha;
}
}JavaScript 选择/取消选中所有复选框
//checks all checkboxes
function checkAll(field) {
if (!(field.length)) {
field.checked = true;
}
else {
for (var i = 0; i < field.length; i++) {
field[i].checked = true;
}
}
}
//unchecks all checkboxes
function uncheckAll(field) {
if (!(field.length)) {
field.checked = false;
}
else {
for (var i = 0; i < field.length; i++) {
field[i].checked = false;
}
}
}
<a href="javascript:checkAll(document.FRM.FIELD);">select</a> / <a href="javascript:uncheckAll(document.FRM.FIELD);">deselect</a> all
loop through all checkboxes in a form:
function checkAll() {
for (i=0; i<document.FormName.elements.length; i++) {
if (document.FormName.elements[i].type=="checkbox")
document.FormName.elements[i].checked=true;
}
}JavaScript 获取浏览器视口宽度和高度
<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>JavaScript domready.js
/**
* domready.js
*
* Cross browser mozilla's 'onDOMContentLoaded' implementation.
* Executes a function when the dom tree is loaded without waiting for images.
*
* Based on +Element.Events.domready+ from Mootools open source project,
* this tiny javascript library adds the emulated 'DOMContentLoaded' functionality.
*
* Features:
* - No dependency on external libraries
* - Compatible with Prototype.js
*
* Tested browsers (Windows):
* - IE 7 (XP standalone)
* - IE 6 SP2
* - Firefox 2.0.0.4
* - Opera 9.21
*
* Tested browsers (Mac OS X):
* - Safari 2.0.4
* - Firefox 2.0.0.4
* - Mac Opera 9.21
* - Mac IE 5.2.3
*
* Copyright (c) 2007 Takanori Ishikawa.
* License: MIT-style license.
*
* MooTools Copyright:
* copyright (c) 2007 Valerio Proietti, <http://mad4milk.net>
*
*
* See Also:
*
* mootools
* http://mootools.net/
*
* The window.onload Problem - Solved!
* http://dean.edwards.name/weblog/2005/09/busted/
*
* [PATCH] Faster onload for Event.onload
* http://dev.rubyonrails.org/ticket/5414
* Changeset 6596: Support for "DOMContentLoaded" event handling (prototype.js event branch)
* http://dev.rubyonrails.org/changeset/6596
*
*/
if (typeof Event == 'undefined') Event = new Object();
/*
* Registers function +fn+ will be executed when the dom
* tree is loaded without waiting for images.
*
* Example:
*
* Event.domReady.add(function() {
* ...
* });
*
*/
Event.domReady = {
add: function(fn) {
//-----------------------------------------------------------
// Already loaded?
//-----------------------------------------------------------
if (Event.domReady.loaded) return fn();
//-----------------------------------------------------------
// Observers
//-----------------------------------------------------------
var observers = Event.domReady.observers;
if (!observers) observers = Event.domReady.observers = [];
// Array#push is not supported by Mac IE 5
observers[observers.length] = fn;
//-----------------------------------------------------------
// domReady function
//-----------------------------------------------------------
if (Event.domReady.callback) return;
Event.domReady.callback = function() {
if (Event.domReady.loaded) return;
Event.domReady.loaded = true;
if (Event.domReady.timer) {
clearInterval(Event.domReady.timer);
Event.domReady.timer = null;
}
var observers = Event.domReady.observers;
for (var i = 0, length = observers.length; i < length; i++) {
var fn = observers[i];
observers[i] = null;
fn(); // make 'this' as window
}
Event.domReady.callback = Event.domReady.observers = null;
};
//-----------------------------------------------------------
// Emulates 'onDOMContentLoaded'
//-----------------------------------------------------------
var ie = !!(window.attachEvent && !window.opera);
var webkit = navigator.userAgent.indexOf('AppleWebKit/') > -1;
if (document.readyState && webkit) {
// Apple WebKit (Safari, OmniWeb, ...)
Event.domReady.timer = setInterval(function() {
var state = document.readyState;
if (state == 'loaded' || state == 'complete') {
Event.domReady.callback();
}
}, 50);
} else if (document.readyState && ie) {
// Windows IE
var src = (window.location.protocol == 'https:') ? '://0' : 'javascript:void(0)';
document.write(
'<script type="text/javascript" defer="defer" src="' + src + '" ' +
'onreadystatechange="if (this.readyState == \'complete\') Event.domReady.callback();"' +
'><\/script>');
} else {
if (window.addEventListener) {
// for Mozilla browsers, Opera 9
document.addEventListener("DOMContentLoaded", Event.domReady.callback, false);
// Fail safe
window.addEventListener("load", Event.domReady.callback, false);
} else if (window.attachEvent) {
window.attachEvent('onload', Event.domReady.callback);
} else {
// Legacy browsers (e.g. Mac IE 5)
var fn = window.onload;
window.onload = function() {
Event.domReady.callback();
if (fn) fn();
}
}
}
}
}JavaScript jQuery AJAX导航
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});JavaScript JQuery：检测浏览器调整大小
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}
});
</script>JavaScript jQuery预加载内容
// preloading function for arbitrary content (which usually contains images)
jQuery.preloadContent = function(){
for(var i = 0; i<arguments.length; i++)
{
jQuery("<div>").html(arguments[i]);
}
};
// use like (myvar being a JS variable with content to preload)
$.preloadContent(myvar1, myvar2);JavaScript iPhone Orientation Javascript
<script type="text/javascript">
function orient()
{
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
window.onload = orient();
</script>