详解HTML5移动开发框架PhoneJS,读取数据库内容的表格

工具栏下方是一个自定义控件。在此,我们使用两个能够被PhoneJS编译通过的特殊CSS类:dx-fieldset和dx-field。控件包含一个显示账单总额的文本框,以及小费百分比、就餐人数的两个滑块。
 

:
读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会…

基于jquery横向手风琴效果,jquery横向手风琴

基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。效果图如下:

图片 1

在线预览    源码下载

效果图如下:

<div class="flash">
    <div class="con">
        <ul>
            <li class="current ti1">
                <h3>关于我们</h3>
                <div class="show">
                    <img src="images/big_1.jpg"/>
                    <img src="images/big_2.jpg"/>
                    <img src="images/big_3.jpg"/>
                    <img src="images/big_4.jpg"/>
                </div>
            </li>
            <li class="ti2">
                <h3>联系我们</h3>
                <div class="show">
                    <img src="images/big_5.jpg"/>
                    <img src="images/big_6.jpg"/>
                    <img src="images/big_7.jpg"/>
                    <img src="images/big_8.jpg"/>
                </div>
            </li>
            <li class="ti3">
                <h3>给我留言</h3>
                <div class="show">
                    <img src="images/big_1.jpg"/>
                    <img src="images/big_3.jpg"/>
                    <img src="images/big_5.jpg"/>
                    <img src="images/big_7.jpg"/>
                </div>
            </li>
            <li class="ti4">
                <h3>网站首页</h3>
                <div class="show">
                    <img src="images/big_2.jpg"/>
                    <img src="images/big_4.jpg"/>
                    <img src="images/big_6.jpg"/>
                    <img src="images/big_8.jpg"/>
                </div>
            </li>
        </ul>
    </div>
</div>

javascript代码:

var timer=null;
var i=0;
$(function(){
    $(".flash .con ul li").mouseover(function(){
        clearInterval(timer);
    });
    $(".flash .con ul li").click(function(){
        $(this).stop().animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
    });
    $(".flash .con ul li").mouseout(function(){
        timer=setInterval("startMove()",2000)
    });

})
function startMove(){
  i++;
  if(i>$(".flash .con ul li").length-1){i=0}
  $(".flash .con ul li").stop().eq(i).animate({width:"970px"},300).siblings().stop().animate({width:"46px"},300)
};
timer=setInterval("startMove()",2000)

via:

基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效。效果图如下…

1 2 3 var billTotal = ko.observable(),
``tipPercent = ko.observable(DEFAULT_TIP_PERCENT),
``splitNum = ko.observable(1);

//***********处理完成-生成数据.**********************************************************************************

  至此,就是使用PhoneJS开发一个简单的App的全过程,简单直接,一目了然。  
启动、调试、发布   和HTML5应用一样,启动、调试一款PhoneJS
App,必须对包含HTML和JavaScript源的文件夹及其它所需资源在Web服务器上进行部署。由于PhoneJS无服务器端组件,因此使用哪种Web服务器并没有什么区别,只要支持通过HTTP协议访问所需文件资源即可。一旦部署成功,你可以在设备或模拟器上打开App,当然,也可以在桌面浏览器上输入URL进行访问。
 
如果想要通过桌面浏览器查看在智能手机或平板电脑上的运行效果,就必须重新设置浏览器的UserAgent(用户代理)属性。幸好现在许多浏览器都为开发者提供了相关的开发工具,操作也就变得非常简单。
  图片 2  
当然,如果不想修改UserAgent设置,也可以使用Ripple
Emulator来模拟不同设备的运行效果。  
图片 3  
到现在,你已经开发出一个在移动设备浏览器上能够像原生App一样运行的Web
App。现代移动浏览器提供了本地存储、定位API和照相机接口。因此,对于创建像原生一样的Web
App而言,已经是万事俱备了。  
PhoneJS+PhoneGap:Web+Native,打造混合型App  
如果你想创建的并不仅仅只是一款Web App,而是能够上架App
Store的应用。你就可以通过PhoneGap创建一款混合型应用。  
对于大多数开发者而言,PhoneGap并不陌生,它是一个让你用普通的Web技术编写出能够轻松调用API和进入应用商店的HTML5应用开发平台,也是唯一一个支持7个平台的开源移动框架。使用PhoneGap需要具备目标平台的SDK,但无需知晓原生开发具体细节,开发者只需提供相应的HTML、CSS、JS文档,并设定App名称、版本、图标等属性即可。
  图片 4  
想要发布App,还必须在相应的开发门户网站完成开发者身份注册,除此之外,还必须具备各个平台的SDK当然。如果不想麻烦的话,还可通过PhoneGapBuild服务来解决这一问题。总而言之,如果你想要自己的Web应用拥有原生App的外观和体验,PhoneJS会是你最好的选择。当然,如果想要更进一步的话,还通过PhoneGap,开发一款融合Web和Native的混合型应用。
    文章来源:DZone

try {                                                                     //尝试使用较老版IE兼容的对象(Microsoft.XMLHTTP)
    request = new ActiveXObject(“Microsoft.XMLHTTP”);                     //—此对象将兼容新版本IE
}                                                                          //-
catch (failed) {                                                         //如果失败    catch (failed)
    request = false;                                                     //request = false
    alert(“Object Error!”);
    }
  }
}
defaultPages();
//————————————————————————————————————-*/

1 2 3 4 var totalTip = ko.computed(...);
var tipPerPerson = ko.computed(...);
var totalPerPerson = ko.computed(...);
var totalToPay = ko.computed(...);

复制代码 代码如下:

PhoneJS ViewModel(视图模型)  
在程序中使用视图模型可以带来很多好处,一个视图模型代表着视图所使用的数据和操作。每一个视图都有一个具备与视图本身相同的基名称,以及给视图返回视图模型的功能。而对于Home视图,则通过views/home.js脚本来定义创建相应视图模型的Home功能。
 

复制代码 代码如下:

一旦视图内的输入参数发生改变,程序就应立即禁用取整功能,以便用户查看精确数额。我们通过对UI度量值的变更来实现这一功能:
 

function defaultPages() {
    var url = “Demo.asp”;
    request.open(“GET”, url, true);                                        //open方法 (”方式”,url,是否异步)
    request.onreadystatechange = updatePage;                            //判断服务器处理的结果
    request.send(null);                                                    //送出.
}

1 2 3 4 5 6 7 8 9 billTotal.subscribe(``function``() {
``roundMode(ROUND_NONE); });
tipPercent.subscribe(``function``() { ``roundMode(ROUND_NONE);
}); splitNum.subscribe(``function``() {
``roundMode(ROUND_NONE); });

    if (request.readyState == 4){                                        //状态4—-完成.
    if (request.status == 200) {                                         //如果http状态为200–当成功获取获取数据.
        requestAllright();
    }else{                                                            //如果http状态为404–http报错.
        document.getElementById(“Status”).innerHTML = “Error:” + request.status;
        document.getElementById(“Pages”).innerHTML = “Previous│Next”;
    }
    }
}

1 2 3 TipCalculator.home = ``function``(params) { ``... };

‘下面这个Sub 是延迟用于调试ajax的loading
<% 
Sub TimeDelaySeconds(DelaySeconds) 
SecCount = 0 
Sec2 = 0 
While SecCount < DelaySeconds + 1 
Sec1 = Second(Time()) 
If Sec1 <> Sec2 Then 
Sec2 = Second(Time()) 
SecCount = SecCount + 1 
End If 
Wend 
End Sub 
TimeDelaySeconds(0)
%> 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<div class=``"round-buttons"``>
``<div data-bind=``"dxButton: { text: 'Round Down', clickAction: roundDown }"``></div>
``<div data-bind=``"dxButton: { text: 'Round Up', clickAction: roundUp }"``></div>
</div> <div id=``"results" class=``"dx-fieldset"``>
``<div class=``"dx-field"``>
``Total to pay
```      </div>` `

“dx-field”>`            ``Total per person
```      </div>` `

“dx-field”>`            ``Total tip
```      </div>` `

“dx-field”>`            ``Tip per person
```      `</div> </div>

    else if (Method == “Next”){
    var PageTemp = document.getElementById(“PageNow”).value;
    var PageNow = parseInt(PageTemp)+1;

1
<div data-bind=``"dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"``></div>

    var url = “Demo.asp?Page=”+PageNow;
    request.open(“GET”, url, true);    
    request.onreadystatechange = updatePage;
    request.send(null);
    }    
}

移动App开发框架可谓是数不胜数,而如今,基于HTML5的框架也变得越来越多。这些新一代的开发工具让开发者们无需精通原生SDK和Objective-C、Java等编程语言,即可直接进行移动应用开发。
  为什么HTML5会如此大受开发者欢迎?  
HTML5之所以被广泛应用,其中一条非常重要的原因就是BYOD的出现。BYOD来袭意味着开发者不需要再局限于某个单一平台,因为用户希望在他们日常使用的设备上都能运行这些App。通过HTML5,开发者可以在一个代码库的基础上开发适用于不同设备的App,其体验与原生App基本无异。不需要重复编程,也无需使用多重语言或SDK。现代Web浏览器的发展使HTML5能够实现跨平台、适用于不同设备的解决方案,这些方案与“原生”App体验极为相似,往往很难分清它究竟是原生开发还是使用HTML开发。
  图片 5  
多平台支持、投放市场时间以及维护成本低,HTML/JavaScript的优势还远不止于此。在缓解WinRT、Chrome
OS、Firefox
OS和Tizen等新兴技术所带来的长期风险方面,HTML的能力无出其右。简单来说就是,HTML/JavaScript就是唯一一个能够让应用跨平台的编程语言。
  当然,HTML/JavaScript也并非没有缺点。相比HTML5 App,Native
App所占用内存更少、响应更快。但只要在Web应用能够正常运行的所有情况中,你也可以做出一点让步,创建一个移动Web
App,或从单一代码库为应用商店、多平台打包应用。而这个时候使用HTML
JavaScript移动开发框架PhoneJS是最好不过的了,本文详细讲解了PhoneJS使用全过程,接下来,就让我们一起来看看吧。
  HTML5应用开发框架PhoneJS:移动App开发新选择  
PhoneJS是一个通用、灵活、高效的跨平台HTML5移动App开发框架,适配PhoneGap,是一个单页应用(SPA,single
page
application)框架,带有视图管理和URL导航。其布局引擎允许开发者在视图中设置抽象导航,如此一来,同一款App就可以根据不同的平台或因素进行调整。PhoneJS包含了iOS、Android、Windows
Phone 8等当今最流行的移动平台内置的一整套触屏优化UI组件。  
图片 6  
如果开发者想要进一步了解PhoneJS开发原理,以及创建、发布App的方法,可以登陆App
Store
Google PlayWindows Store下载其Demo应用Tip
Calculator
,也可以登陆GitHub下载该应用的完整源码。  
PhoneJS布局与导航  
TipCalculator是一个使用HTML5构建的单页应用。起始页是带有标准元标签、index.html以及CSS和JavaScript资源链接。它包含有一个JavaScript文件index.js的脚本引用,内有配置PhoneJS应用框架逻辑的代码:
 

function requestAllright() {
    var getStr = request.responseText;
    var getValue = getStr.split(“,”);
    var PageCount = getValue[0];
    var PageNow = getValue[1];

通过编辑器下方的两个按钮,我们可以对账单总额进行取整,而剩下的视图就用来显示计算结果。
   

    document.getElementById(“PageCount”).value = PageCount;
    document.getElementById(“PageNow”).value = PageNow;
    document.getElementById(“Status”).innerHTML = “Done with!”;

该语句是用来注册一个从URL检索视图名称的简单导航。主视图采用默认,每一个视图在其HTML文件中定义,并链接到主App页面index.html:
 

//上一页下一页处的判断,是否可以点击******************************************************************************************
    if (PageNow == PageCount){
    document.getElementById(“Pages”).innerHTML = “<a href=javascript:selectPages(‘Previous’,’0′); target=_self class=pagesTag>Previous</a>│Next”
    }
    else if (PageNow == 1){
    document.getElementById(“Pages”).innerHTML = “Previous│<a href=javascript:selectPages(‘Next’,’0′); target=_self class=pagesTag>Next</a>”
    }
    else if (PageNow != 1 || PageNow != PageCount){
    document.getElementById(“Pages”).innerHTML = “<a href=javascript:selectPages(‘Previous’,’0′); target=_self class=pagesTag>Previous</a>│<a href=javascript:selectPages(‘Next’,’0′); target=_self class=pagesTag>Next</a>”
    }
//上一页下一页处的判断,是否可以点击******************************************************************************************

发表评论

电子邮件地址不会被公开。 必填项已用*标注