html5主流框架 html5框架代码

转载

mob64ca1417b0c6 2024-08-14 12:07:17

文章标签 html5主流框架 html5 框架 ico 标题栏 文章分类 HTML5 移动开发

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

代码下载：。

一、主页面

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

1. 标题栏

<div class="header">
         <span class="left"><imgid="menuBtn" src="images/menu.png"/></span>
         <spanclass="right"></span>
         <h1>移动HTML框架</h1>
</div>

2. 内容列表

<div class="pages"><divclass="pages-content">
         <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>
         </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>
         </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>
         </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></div>

3. 底部切换

<div class="foot">
         <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>
</div>

4. 左侧按钮

<div class="nav nav-left">
         <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>
</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. 列表

<div class="page">
         <divclass="header">
                   <spanclass="back"><img id="backBtn"src="images/back.png"/></span>
                   <spanclass="right"></span>
                   <h1>简单页面</h1>
         </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>
</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"?>
<view name="root"type="group/ZDZViewGroup">
         <viewname="baidu" type="view/ZDZImageView"source="fit:FIT_XY; images/back.jpg"  layout="group/ZDZParamFull" constraint="margin_top:64" />
         <view name="title"type="web/ZDZWebView" source="local:layout.html"layout="group/ZDZParamFull" constraint="fill_y:fix; align_y:top; height: 260" />
</view>

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

2. HTML页面

<div class="header">
         <spanclass="back"><img id="backBtn"src="images/back.png"/></span>
         <spanclass="right"></span>
         <h1>混合页面</h1>
</div>
<div class="search_bar">
         <table><tr><td>
                   <div><table><tr>
                            <tdclass="left"><canvasid="searchLine"></canvas></td>
                            <td><inputtype="text" id="fsearch" placeholder="请输入目的地" /></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>
<div class="zdz_lines zdz_lines_radio">
    <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>
<div class="zdz_lines zdz_lines_checkbox">
    <labelclass="zdz_line zdz_check_label" for="s11">
        <div class="zdz_line_hd">
            <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页面

<div class="page">
         <divclass="header">
                   <spanclass="back"><img id="backBtn"src="images/back.png"/></span>
                   <spanclass="right"></span>
                   <h1>对话框</h1>
         </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>
         </div>
</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方法显示内容，无需引入其他内容

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。