Home

Firefox OS app 开发笔记

教程

Your first app

系列影片：Firefox OS App 開發入門

Quick Guide For Firefox OS App Development

firefox os webapi

开发环境

按 使用应用管理器 的介绍安装Firefox OS Simulator

安装完毕后可以在工具 -> web开发者中找到相关启动项

按照前面的教程贴，需要生成一个目录，假设为myapp

编辑myapp目录下的manifest.webapp文件，设置权限，还有启动页面之类

在Firefox OS Simulator中指定该目录

剩下的就是纯 html5 + js 的开发

xhr的ajax请求，跨域，gb2312编码

参考： Firefox OS Tutorial : Episode 2 : Hello World

先编辑manifest.webapp，设置权限

"type": "privileged",
"permissions": {
    "systemXHR": { "description": "ajax xhr" }
}

js代码示例

var xhr = new XMLHttpRequest({mozSystem: true});
xhr.open("GET", "http://xxx.xxx.com/xxx", true); //true是异步，false是同步
xhr.overrideMimeType('text/html; charset=gb2312'); 

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        var $res = $.parseHTML(xhr.responseText,true);
        var somehtml = $res.find('#someid').html();
    }
}
xhr.send();

html5的localStorage本地缓存

可以用 lscache 库，支持指定缓存时间

官方接口为 localStorage.getItem / setItem

    var s = JSON.stringify(data);
    localStorage.setItem(key, s);

    var ds = localStorage.getItem(key);
    var d = JSON.parse(ds);

jquery mobile

基础教程：jquery mobile w3c

本地html之间跳转时，同时传递参数：jquery.mobile.paramsHandler

禁止 navbar 切换page时刷新闪屏

$.mobile.defaultPageTransition = 'none';

检查checkbox是否被选中

if($('#some_element').prop("checked")){
    alert($('#some_element').prop("value"));
}

跳转到顶部

$.mobile.silentScroll(0);

跳转到底部

$(document).scrollTop($(document).height());

等each全部执行完毕之后再执行

var s='';
$(h).find('.some_class').each(function() {
    s+=$(this).text() + "\n";
}).promise().done(function(){
    alert(s);
});

绑定click

$('#some_parent_node').on('click', 
'#some_click_node', function(){
    //some action
});

二层列表，支持搜索，自动展开

<div data-role="collapsible-set" data-inset="false" data-filter="true" id="some_filter">
<div data-role="collapsible">
<h3>test1</h3>
<ul data-role="listview" data-inset="false">
<li><a href="#someurl_a">someurl_a</a></li>
<li><a href="#someurl_b">someurl_b</a></li>
</ul>
</div>
<div data-role="collapsible">
<h3>test2</h3>
<ul data-role="listview" data-inset="false">
<li><a href="#someurl_c">someurl_c</a></li>
<li><a href="#someurl_d">someurl_d</a></li>
</ul>
</div>
</div>
$("#some_filter").on( "filterablefilter", function( event, ui ) {
    ui.items.each(function( index ) {
        $(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");
    });
});

textarea 文本框自动调节大小

用elastic库

$('textarea').elastic();

夜晚模式

<head>
<style>
</style>
</head>
<body>
<select name="night" data-role="slider" id="night_bgcolor"> 
              <option value="off">白天</option> 
              <option value="on">黑夜</option> 
</select> 

<div id="night_css" style="display:none;">
    body,div,table  {
    background-color: #000000;
    color: #f0efd0;
    }
    a:link  { color: #71baa5; }
    a:hover {color: #FFE900 !important; background-color: #363037 !important;}
</div>
</body>
$("#night_bgcolor").on("change", function () {
        var s= $(this).val()=='on' ?  $('#night_css').html() : ""; 
        $('head').find('style').html(s);
        });

调整字号

参考：jQuery之字体大小的设置方法

function font_click(ce, e){
        $(ce).click(function(){
            var thisEle = $(e).css("font-size"); 
            var textFontSize = parseFloat(thisEle , 10);
            var unit = thisEle.slice(-2); //获取单位
            var cName = $(this).attr("type");
            if(cName == "bigger"){
                    textFontSize += 2;
            }else if(cName == "smaller"){
                    textFontSize -= 2;
            }
            var sz = textFontSize + unit;
            $(e).css( "font-size" , sz );

            lscache.set('font-size', sz);
        });
}

font_click(".change_font_size", "body");
<div id="font_size_d"> 
字号： 
<a class="change_font_size" type="bigger">放大</a> 
&nbsp; 
<a class="change_font_size" type="smaller">缩小</a> 
</div>

Published

25 July 2014

Tags


Share On