App Framework与jqMobi与 jQuery Mobile的渊源
2016-03-16 12:20
369 查看
App Framework 前生是是叫 jqMobi 注意大家不要和 jQuery Mobile 混淆了,它们是两个不同的框架
// jQ.Mobi中header和footer(#navbar)的隐藏
// 每个panel页面不一定都有上面所属的三个板块,如果想要隐藏header和footer(#navbar)在jQ.Mobi中也很方面就能实现,只需在panel中设置对应标签即可。隐藏header只需设置data-header="none"。
<!--header 隐藏-->
<div title="home" class="panel" data-header="none">
</div>
// 相应隐藏footer(#navbar)只需设置data-footer="none"
<!--footer(#navbar)隐藏-->
<div title="home" class="panel" data-footer="none">
</div>
var webRoot = "./"; //初始化默认设置 $.ui.animateHeaders = false; //禁止头部动画 $.ui.useOSThemes = false; //禁止自动选择皮肤 $.ui.autoLaunch = false; //自动初始化 $.ui.openLinksNewTab = false; //禁止在新窗口打开页面? $.ui.splitview = false; //禁止大于某个分辨率自动展开菜单 $.ui.resetScrollers = false; //后退禁止页面回到顶部 $.ui.backButtonText = " "; //设置后退按钮文字 //所有页面默认过度方式 修改最后面的参数即可 //设置为pop $.ui.availableTransitions["default"] = $.ui.availableTransitions.pop; //设置为无 $.ui.availableTransitions["default"] = $.ui.noTransition; $.ui.availableTransitions["default"] = $.ui.availableTransitions.none;
//获取当前页面id $.ui.activeDiv.id <pre name="code" class="javascript">// 设置左边菜单的宽度为 整个页面的宽度减去50px;(不能用来控制,要在js中修改) // $.ui.setLeftSideMenuWidth($("#afui").width()-50);
// panel设置 selected="true" 默认页面 data-title="string" header 部分显示的标题(需要存在h1标签) data-header="id" 通过dom的id调用不同的 header ,注意使用<header></header> data-footer="id" 通过dom的id调用不同的 footer ,注意使用<footer></footer> data-nav="id" 通过dom的id调用不同的 nav(侧边拦) data-tab="id" 这里的 id 为 navbar 子元素 的id ,能够控制对应的高亮 data-defer="xx.html" 加载外部页面,便于管理project data-load="function" 页面载入时触发的函数 data-unload="function" 页面卸载时触发的函数 modal="true" 设置页面的全屏 style="overflow:hidden" 没有滚动条 js-scrolling="true" 禁用本页面的滚动条
// jQ.Mobi中header和footer(#navbar)的隐藏
// 每个panel页面不一定都有上面所属的三个板块,如果想要隐藏header和footer(#navbar)在jQ.Mobi中也很方面就能实现,只需在panel中设置对应标签即可。隐藏header只需设置data-header="none"。
<!--header 隐藏-->
<div title="home" class="panel" data-header="none">
</div>
// 相应隐藏footer(#navbar)只需设置data-footer="none"
<!--footer(#navbar)隐藏-->
<div title="home" class="panel" data-footer="none">
</div>
// 禁止滚动 // jQ.Mobi中页面默认滚动,如果想要禁止滚动,这需在panel中设置style="overflow:hidden" <!--禁止滚动--> <div title="home" class="panel" style="overflow:hidden"> </div>
// jQ.Mobi中使用iScroll实现更高级的滚动 // jQ.Mobi中默认支持滚动是整个panel都滚动,如果想要panel页面中的部分滚动,最常见的场景便是搜索框不滚动,下面的结果滚动,这种情况jQ.Mobi便没法实现了(或者我没发现?),可行的解决方案就是使用大名鼎鼎的iScroll 。 // 在复杂的场景中推荐使用iScroll,因为最新iScroll 4 做了很多兼容性的处理和扩展,添加了缩放、下拉式刷新、自定义滚动条、元素捕捉以及更多更高级别可编程性的自定义事件。 // 结合上面的滚动原理, iScroll理想的HTML结构为: <div id="wrapper"> <ul> <li></li> ... ... </ul> </div> // 因此若要使用iScroll最好在代码布局的时候就考虑清楚,免得以后麻烦。
// jQ.Mobi中字体模糊问题 // 低版本iOS(6以下)中字体(特别是动画滚动中的字体)模糊的问题较为复杂,可能的原因主要有两点: // -webkit-transform: translate3d (0,0,0)使用所造成的问题。 // 处理大量数据引起字体渲染所需内存分配不够。 // 根据经验第一个可行的解决方案为: -webkit-perspective:0px!important; -webkit-backface-visibility:visible!important; -webkit-font-smoothing: subpixel-antialiased;
// 关于popup plugin a、$("#afui").popup({........}); b、$(document.body).popup({........}) b方法在android环境下,input控件无法获得焦点,换成a方法成功。
// 画面迁移的时候,会产生变形(android)。 // 问题:采用了jsrender为模板的画面,在画面来回迁移的时候,会经常产生画面变形的现象。 // 解决:每次画面切换的时候调用unload清除前画面(尤其是有list的)内容
相关文章推荐
- android中handler的使用
- 【游戏客户端开发】 IOS开发——Swift基础篇2
- iOS-异或加密
- Android自定义控件--圆形进度条(中间有图diao)
- 0116android错误总结
- android程序编写规范化
- 【游戏客户端开发】 IOS开发——Swift和Objective-C交互时的一些注意点
- 【游戏客户端开发】 IOS开发——Swift基础篇1
- [Object-C] 多语言支持 繁体中文(台湾)不起作用
- Android的四大组件
- Android项目中常用的工具类集
- 【游戏客户端开发】Unity3D 学习笔记4 —— UGUI+uLua游戏框架
- android 截屏
- Android的生命周期
- Android模拟器
- 【游戏客户端开发】Unity3D 学习笔记3——Unity3D资源目录及资源读取
- Android图片海报制作-MVP的使用
- 自定义Cordova-Android插件
- 【游戏客户端开发】Unity3D 学习笔记2——了解U3D引擎的操作面板和各种工具
- android Gallery2 onPause时候,其背景界面显示黑色