jqm源码系列：$.mobile.media
思路分析：
- 动态创建一个div，命名为testDiv，设置id为jquery-mediatest，追加到Body中
- 动态创建一个style，命名为styleBlock，增加一段css规则：
//传递一个参数query比如："only all"
//给上面创建的id为jquery-mediatest设置一个position
"@media " + query + " {#jquery-mediatest{position:absolute;}}";
- 插入到html里面，再调用css获取position属性的值是否是absolute
- 存储到cache对象中，key就是query
- 注意add的使用，删除动态创建的body和style
TODO:
- 没有增加window.matchMedia的原生判断
(function($,undefined){
//定义变量
var $window = $(window),
$html = $("html");
$.mobile.media = (function(){
var cache = {},
testDiv = $("<div id='jquery-mediatest'></div>"),
fakeBody = $("<body>").append(testDiv);
return function(query){
if(!(query in cache)){
//创建一个style对象取名styleBlock
var styleBlock = document.createElement("style"),
cssrule = "@media " + query + " {#jquery-mediatest{position:absolute;}}";
//IE必须设置type
styleBlock.type = "text/css";
//初始创建的styleBlock.styleSheet返回的undefined
if(styleBlock.styleSheet){
}else{
//createTextNode创建文本节点，然后追加到styleBlock里面去
styleBlock.appendChild(document.createTextNode(cssrule))
}
//把fakeBody追加到html，再把styleBlock追加到html
$html.prepend(fakeBody).prepend(styleBlock);
//获取一下testDiv的position是否是absolute
//cache[query]存储的是true或者false
cache[query] = testDiv.css("position") === "absolute";
//记得删除styleBlock
fakeBody.add(styleBlock).remove();
}
//返回true或者false
return cache[query];
};
})();
})(jQuery);
上一个部分流程的图：
相关推荐
标题 "24时区APK+源码， android+JQM" 提供了一个关于Android应用程序开发的项目，其中结合了Java和jQuery Mobile（JQM）技术。这个项目旨在帮助初学者理解如何在Android平台上利用HTML来构建用户界面，并且通过JQM...
分析和运行这个demo可以帮助你更好地理解如何在实际项目中应用这些技术。 在开发过程中，确保遵循最佳实践，比如处理跨域问题、安全地存储和访问上传的文件，以及提供良好的错误处理和用户反馈。此外，对于大型文件...
jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能，jQuery Mobile实现选项卡功能
**jQuery Mobile 深度解析** jQuery Mobile 是一个专为移动设备设计的...通过深入研究这些源码，你将能够更好地理解和掌握jQuery Mobile的精髓，从而在实际项目中游刃有余地构建出功能强大、用户体验优秀的移动应用。
`jqm中文时间控件`是专门为这种情况设计的一个插件，它整合了jQuery Mobile（jqm）框架的功能，并针对中文环境进行了优化。这个插件允许用户以直观、便捷的方式选择时间，提高了移动应用的用户体验。 jQuery Mobile...
综上所述，"jqm开发的音乐播放器"项目不仅展示了 jqMobi 在移动前端开发中的实用性，也体现了其在构建交互式音乐播放应用方面的潜力。开发者可以通过这个实例学习如何结合 jqMobi 的特性和 HTML5 的音频 API 来创建...
http://blog.csdn.net/chelen_jak/article/details/19397569 源码
3. **JavaScript文件**：jQuery Mobile库的JavaScript源码，可能有minified（压缩）和未压缩两种版本。 4. **图片资源**：用于组件和UI元素的图标和其他图像资源。 5. **文档**：可能包含API参考、教程或使用指南，...
jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解
jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全下载后评论反积分！ jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整...
【jqm4gwt-standalone-1.3.5.zip】是一个开源项目的压缩包，主要结合了jqm4gwt库与jQuery Mobile的所有依赖项，适用于GWT（Google Web Toolkit）开发。这个版本是1.3.5，意味着它是经过多次迭代和优化后的稳定版本。...
JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf
【jqm 模板简介】 jqm（jQuery Mobile）是一款基于 jQuery 库的移动应用框架，主要用于构建响应式、触控友好的移动Web界面。它提供了丰富的组件和样式，简化了移动网页开发，使得开发者可以快速创建具有统一设计...
标题"jQM:jQM文档的免费社区应用程序的源代码-app source code community"表明这是一个关于jQM（jQuery Mobile）的项目，它是一个免费的社区应用程序的源代码。jQM是一个用于构建响应式移动Web应用的前端框架，主要...
JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片[汇编].pdf
WebSocket 和 jQuery Mobile（jqm）是两种在现代Web开发中常用的技术。WebSocket提供了一种双向通信协议，使得浏览器和服务器可以进行实时、低延迟的数据交换，而jQuery Mobile（jqm）则是一个轻量级的移动设备框架...
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制
**jQuery Mobile图表（jqm chart）详解** 在移动设备逐渐普及的时代，开发适应手机和平板的Web应用变得越来越重要。jQuery Mobile（jqm）作为一款强大的前端框架，为构建响应式、触摸友好的移动Web应用提供了便利。...
`jqm带参数跳转`这个主题，涉及到的关键知识点包括：页面结构、页面链接、`data-url`属性、`data-rel`属性以及使用`data-transition`控制过渡效果。 首先，jQuery Mobile 使用一个单一 HTML 文件来构建多个“页面”...