<div class="codetitle"> <span><a style="CURSOR: pointer" data="69132" class="copybut" id="copybut69132" onclick="doCopy('code69132')"><u>复制代幣</u></a></span>代码如下:</div> <div class="codebody" id="code69132"> <br><html xmlns="http://www.w3.org /1999/xhtml"> <BR><頭> <BR><title></title> // ここで要注意 js 導入の先後顺序 <br><link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" /> <br><link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> <br><script src="js/jquery-1.9.1.js" type="text/javascript"></script> <br><script src="js/jquery.ui.core.js" type="text/javascript"></script> <br><script src="js/jquery.ui.widget.js" type="text/javascript"></script> <br><script src="js/jquery.ui.position.js" type="text/javascript"></script> <br><script src="js/jquery.ui.tooltip.js" type="text/javascript"></script> <br><link href="css/demos.css" rel="stylesheet" type="text/css" /> <br><style type="text/css"> <br>.photo { <br>幅: 300px; <br>text-align: 中央; <br>} <br>.photo .ui-widget-header { <br>margin: 1em 0; <br>} <br>.map { <br>幅: 350px; <br>高さ: 350px; <br>} <br>.ui-tooltip { <br>最大幅: 350px; <br>} <br></style> <br><script type="text/javascript"> <br>$(function () { <br>$(document).tooltip({ <br>items: "img, [data-geo], [title]", <br>content: function () { <br>var element = $(this); <br>if (element.is("[data-geo]")) { <br>var text = element.text(); <br>return "<img class= '地図' alt='" テキスト <br>"' src='http://maps.google.com/maps/api/staticmap?" <br>"zoom=11&size=350x350&maptype=terrain&sensor=false¢er= <br>text "'>"; <br>} <br>if (element.is("[title]")) { <br>return element.attr("title"); (element.is("img")) { <br>return element.attr("alt"); <br>} <br>} <br>}); (function () { <br>$('#AName').text($('#Text1').val()); <br>$('#AName').attr('href', "http ://maps.google.com/maps?q=" $('#Text1').val() "&z=11"); <br>}) <br>}); <br></script> <br></head> <br> <br><div class="ui-ウィジェット写真"> <br><div class="ui-widget-header ui-corner-all"> <br><input id="Text1" type="text" value="中国,上海"/><input id="Button1" type="button" value="设置" /> <br><h3><a href="http://maps.google.com/maps?q=China,上海&z=11" data-geo id="AName">中国,上海</ a></h3> <BR></div> <BR></div> <BR></body> <br></html> <br><br> <br>使用方法:任意入力国家和城市、用“、”分隔、点击設置下面の超链接就变のために刚設置の城市、点击可跳到この城市の查看地图页、鼠标超链接上会弹出一 350*350 地图 <br>効果图: </div> <br><br><br><img src="http://files.jb51.net/file_images/article/201305/201358173240575.png?201348173354" alt="jQuery に都市を入力して地図を表示する使い方の紹介_jquery" ><br>