互联网 | 领风沐雨

10个优秀的jQuery Mobile主题

[jQuery](http://caibaojian.com/t/jquery) Mobile 是一个伟大的框架，而每个伟大的产品都需要一个好看的UI。很不幸，jQuery Mobile默认的主题不是一个现代化的设计。默认的[CSS](http://caibaojian.com/t/css)文档有a,b,c,d和e五个主题，a主题是黑色的默认主题，每个主题都有各自的颜色。下面分享一下互联网上比较好看的jQuery Mobile UI框架 1. Graphite - 支持版本: jQuery Mobile 1.3.2 - 链接和演示: [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 在 [Flat-UI](http://designmodo.com/demo/flat-ui/).的基础上创建 - 支持版本: jQuery Mobile 1.3.2 - 官网: [https://github.com/ququplay/jquery-mobile-flat-ui-theme](https://github.com/ququplay/jquery-mobile-flat-ui-theme) - 演示: [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 - 支持版本: jQuery Mobile 1.3.2 - 链接和演示: [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的界面上创建 - 支持版本: jQuery Mobile jQuery Mobile 1.2 - 链接: [https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/](https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme) - 演示： [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 - 支持版本: jQuery Mobile 1.3.2 - 链接: [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) - 链接: [https://github.com/enathu/jqmobile-android-holo-light-theme](https://github.com/enathu/jqmobile-android-holo-light-theme) - 演示: [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的主题。 - 支持版本: jQuery Mobile 1.2 (unofficially it should also work with a version 1.3.2) - 链接: [https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme](https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme) - 演示: [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 - Supported version: jQuery Mobile 1.1 - Link: [https://github.com/sgrebnov/jqmobile-metro-theme](https://github.com/sgrebnov/jqmobile-metro-theme) - Demo: [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 - Supported version: jQuery Mobile 1.3.2 - Link: [https://github.com/ququplay/jquery-mobile-square-ui-theme](https://github.com/ququplay/jquery-mobile-square-ui-theme) - Demo: [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 - Supported version: jQuery Mobile 1.2 - Link: [http://www.mobilizetoday.com/freebies/jqmobile](http://www.mobilizetoday.com/freebies/jqmobile) - Demo: [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 - Supported version: jQuery Mobile 1.2 - Link: [http://blackberry.github.io/jQueryMobile-BB10-Theme/#gettingStarted](http://blackberry.github.io/jQueryMobile-BB10-Theme/#gettingStarted) - Demo: [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)

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

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

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下的组件库，基本可以满足你大部分的绘图需求。

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 ...

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> - function queryEntfernungen(tx, results) - alert(“This Hello works”); - var len = results.rows.length; - // This For works fine - - for (var i = 0; i < len; i++) { - $(“div[data-role=content] ul”).append(‘- <a href=”‘+results.rows.item(i).name+‘”>’+results.rows.item(i).name+‘</a>’); - } - $(“div[data-role=content] ul”).listview(‘refresh’); // This also works 但是下面的方法却也能成功! ...

如何修改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”退出。

Html5 Geolocation获取地理位置信息

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

基于 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其他返回信息： ...

纯代码实现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> 意思很简明火狐等浏览器也支持自己的私有圆角属性 ...

CSS3实现圆形代码

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