点击按钮显示百度地图 js如何实现在html里面不是jsp_随笔

<!DOCTYPE html>

<head>

*{ margin: 0pxpadding: 0px}

body{text-align: center height: 100%overflow:hidden}

#allmap{ width: 100%height: 100%position: absolute}

</style>

</head>

<body>

$(function(){

if(supportsGeoLocation()){

alert("你的浏览器支持 GeoLocation.")

}else{

alert("不支持 GeoLocation.")

}

// 检测浏览器是否支持HTML5

function supportsGeoLocation(){

return !!navigator.geolocation

}

// 单次位置请求执行的函数

function getLocation(){

navigator.geolocation.getCurrentPosition(mapIt,locationError)

}

//定位成功时，执行的函数

function mapIt(position){

var lon = position.coords.longitude

var lat = position.coords.latitude

// alert("您位置的经度是："+lon+" 纬度是："+lat)

var map = new BMap.Map("allmap")

var point = new BMap.Point(""+lon+"",""+lat+"")

map.centerAndZoom(point,19)

var gc = new BMap.Geocoder()

translateCallback = function (point){

var marker = new BMap.Marker(point)

map.addOverlay(marker)

map.setCenter(point)

gc.getLocation(point, function(rs){

var addComp = rs.addressComponents

if(addComp.province!==addComp.city){

var sContent =

"<div><h4 style='margin:0 0 5px 0padding:0.2em 0'>你当前的位置是：</h4>" +

"<p style='margin:0line-height:1.5font-size:13pxtext-indent:2em'>"+addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" +

"</div>"}

else{

var sContent =

"<div><h4 style='margin:0 0 5px 0padding:0.2em 0'>你当前的位置是：</h4>" +

"<p style='margin:0line-height:1.5font-size:13pxtext-indent:2em'>"+ addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber+"</p>" +

"</div>"

}

var infoWindow = new BMap.InfoWindow(sContent)

map.openInfoWindow(infoWindow,point)

})

}

BMap.Convertor.translate(point,0,translateCallback)

}

// 定位失败时，执行的函数

function locationError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

alert("User denied the request for Geolocation.")

break

case error.POSITION_UNAVAILABLE:

alert("Location information is unavailable.")

break

case error.TIMEOUT:

alert("The request to get user location timed out.")

break

case error.UNKNOWN_ERROR:

alert("An unknown error occurred.")

break

}

// 页面加载时执行getLocation函数

window.onload = getLocation

})

</script>

</body>

</html>

网页中内嵌MMS流媒体播放该如何设置呢？前几天就遇到过这么一个问题，经过网上一番搜索，具体方法有两种，一是制作ASX文件内嵌调用，二是直接

在HTML下写相关调用代码。如果你不是经常使用的，建议还是使用后面一种方法，相对简单方便，现将内嵌代码张贴出来记录一下，以防以后需要用到。

内嵌代码一（简洁版，只适合在IE浏览器下显示）：

<object

classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" height="460"

type="application/x-oleobject" width="530"><param name="URL"

value="MMS链接"></object>

内嵌代码二（测试在其它浏览器下也能显示）：

</object>

内嵌效果（没加全屏按钮，双击可全屏）：

如上面黑屏没内容说明引用MMS地址失效，只要看得见播放器就说明代码生效了。

下面就是规范中的描述

The details element represents a disclosure widget from which the user can obtain additional information or controls.

— WHATWG HTML5 specification

理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在<details>我们可以放入我们任何想放入的内容.

浏览器的支持情况

在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 <details >元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.

<details 的使用方法

这里有两个相关的元素:<details>和可选的

让我们来看下面的代码:

1 2 3 4 <details> <summary>Show/Hide me</summary> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></details>

你可以通过下面的链接察看效果see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.

OPen 属性

在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将<detail>默认的视觉属性通过布尔值作修改，让其当我们加载页面的时候是展开的：

1 2 3 4 <details open> <summary>Show/Hide me</summary> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></details>

注意，这里并没有 closed 属性，因为只要你移除 open 属性，执行的就是 closed 属性效果。

<summary>元素

我们已经简要的看了

的作用。因为它是短语内容，我们可以使用内联 (inline)标签 <span>。我们为什么会有这种想法呢？也许这样子能更方便的通过而外样式控制显示效果或者像 spec 建议的那样：为一个表单元素增加一个 <label>标签。如果他能生效的话，至少能让我很顺手：

1 2 3 4 <details> <summary><label for="name">Name:</label></summary> <input type="text" id="name" name="name" /></details>

常理看，我们点击 summary 的任何位置都应该展开 <detail>元素的内容。但是在这个例子中，我们点击<summary>并没有展开内容，因为你点击的是<label>他会将焦点放到 <input>标签-即使那部分内容被隐藏在<details>标签。

很明显，在这点需要更好的声明，你认为这个地方应该发生什么事情呢？可能某个浏览器生产商能看一下这个效果。

<details>元素多层嵌套

你可以在<details>中嵌套<details>，可以完美的案例查看这个效果：

1 2 3 4 5 6 7 8 9 10 11 12 13 <details> <summary>Question 1</summary> <p><strong>Pellentesque habitant morbi tristique</strong>senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>in turpis pulvinar facilisis. Ut felis.</p> <details><summary>Related documents</summary><ul> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li></ul> </details></details>

使用案例

在哪些情况时会用到 <details>?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表，所以 <details>是这一效果的最佳效果。

考虑到这一系列内容，它可能被固定在某一区域，当我们滚动内容的时候。像这样子？

你也可以使用<details>来 *** 作博客的评论内容，用户简介，下载列表，复杂的表单，或者像规范中描述下面的应用：

An example of the <details>element from the spec

实际上，只要你看看我写的wordpress，会发现有大量的使用 <details>的机会。让我们在评论中了解一下你的观点和想法。

样式格式化

你如何对这个定义样式？同时，在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例：

1 2 3 4 5 details summary::-webkit-details-marker { background: red color: #fff font-size: 500%}

我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。

我们如何将默认的组件Icon自定义呢？那就是用属性选择器 (attribute selector),你可以用来检测 <details>元素是打开的还是关闭的，然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果，使用 :after pseudo-element元素定义成我们喜欢的背景图片：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 summary::-webkit-details-marker { display: none } summary:after { background: red border-radius: 5px content: "+" color: #fff float: left font-size: 1.5em font-weight: bold margin: -5px 10px 0 0 padding: 0 text-align: center width: 20px} details[open] summary:after { content: "-"}

在上面的例子中，我们使用文本 “+”和“-”来定义这个组件的状态，根据你的设计需要，你可能希望使用 :before来代替 :after，这两个为类元素都可以使用 image.

details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生，下面是我们装饰后的效果，下面是截屏效果：

Styled <details>element in Chrome

如果我们可以用过css的动画效果来修饰打开和关闭时的状态，这样设计就更完美了，但是目前为止我们还没有办法做到这点。

可访问性

不幸的是在我们写这篇文章的时候，<details>h还无法通过键盘访问，Steve Faulkner 写到：

Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.

自己试一下，如果你使用鼠标打开 <details>元素，你可以使用键盘到达内容部分，但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态，不过我们相信这个小国很快会被改进。

向后兼容

在我们抱怨其在IE6中无法生效之前，感谢这些聪明的人们，我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站very handy collection of cross-browser polyfills，这两个都需要 jQuery:

<details>fallback via jQuery by Mathias Bynens

Another <details>alternative, also based on jQuery by Manuel Bieh

1 2 3 4 5 <script> if (!("open" in document.createElement("details"))) { alert("No details") } </script>

更新：感谢的评论。上面的代码并不是100%可靠，因为他在某些chrome版本下会失败。你可以使用this Modernizr snippet。

我们为何使用这种类型的交互？

言归正传，为什么会有这个效果在HTML5中？就像其它HTML5的效果，使用这种效果能够更简单。比如时间选择，Date pickers, sliders, progress indicators, 现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么？如果是 tabs 标签那就好了。

总结

在这篇文章中，我们阐述了如何去使用<details>和<summary>元素。<details>是一个新元素，通过和<summary>元素通过浏览器可以创造手风琴的交互效果。

目前，<details>只能在 Chrome 工作，不过我们期待这会在不久的将来有所改变。这里只有一个css trick我们可以使用 ::-webkit-details-marker,但是我们拥有很多的其它css。让我们在评论中知道关于<details>元素你在这方面的经验和想法。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7238094.html

点击按钮显示百度地图 js如何实现在html里面不是jsp

发表评论

评论列表（0条）

点击按钮显示百度地图 js如何实现 在html里面 不是jsp

发表评论

评论列表（0条）

点击按钮显示百度地图 js如何实现在html里面不是jsp