HTML5混合框架

本文档讲解如何使用ZDZSOFT的HTML框架开发混合手机应用。

代码下载：http://download.csdn.net/detail/popman320/9465037。

原文链接：http://www.zdzsoft.com/case/html.htm

一、主页面

如上图所示，页面包含标题栏、内容列表、底部切换和左侧按钮。

1. 标题栏

<spanclass="right"></span>

<h1>移动HTML框架</h1>

</div>

2. 内容列表

<divclass="page">

<divclass="content list">

<p></p>

<pclass="title"><imgsrc="images/zdz.png"/></p>

<pclass="info">北京掌舵者科技有限公司</p>

<ul>

<liclass="blank"></li>

<liclass="section">常用组件</li>

<liclass="line" id="singleBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">单页面</span>

<spanclass="more"><img src="images/detail.png"/></span>

</li>

<liclass="line" id="layoutBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">混合页面</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line" id="formBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">表单</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line" id="dlgBtn">

<spanclass="icon"><img src="images/home.png"/></span>

<spanclass="field">对话框</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="blank"></li>

</ul>

</div>

<divclass="page">

<divclass="content list">

<p></p>

<pclass="title"><img src="images/zdz.png"/></p>

<pclass="info">北京掌舵者科技有限公司</p>

<ul>

<liclass="blank"></li>

<liclass="section">常用事件</li>

<liclass="line" id="swipeBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">页面切换</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line" id="openBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">多视图切换</span>

<spanclass="more"><img src="images/detail.png"/></span>

</li>

<liclass="line" id="sideBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">侧边菜单</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line" id="callBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">调用服务器</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="blank"></li>

</ul>

</div>

<divclass="page">

<divclass="content list">

<p></p>

<pclass="title"><imgsrc="images/zdz.png"/></p>

<pclass="info">北京掌舵者科技有限公司</p>

<ul>

<liclass="blank"></li>

<liclass="section">本地数据</li>

<liclass="line" id="dataBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">个人数据</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line" id="wifiBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">wifi列表</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="blank"></li>

</ul>

</div>

<divclass="page">

<divclass="content list">

<p></p>

<pclass="title"><img src="images/zdz.png"/></p>

<pclass="info">北京掌舵者科技有限公司</p>

<ul>

<liclass="blank"></li>

<liclass="section">插件扩展</li>

<liclass="line" id="pluginBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">自定义插件</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="blank"></li>

</ul>

</div>

</div></div>

3. 底部切换

<divclass="tabbar">

<aclass="item">

<divclass="icon"><imgsrc="images/home.png"></div>

<pclass="label">组件</p>

</a>

<aclass="item">

<divclass="icon"><imgsrc="images/user.png"></div>

<pclass="label">事件</p>

</a>

<aclass="item">

<divclass="icon"><imgsrc="images/work.png"></div>

<pclass="label">数据</p>

</a>

<aclass="item">

<divclass="icon"><imgsrc="images/setting.png"></div>

<pclass="label">扩展</p>

</a>

</div>

4. 左侧按钮

<divclass="nav-content">

<p></p>

<pclass="title"><imgsrc="images/zdz.png"/></p>

<pclass="info">北京掌舵者科技有限公司</p>

<ul>

<liclass="blank"></li>

<liclass="section">菜单</li>

<liclass="line" id="callBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">菜单1</span>

</li>

<liclass="line" id="callBtn">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">菜单2</span>

</li>

<liclass="blank"></li>

</ul>

</div>

5. 事件响应

function onPageLoad() {

zdztool.full();

zdztool.click("menuBtn", onShowMenu);

zdztool.href("singleBtn", "single.html");

zdztool.href("layoutBtn", "layout.xml");

zdztool.href("formBtn", "form.html");

zdztool.href("dlgBtn", "dialog.html");

zdztool.href("swipeBtn", "pages.html");

zdztool.href("openBtn", "views.html");

zdztool.href("sideBtn", "side.html");

zdztool.href("callBtn", "call.html");

zdztool.href("dataBtn", "data.html");

zdztool.href("wifiBtn", "wifi.html");

zdztool.href("pluginBtn", "plugin.html");

}

function onShowMenu() {

zdztool.showLeftNav();

}

6. 代码说明

（1）页面初始化完成时，会自动检测是否存在onPageLoad这个函数，如果存在，则会调用。

（2） zdz和zdztool是两个很重要的js对象，封装了各种事件和功能函数。

（3） pages是多页面加载的方式，系统遇到这个标签时，会自动加载每个子页面，并且进行子页面排序编号。

（4） foot的tabbar标签是页面底部切换菜单，系统会自动将这个标签和上面的子页面进行绑定，完成页面切换的功能。

（5） nav和nav-left是指左侧弹出菜单，系统会自动将加载这个标签并放置在页面左侧隐藏的区域。

（6）为每个需要响应事件的页面标签添加id，并调用zdztool.click或zdztool.href方法设置跳转事件。一般不建议使用onclick方法，系统使用FastClick来实现跳转事件，延迟只有50ms。

二、列表页面

列表页面是一个简单的列表显示组件，用户可以在这个组件的基础上扩展样式和功能。

1. 列表

<divclass="header">

<spanclass="back"><img id="backBtn"src="images/back.png"/></span>

<spanclass="right"></span>

</div>

<divclass="content list">

<p></p>

<pclass="title"><imgsrc="images/zdz.png"/></p>

<pclass="info">北京掌舵者科技有限公司</p>

<ul>

<liclass="blank"></li>

<liclass="section">这是简单页面</li>

<liclass="line">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">记录 ...</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">记录 ...</span>

<spanclass="more"><img src="images/detail.png"/></span>

</li>

<liclass="line">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">记录 ...</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line">

<spanclass="icon"><img src="images/home.png"/></span>

<spanclass="field">记录 ...</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="line">

<spanclass="icon"><imgsrc="images/home.png"/></span>

<spanclass="field">记录 ...</span>

<spanclass="more"><imgsrc="images/detail.png"/></span>

</li>

<liclass="blank"></li>

</ul>

</div>

2. 事件响应

function onPageLoad() {

zdztool.full();

zdztool.click("backBtn",onPrevious);

}

function onPrevious() {

zdztool.previous();

}

3. 代码说明

（1）这里要注意的是，使用zdztool.previous函数，可以返回原来的主页面。

三、混合页面

混合页面使用原生的ZDZImageView来显示图片，在图片上定制菜单和搜索条。

1. 混合页面配置

<?xml version="1.0"encoding="utf-8"?>

<viewname="baidu" type="view/ZDZImageView"source="fit:FIT_XY; images/back.jpg" layout="group/ZDZParamFull" constraint="margin_top:64" />

</view>

配置了两个视图来显示该页面，其中ZDZImageView是原生图片显示组件，ZDZWebView是html显示组件，并定义了布局的约束条件。

2. HTML页面

<spanclass="back"><img id="backBtn"src="images/back.png"/></span>

<spanclass="right"></span>

</div>

<tdclass="left"><canvasid="searchLine"></canvas></td>

<tdclass="right" width="40px"><imgid="searchbtn" src="images/search.png"/></td>

</tr></table></div>

</td></tr></table>

</div>

显示一个标题栏和搜索条。

3. 事件响应

function onPageLoad() {

zdztool.searchline("#0099e8");

zdztool.click("backBtn",onPrevious);

}

function onPrevious() {

zdztool.previous();

}

4. 代码说明

（1） Html页面叠加在原生页面上

（2）原生页面的js可以通过View视图的id来调用原生视图提供的功能。

四、原生跳转页面

采用原生事件加载和跳转。

五、插件说明页面

扩展原生插件和功能。

六、表单页面

表单页面包含了常用的表单域组件。

1. 单选和多选页面

<div class="zdz_lines_title">单选列表项</div>

<labelclass="zdz_line zdz_check_label" for="x11">

<divclass="zdz_line_bd zdz_line_primary">

<p>zdz standard</p>

</div>

<divclass="zdz_line_ft">

<inputtype="radio" class="zdz_check" name="radio1"id="x11">

<spanclass="zdz_icon_checked"></span>

</div>

</label>

<labelclass="zdz_line zdz_check_label" for="x12">

<divclass="zdz_line_bd zdz_line_primary">

<p>zdz standard</p>

</div>

<divclass="zdz_line_ft">

<inputtype="radio" name="radio1" class="zdz_check"id="x12" checked="checked">

<spanclass="zdz_icon_checked"></span>

</div>

</label>

</div>

<div class="zdz_lines_title">复选列表项</div>

<labelclass="zdz_line zdz_check_label" for="s11">

<inputtype="checkbox" class="zdz_check"name="checkbox1" id="s11" checked="checked">

<iclass="zdz_icon_checked"></i>

</div>

<divclass="zdz_line_bd zdz_line_primary">

<p>standard is dealt for u.</p>

</div>

</label>

<labelclass="zdz_line zdz_check_label" for="s12">

<divclass="zdz_line_hd">

<inputtype="checkbox" name="checkbox1"class="zdz_check" id="s12">

<iclass="zdz_icon_checked"></i>

</div>

<divclass="zdz_line_bd zdz_line_primary">

<p>standard is dealicient for u.</p>

</div>

</label>

</div>

七、对话框和按钮页面

对话框页面包含了常用的对话框、Toast、动画等组件。

1. 对话框、Toast页面

<divclass="header">

<spanclass="back"><img id="backBtn"src="images/back.png"/></span>

<spanclass="right"></span>

</div>

<divclass="content list">

<p></p>

<pclass="title"><imgsrc="images/zdz.png"/></p>

<pclass="info">北京掌舵者科技有限公司</p>

<aid="alert" class="zdz_btn zdz_btn_primary">提示框</a>

<aid="confirm" class="zdz_btn zdz_btn_warn">对话框</a>

<aid="toast" class="zdz_btnzdz_btn_default">toast</a>

<divclass="button_sp_area">

<aid="load" class="zdz_btn zdz_btn_plain_default">加载动画</a>

<aid="hide" class="zdz_btn zdz_btn_plain_primary">取消动画</a>

</div>

2. 事件响应

function onPageLoad() {

zdztool.full();

zdztool.click("backBtn",onPrevious);

zdztool.click("alert", onAlert);

zdztool.click("confirm",onConfirm);

zdztool.click("toast", onToast);

zdztool.click("load", onLoad);

zdztool.click("hide", onHide);

}

function onPrevious() {

zdztool.previous();

}

function onAlert() {

zdztool.showAlert("警告","发生错误");

}

function onConfirm() {

zdztool.showConfirm("确认","请选择");

}

function onToast() {

zdztool.showToast("请选择");

}

function onLoad() {

zdztool.showLoading();

}

function onHide() {

zdztool.hideLoading();

}

3. 代码说明

（1）调用zdztool方法显示内容，无需引入其他内容

掌舵者科技

发布了10 篇原创文章 · 获赞 1 · 访问量 1万+

私信关注

猜你喜欢