10个优秀的jQuery Mobile主题

<span class="wp_keywordlink">[jQuery](http://caibaojian.com/t/jquery)</span> Mobile 是一个伟大的框架,而每个伟大的产品都需要一个好看的UI。很不幸,jQuery Mobile默认的主题不是一个现代化的设计。默认的<span class="wp_keywordlink">[CSS](http://caibaojian.com/t/css)</span>文档有a,b,c,d和e五个主题,a主题是黑色的默认主题,每个主题都有各自的颜色。 下面分享一下互联网上比较好看的jQuery Mobile UI框架 1. Graphite - <span style="font-weight: bold;">支持版本: </span>jQuery Mobile 1.3.2 - <span style="font-weight: bold;">链接和演示: </span>[http://driftyco.github.io/graphite/](http://driftyco.github.io/graphite/) [![graphite-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/graphite-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/graphite-theme.jpg) 2. Flat UI theme 在 [<span style="font-weight: bold;">Flat-UI</span>](http://designmodo.com/demo/flat-ui/).的基础上创建 - <span style="font-weight: bold;">支持版本: </span>jQuery Mobile 1.3.2 - <span style="font-weight: bold;">官网: </span>[https://github.com/ququplay/jquery-mobile-flat-ui-theme](https://github.com/ququplay/jquery-mobile-flat-ui-theme) - <span style="font-weight: bold;">演示: </span>[http://ququplay.github.io/jquery-mobile-flat-ui-theme/](http://ququplay.github.io/jquery-mobile-flat-ui-theme/) [![flatUI-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/flatUI-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/flatUI-theme.jpg) 3. nativeDroid - <span style="font-weight: bold;">支持版本: </span>jQuery Mobile 1.3.2 - <span style="font-weight: bold;">链接和演示: </span>[http://nativedroid.godesign.ch/](http://nativedroid.godesign.ch/) [![nativeDroid-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/nativeDroid-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/nativeDroid-theme.jpg) 4. iOs theme 在IOS的界面上创建 - <span style="font-weight: bold;">支持版本: </span>jQuery Mobile jQuery Mobile 1.2 - <span style="font-weight: bold;">链接: </span>[https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/](https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme) - <span style="font-weight: bold;">演示: </span>[http://taitems.github.io/iOS-Inspired-jQuery-Mobile-Theme/](http://taitems.github.io/iOS-Inspired-jQuery-Mobile-Theme/) [![ios_theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/ios_theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/ios_theme.jpg) 5. Android Holo-inspired theme - <span style="font-weight: bold;">支持版本: </span>jQuery Mobile 1.3.2 - <span style="font-weight: bold;">链接: </span>[http://teusink.blogspot.com/2012/09/android-holo-theme-for-jquery-mobile-111.html](http://teusink.blogspot.com/2012/09/android-holo-theme-for-jquery-mobile-111.html) - <span style="font-weight: bold;">链接: </span>[https://github.com/enathu/jqmobile-android-holo-light-theme](https://github.com/enathu/jqmobile-android-holo-light-theme) - <span style="font-weight: bold;">演示: </span>[http://dl.dropboxusercontent.com/u/3875067/holo-light/index.html](http://dl.dropboxusercontent.com/u/3875067/holo-light/index.html) [![android-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/android-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/android-theme.jpg) 6. Bootstrap jQuery Mobile Theme 在Bootstrap的基础上创建,这个主题覆盖了jQuery默认的A-E的主题。 - <span style="font-weight: bold;">支持版本: </span>jQuery Mobile 1.2 (unofficially it should also work with a version 1.3.2) - <span style="font-weight: bold;">链接: </span>[https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme](https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme) - <span style="font-weight: bold;">演示: </span>[http://andymatthews.net/code/jQuery-Mobile-Bootstrap-Theme/buttons.html](http://andymatthews.net/code/jQuery-Mobile-Bootstrap-Theme/buttons.html) [![bootstrap-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/bootstrap-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/bootstrap-theme.jpg) 7. Metro Theme for WP 7.5 - <span style="font-weight: bold;">Supported version: </span>jQuery Mobile 1.1 - <span style="font-weight: bold;">Link: </span>[https://github.com/sgrebnov/jqmobile-metro-theme](https://github.com/sgrebnov/jqmobile-metro-theme) - <span style="font-weight: bold;">Demo: </span>[http://sgrebnov.github.io/jqmobile-metro-theme/samples/jqm-public-demo/index.html](http://sgrebnov.github.io/jqmobile-metro-theme/samples/jqm-public-demo/index.html) [![jQM-Metro](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/jQM-Metro.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/jQM-Metro.jpg) 8. Square-UI Theme - <span style="font-weight: bold;">Supported version: </span>jQuery Mobile 1.3.2 - <span style="font-weight: bold;">Link: </span>[https://github.com/ququplay/jquery-mobile-square-ui-theme](https://github.com/ququplay/jquery-mobile-square-ui-theme) - <span style="font-weight: bold;">Demo: </span>[http://ququplay.github.io/jquery-mobile-square-ui-theme/](http://ququplay.github.io/jquery-mobile-square-ui-theme/) [![squere-ui-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/squere-ui-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/squere-ui-theme.jpg) 9. jQMobile WordPress theme - <span style="font-weight: bold;">Supported version: </span>jQuery Mobile 1.2 - <span style="font-weight: bold;">Link: </span>[http://www.mobilizetoday.com/freebies/jqmobile](http://www.mobilizetoday.com/freebies/jqmobile) - <span style="font-weight: bold;">Demo: </span>[http://www.mobilizetoday.com/preview/jqmobile/](http://www.mobilizetoday.com/preview/jqmobile/) [![wordpress-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/wordpress-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/wordpress-theme.jpg) 10. BlackBerry theme - <span style="font-weight: bold;">Supported version: </span>jQuery Mobile 1.2 - <span style="font-weight: bold;">Link: </span>[http://blackberry.github.io/jQueryMobile-BB10-Theme/#gettingStarted](http://blackberry.github.io/jQueryMobile-BB10-Theme/#gettingStarted) - <span style="font-weight: bold;">Demo: </span>[http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/index.html](http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/index.html) [![bb10-theme](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/bb10-theme.jpg)](http://caibaojianimg.u.qiniudn.com/uploads/2014/04/bb10-theme.jpg) 转自: [http://caibaojian.com/10-best-free-jquery-mobile-theme.html](http://caibaojian.com/10-best-free-jquery-mobile-theme.html)

2014年11月20日 · 2 分钟 · 天边的星星

开发工具、设计工具、网站收集

原型设计工具(免费) http://www.mockupplus.com/download 注册地址:http://www.mockplus.cn/referral?r=rxjuhv 火狐开发者版本 https://www.mozilla.org/en-US/firefox/developer/

2014年11月13日 · 1 分钟 · 天边的星星

Mark走起!iOS开发最常用的第三方库

向自己的应用中添加第三方库是一件需要谨慎而行的事情,因为也许在不久的将来,这些库可能会停止开发,那么到时,当使用这些库遇到问题,却没了任何支持,会是一件很悲催的事情。所以,这里向大家介绍的是,在iOS应用开发中最常使用,而又有信心会继续开发和支持很长一段时间的第三方库,希望能够对你的开发工作有所帮助。 1. CocoaPods 是不是已经厌烦了将各种库拖拽到Xcode项目中?那么,CocoaPods的出现就帮你解决了这一问题。CocoaPods是Objective-C项目中最有名的类库管理工具,可以解决库与库之间的依赖关系,下载库的源码,供我们开发使用。最重要的是,大多的开源类库都支持它。所以,有了CocoaPods,你就可以很轻松地对项目进行扩展。 2. Crashlytics Crashlytics是一款用于检测你开发的应用,何时在客户端设备上崩溃,并能找出其崩溃原因以及帮助开发者修复应用的工具。Crashlytics既免费又方便使用,另外,还内置一些基础的分析功能,让你无需总要依赖其他独立的分析工具。 3. AFNetworking/Alamofire AFNetworking和之前文章中提到的Alamofire一样,是一个网络库,不同的是,Alamofire是用于Swift中,而AFNetworking则是为Objective-C准备的。AFNetworking是建立在Foundation URL Loading System之上,拥有一个精心设计的模块化架构,以及功能丰富的API,使用起来很是方便。 4. Google Analytics、Mixpanel、Localytics 通常情况下,当需要分析用户使用应用的各方面数据时,会在Google Analytics、Mixpanel和Localytics之间权衡。Google Analytics可以用来跟踪和统计应用程序,如访问数、停留时间、跳出率等;Mixpanel则是为大家提供公式化和分类类报告,从而给出详细的数据分析;而Localytics提供的是实时地分析服务,帮助开发者更好的理解用户。至于选择哪一个,可以根据自己的需求来判定。 5. Urban Airship 当需要向应用中添加推送通知时,Urban Airship会是一个不错的选择,不过这个是在它还是免费的时候。所以,当你是在为自己或是小的客户端构建应用时,你可以使用Parse和Mixpanel来取代Urban Airship。不过如果是为那些有能力出钱的大客户开发应用的话,Urban Airship还是首选。 6. New Relic New Relic的移动应用监控能够很好地跟踪应用的性能问题,而无需等到应用崩溃后,再去检查问题的来源。让用户从多角度、实时地发现应用的错误,并对此进行处理。 7. ZBar ZBar是一个开源的软件套件,实现了识别和读取来自各种资源的条形码,比如视频流、图像文件等。它支持众多主流的条码,其中包括EAN-13/UPC-A、UPC-E、EAN-8、Code 128、Code 39、Interleaved 2 of 5和QR Code。 8. Core Plot Core Plot是一个开源的2D绘图框架,具有高度可定制性,和Apple的技术紧密的整合,比如 Core Animation、Core Data 和 Cocoa Bindings。 可以绘制柱状图、折线图、饼图等多种图形,提供Mac OS X和iOS下的组件库,基本可以满足你大部分的绘图需求。

2014年10月30日 · 1 分钟 · 天边的星星

Html5无刷新修改Url,history pushState/replaceState

一、认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history对象提供对览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退。 1、历史记录的前进和后退 在历史记录中后退,可以这么做: 1. window.history.back(); 这就像用户点击浏览器的后退按钮一样。 类似的,你可以前进,就像在浏览器中点击前进按钮,像这样: window.history.forward(); 2、移动到指定历史记录点 通过指定一个相对于当前页面位置的数值,你可以使用go()方法从当前会话的历史记录中加载页面(当前页面位置索引值为0,上一页就是-1,下一页为1)。 要后退一页(相当于调用back()): 1. window.history.go(-1); 向前移动一页(相当于调用forward()): 1. window.history.go(1); 类似的,传递参数“2”,你就可以向前移动2个记录点。你可以查看length属性值,了解历史记录栈中一共有多少个记录点: 1. window.history.length; 二、修改历史记录点 HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。 1、存储当前历史记录点 存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如: 1. // 当前的url为:http://www.qingdou.me/index.html 2. var json={time:new Date().getTime()}; 3. // @状态对象:记录历史记录点的额外对象,可以为空 4. // @页面标题:目前所有浏览器都不支持 5. // @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域 6. window.history.pushState(json,””,”http://www.qingdou.me/post-1.html”); 执行了pushState方法后,页面的url地址为http://www.qingdou.me/post-1.html。 2、替换当前历史记录点 window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。 3、监听历史记录点 监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如: 1. // 当前的url为:http://www.qingdou.me/post-1.html 2. window.onpopstate=function() 3. { 4. // 获得存储在该历史记录点的json对象 5. var json=window.history.state; 6. // 点击一次回退到:http://www.qingdou.me/index.html 7. // 获得的json为null 8. // 再点击一次前进到:http://www.qingdou.me/post-1.html ...

2014年10月17日 · 1 分钟 · 天边的星星

JqueryMobile动态生成listView并刷新的方法!

JqueryMobile动态生成listView并刷新的方法! **[javascript]** [view plain](http://blog.csdn.net/zz_mm/article/details/6836503#)[copy](http://blog.csdn.net/zz_mm/article/details/6836503#) <div> </div> </div> - <span style="color: black;"><span class="keyword" style="font-weight: bold; color: #006699;">function</span> queryEntfernungen(tx, results) </span> - <span style="color: black;"> alert(<span class="string" style="color: blue;">&#8220;This Hello works&#8221;</span>); </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">var</span> len = results.rows.length; </span> - <span style="color: black;"> <span class="comment" style="color: #008200;">// This For works fine</span> </span> - <span style="color: black;"> </span> - <span style="color: black;"> <span class="keyword" style="font-weight: bold; color: #006699;">for</span> (<span class="keyword" style="font-weight: bold; color: #006699;">var</span> i = 0; i < len; i++) { </span> - <span style="color: black;"> $(<span class="string" style="color: blue;">&#8220;div[data-role=content] ul&#8221;</span>).append(<span class="string" style="color: blue;">&#8216;- <a href=&#8221;&#8216;</span>+results.rows.item(i).name+<span class="string" style="color: blue;">&#8216;&#8221;>&#8217;</span>+results.rows.item(i).name+<span class="string" style="color: blue;">&#8216;</a>&#8217;</span>); </span> - <span style="color: black;"> } </span> - <span style="color: black;"> $(<span class="string" style="color: blue;">&#8220;div[data-role=content] ul&#8221;</span>).listview(<span class="string" style="color: blue;">&#8216;refresh&#8217;</span>); <span class="comment" style="color: #008200;">// This also works</span> </span> 但是下面的方法却也能成功! ...

2014年9月28日 · 2 分钟 · 天边的星星

如何修改WAMP中mysql默认空密码

WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作。 首先,通过WAMP打开mysql控制台。 提示输入密码,因为现在是空,所以直接按回车。 然后输入“use mysql”,意思是使用mysql这个数据库,提示“Database changed”就行。 然后输入要修改的密码的sql语句“update user set password=PASSWORD(‘hooray’) where user=’root’;”,注意,sql语句结尾的分号不能少,提示什么什么OK就行了。 最后输入“flush privileges;”,不输入这个的话,修改密码的操作不会生效的。 然后输入“quit”退出。

2014年9月28日 · 1 分钟 · 天边的星星

Html5 Geolocation获取地理位置信息

Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。 Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项。 如下Demo演示了通过Geolocation获取地理位置信息,并在百度地图上显示当前位置(通过调用百度地图API)。实验结果发现位置被定位到了大学城内环东四路入口处,与本人所在位置(华工学生宿舍)偏差还是有点大的,达到200-300米左右。 代码如下所示(其中convertor.js为百度地图提供的坐标转化文件): ![复制代码](http://common.cnblogs.com/images/copycode.gif) <span style="color: #008080;"> 1</span> <span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>H5地理位置Demo<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://api.map.baidu.com/api?v=1.3"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="convertor.js"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;">10</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;">11</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="map"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="width:600px; height:400px"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;">12</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;">13</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;">14</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;">15</span> <span style="color: #0000ff;">if</span> (window.navigator.geolocation) { <span style="color: #008080;">16</span> <span style="color: #0000ff;">var</span> options = { <span style="color: #008080;">17</span> enableHighAccuracy: <span style="color: #0000ff;">true</span>, <span style="color: #008080;">18</span> }; <span style="color: #008080;">19</span> window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options); <span style="color: #008080;">20</span> } <span style="color: #0000ff;">else</span> { <span style="color: #008080;">21</span> alert("浏览器不支持html5来获取地理位置信息"); <span style="color: #008080;">22</span> } <span style="color: #008080;">23</span> <span style="color: #008080;">24</span> <span style="color: #0000ff;">function</span> handleSuccess(position){ <span style="color: #008080;">25</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度</span> <span style="color: #008080;">26</span> <span style="color: #0000ff;">var</span> lng = position.coords.longitude; <span style="color: #008080;">27</span> <span style="color: #0000ff;">var</span> lat = position.coords.latitude; <span style="color: #008080;">28</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 调用百度地图api显示</span> <span style="color: #008080;">29</span> <span style="color: #0000ff;">var</span> map = <span style="color: #0000ff;">new</span> BMap.Map("map"); <span style="color: #008080;">30</span> <span style="color: #0000ff;">var</span> ggPoint = <span style="color: #0000ff;">new</span> BMap.Point(lng, lat); <span style="color: #008080;">31</span> <span style="color: #008000;">//</span><span style="color: #008000;"> 将google地图中的经纬度转化为百度地图的经纬度</span> <span style="color: #008080;">32</span> BMap.Convertor.translate(ggPoint, 2, <span style="color: #0000ff;">function</span>(point){ <span style="color: #008080;">33</span> <span style="color: #0000ff;">var</span> marker = <span style="color: #0000ff;">new</span> BMap.Marker(point); <span style="color: #008080;">34</span> map.addOverlay(marker); <span style="color: #008080;">35</span> map.centerAndZoom(point, 15); <span style="color: #008080;">36</span> }); <span style="color: #008080;">37</span> } <span style="color: #008080;">38</span> <span style="color: #008080;">39</span> <span style="color: #0000ff;">function</span> handleError(error){ <span style="color: #008080;">40</span> <span style="color: #008080;">41</span> } <span style="color: #008080;">42</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008080;">43</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span> ![复制代码](http://common.cnblogs.com/images/copycode.gif) convertor.js文件: ...

2014年9月22日 · 4 分钟 · 天边的星星

基于 html5 geolocation来获取经纬度地址

以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差。为了获取更加精确的位置,可以使用了html5的geolocation来获取经纬度,然后再获取所在地理位置,如何获取,我在下面会说到。先说下基本概念。 Geolocation在的navigator 对象中,我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象,那么可以通过下面的代码来做能力检测,对不同的浏览器做不同的处理。在访问 geolocation 对象时,即调用 geolocation 下面的方法时,浏览器会弹出提示,询问用户是否许可网站提供的位置服务,只有在得到用户许可过后,服务才会继续,否则将被停止。 常用的navigator.geolocation对象有以下三种方法: 获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options) 持续获取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options) 清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id) 参数position_options是配置项,由JSON格式传入: enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精确的查询结果。 maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。 timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。 [?](http://www.cnblogs.com/zzcflying/archive/2012/08/30/2663540.html#) <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> `var` `position_option = {` </div> <div class="line number2 index1 alt1"> ` ``enableHighAccuracy: ``true``,` </div> <div class="line number3 index2 alt2"> ` ``maximumAge: 30000,` </div> <div class="line number4 index3 alt1"> ` ``timeout: 20000` </div> <div class="line number5 index4 alt2"> ` ``};` </div> <div class="line number6 index5 alt1"> `navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option);` </div> </div> </td> </tr> </table> [?](http://www.cnblogs.com/zzcflying/archive/2012/08/30/2663540.html#) <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="code"> <div class="container"> <div class="line number1 index0 alt2"> `function` `getPositionSuccess( position ){` </div> <div class="line number2 index1 alt1"> ` ``var` `lat = position.coords.latitude;` </div> <div class="line number3 index2 alt2"> ` ``var` `lng = position.coords.longitude;` </div> <div class="line number4 index3 alt1"> ` ``alert( ``"您所在的位置: 纬度"` `+ lat + ``",经度"` `+ lng );` </div> <div class="line number5 index4 alt2"> ` ``if``(``typeof` `position.address !== ``"undefined"``){` </div> <div class="line number6 index5 alt1"> ` ``var` `country = position.address.country;` </div> <div class="line number7 index6 alt2"> ` ``var` `province = position.address.region;` </div> <div class="line number8 index7 alt1"> ` ``var` `city = position.address.city;` </div> <div class="line number9 index8 alt2"> ` ``alert(``' 您位于 '` `+ country + province + ``'省'` `+ city +``'市'``);` </div> <div class="line number10 index9 alt1"> ` ``}` </div> <div class="line number11 index10 alt2"> `}` </div> </div> </td> </tr> </table> coords其他返回信息: ...

2014年9月22日 · 2 分钟 · 天边的星星

纯代码实现CSS圆角

效果图 我这里说的是纯代码,是指的不使用图片实现圆角,图片实现圆角,这里就不说了。 纯代码实现圆角主要有3种方法: 第一种:CSS3圆角 `#chaomao{` <div class="line number2 index1 alt1"> ` ``border-radius:2px 2px 2px 2px;` </div> <div class="line number3 index2 alt2"> `}` </div> </div> </td> </tr> </table> </div> 上面代码的意思是左上、右上、右下、右下分别2px的圆角 当然也可以简写:border-radius:2px 方向是从左上到左下逆时针 也可以分别指定 `#chaomao{` <div class="line number2 index1 alt1"> ` ``border-top-left-radius:4px 2px;` </div> <div class="line number3 index2 alt2"> ` ``border-top-right-radius:3px 4px;` </div> <div class="line number4 index3 alt1"> ` ``border-bottom-right-radius:6px 2px;` </div> <div class="line number5 index4 alt2"> ` ``border-bottom-left-radius:3px 4px;` </div> <div class="line number6 index5 alt1"> `}` </div> </div> </td> </tr> </table> </div> 意思很简明 火狐等浏览器也支持自己的私有圆角属性 ...

2014年9月11日 · 7 分钟 · 天边的星星

CSS3实现圆形代码

.avatar-img {border-radius: 100%;width: 100%;max-width: 158px;} 参考w3c http://www.w3school.com.cn/css3/css3_border.asp

2014年9月11日 · 1 分钟 · 天边的星星