sophiafei_2000的博客

原创 header如何设置为图片

转载 深入理解高度。获取屏幕、webview、软键盘高度

如果没有手动调整过webview的高度的话，默认情况下，屏幕的高度=顶部状态栏的高度+webview的高度。如果软键盘打开，则屏幕的高度=顶部状态栏的高度+webview的高度+软键盘的高度。HTML5 规范目前没有提供状态栏高度和软键盘高度的直接的查询方法，不过有了Native.js，我们还是能查询到所有这些高度的数值。背景知识介绍：手机屏幕有真实的物理分辨率，比如小米not

原创 mui 启动页和引导页

一、启动页和引导页的概念“启动页”（splash）：app的启动界面，每次启动都会看到的（每次打开QQ都会看到一只企鹅）。“引导页”（guide）：guide是否展示是可控的，通常首次启动时显示，从第二次启动开始，引导页就不再显示，而是直接进入App主界面了。二、启动页的设置1. 在manifest.json文件中在manifest.json文件的“启动图片（splash）配置

原创 html中插入图片

.headImg { padding: 8% 0px 13% 0px; background: url(img/bg.jpeg); background-position: center center; background-size: 100% auto; } 如果图片为底层，其上有内容，则在上述和之间插入代码；如果图片和其它网页内容上下排列，

原创 html 中设置背景图铺满整个页面

html,body{ width: 100%; height: 100%; } .mui-content{ background: url(img/bg.jpeg) bottom center no-repeat #efeff4 ; background-size: 100% 100%; width: 100%; height: 100

原创 app编写时注意的问题

1.判断是否处于登录状态，可通过判断本机内存中的登录标志完成。2.某些ajax访问，代码可放在单独的js文件中。

原创 JS 关于(function(w) {...})(window)写法的理解——立即执行函数

1.前半部分(function(){ })(function(){ })：函数的定义表示一个匿名函数。function(arg){...}定义了一个参数为arg的匿名函数。所以(function(w) { ...})即为一个参数为w的匿名函数。2.后半部分(window)(window)：传参并执行3.立即执行函数 IIFE(Immediately-Invoke

转载 mui开发APP教程之mui.ajax请求后出现“加载中”

利用mui.ajax向服务器请求数据会出现请求超时的情况，一般若是10S之后还没有响应，就会定义为超时，那么出错了的时候，这10秒钟不可能给用户白屏，即便是请求成功之后打开一个新页面，那么这个间隔时间也给用户响应。但是mui 的ajax并没有实现类似jquery的ajaxStart 和 ajaxStop方法，然而在移动端上这两个方法还是比较常用的，比如在向后台提交数据的时候显示loadin

转载 MUI——页面的创建、显示、关闭

一、打开子页面mui.init({ subpages:[{ url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址 id:your-subpage-id,//子页面标志 styles:{ top:subpage-top-position,//子页面顶部位置 bottom:subpa

原创 初始化bar页面和选项卡点击监听

例一代码段：var barItemWebviewArray = [];var title = document.getElementById("title");mainWebview = plus.webview.currentWebview();//获取当前窗口的WebviewObject对象var subpages = ['carNoInquiry.html','planNoInqui

原创 页面操作全部采用调用函数方法实现（包括监听事件）

mui.plusReady(function() { //改变statusbar plus.navigator.setStatusBarBackground('#41cea9'); navtitle = document.getElementById('nav-title'); mainWebView = plus.webview.currentWebview();

原创 点击选项卡后页面标题切换的实现

初始化 首页navtitle = document.getElementById('nav-title');监听到选项卡点击事件后1. 更换标题方法一：var tabitem = this;navtitle.innerText = tabitem.children[tabitem.children.length - 1].innerText; 2.

原创 页面各部分颜色设置及底部选项卡页面布置

1. 设置系统状态栏背景色：plus.navigator.setStatusBarBackground2. 整页背景色的设置html文件中：own-gray-color”-->css文件中：设置自定义类背景颜色.own-gray-color { background-color: #EBEBF1;}3.标题文字颜色和标题背景色的设置html文

原创 输入框输入数据格式合法性验证

//检查各重量输入框输入格式是否正确 mui('.mui-input-group').on('change','.valueNeedCheck',function(){ var valueToCheck=this.value; if (!checkNumber(valueToCheck)){ this.value=""; this.focu

原创 监听列表点击事件（打开新页面并实现页面传值）

父页： carNoList = document.getElementById('carNoList');//监听车号列表点击事件 //function choiceCarNo(){ mui("#carNoList").on('tap', 'li', function(){ var carnochoosed = this.innerHTML.substr

原创 避免input输入框输入时底部导航栏被软键盘撑挤上来

//获取原始窗口的高度 var originalHeight=document.documentElement.clientHeight || document.body.clientHeight; //console.info("原始窗口的高度"+originalHeight); window.onresize=function(){ //软键盘弹起与隐藏 都会

原创 手机返回键处理

//返回键处理 //处理逻辑：2秒内，连续两次按返回键，则退出应用 var first = null; mui.back = function(){ //首次按键，提示‘再按一次退出应用’ if(!first){ fir

原创 按起止时间查询数据并实现“上拉显示更多”

html, body, .mui-content { height: 0px; margin: 0px; background-color: #efeff4; } h5.mui-content-padded { margin-left: 3px; margin-top: 20px !important; }

原创 二维码扫描并对扫描结果实现页面传值

#bcid{ width: 100%; height: 100%; position: absolute; background: #000000; } html, body ,div{ height:100%; width: 100%; } .fbt{ color: #0E76E1; width: 50%; backgroun