本文介绍了为什么我的Javascript含糊不清?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在创建一个小的HTML5和Javascript应用程序.我正在使用geolocations API和JQuery可排序的UI javascript，但是它们似乎存在冲突.当我打开页面时，不再显示地理位置地图. 我的index.html文件:
I am currently creating a small HTML5 and Javascript application. I am using geolocations API and JQuery sortable UI javascript, however they seem to be conflicting. When I open my page, the geolocations map no longer appears. My index.html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "www.w3/TR/html4/strict.dtd"> <html> <head> <meta charset=utf-8> <link type="text/css" rel="stylesheet" href="css/clearfix.css" media="screen,project"> <link type="text/css" rel="stylesheet" href="css/style.css" media="screen,project"> <link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" media="screen,projection"> <title>HTML5 & JQuery</title> <script type="text/javascript" src="code.jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <style type="text/css"> .column.left { width: 375px; float: left; margin-right: 50px; } .column.right { width: 375px; float: right; } .portlet { margin: 0 0 1em 0; } .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } .portlet-header .ui-icon { float: right; } .portlet-content { padding: 0.4em; } .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } .ui-sortable-placeholder * { visibility: hidden; } </style> <script type="text/javascript"> $(function() { $(".column").sortable({ connectWith: '.column' }); $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-plusthick"></span>') .end() .find(".portlet-content"); $(".portlet-header .ui-icon").click(function() { $(this).toggleClass("ui-icon-minusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); $(".column").disableSelection(); }); </script> </head> <body> <header id="topHeader"> <div class="wrapper"> <p>Zakary Faithfull - Scripting For Digital Media</p> </div> </header> <section id="content"> <header> <h1>HTML5 & JQuery Dashboard</h1> </header> <section class="location"> <article> <p>Finding your location: <span id="status">checking...</span></p> </article> <script type="text/javascript" src="js/geo.js"></script> </section> <section class="widgets clearfix"> <div class="column left"> <div class="portlet"> <div class="portlet-header">Shopping</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> <div class="column right"> <div class="portlet"> <div class="portlet-header">Links</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> <div class="portlet"> <div class="portlet-header">Images</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> </section> </section> </body> </html>我的geo.js文件
My geo.js file
function success(position) { var s = document.querySelector('#status'); if (s.className == 'success') { // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back return; } s.innerHTML = "Found You"; s.className = 'success'; var mapcanvas = document.createElement('div'); mapcanvas.id = 'mapcanvas'; mapcanvas.style.height = '300px'; mapcanvas.style.width = '100%'; document.querySelector('article').appendChild(mapcanvas); var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var myOptions = { zoom: 15, center: latlng, mapTypeControl: false, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title:"You are here!" }); } function error(msg) { var s = document.querySelector('#status'); s.innerHTML = typeof msg == 'string' ? msg : "failed"; s.className = 'fail'; // console.log(arguments); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { error('not supported'); }任何帮助将不胜感激.
Any help would be much appreciated.
推荐答案(function(){ (function() {
(.column").sortable({ connectWith:'.column' }); (".column").sortable({ connectWith: '.column' });
(.portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(.portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('< span class =" ui-icon ui-icon-plusthick" > < /span > ') .结尾() .find(.portlet-content"); (".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-plusthick"></span>') .end() .find(".portlet-content");
更多推荐
为什么我的Javascript含糊不清?
发布评论