<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><제목></제목> //여기에서 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>텍스트 정렬: 가운데; <br>} <br>.photo .ui-widget-header { <br>여백: 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= 'map' 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") <br>} <br>if (element.is("img")) { <br>return element.attr("alt") <br>} <br>} <br>}) <br>$('#Button1').click (함수 () { <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-widget photo"> <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> </div> <br>이용 방법: 任意输入國家宾置下的超链接就变为了刚设置的citycity,点击可以跳到这个城도시의 查看地图页,鼠标移到超链接上会弹个350*350的地图 <br>效果图: <br><img src="http://files.jb51.net/file_images/article/201305/201358173240575.png?201348173354" alt="지도 사용량을 보기 위한 jQuery 입력 도시 Introduction_jquery" ><br><img src="http://files.jb51.net/file_images/article/201305/201358173406156.jpg?201348173433" alt="지도 사용량을 보기 위한 jQuery 입력 도시 Introduction_jquery" ><br><img src="http://files.jb51.net/file_images/article/201305/201358173502247.jpg?201348173525" alt="지도 사용량을 보기 위한 jQuery 입력 도시 Introduction_jquery" >