KM盒子APP制作软件

自定义内页模版实现放大缩小和夜间模式

时间:2018-08-16 22:29 点击: 次

本节内容主要讲解，通过自定义内页模版实现，在内页底部浮动一个工具栏，添加放大、缩小和夜间模式功能，效果如下图：

一、制作内页模版操作步骤：

1、了解自定义内页模版的目录结构

首先，需要新建一个html文夹件，然后在里面新建一个page文件夹，在page文件夹中新建一个page.html文件。

2、了解自定义内页模版的标签

调用文章标题：{title}

调用文章内容：{body}

调用下一篇：{previous}

调用上一篇：{next}

调用版权信息：{copyright}

调用标题列表：

{list}

<li><a href="{liurl}" rel="external">{lit}</a></li>

{/list}

3、page.html代码如下： 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{title}</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="../css/mobile.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/mobile.js"></script>
<script type="text/javascript" src="../js/lightbox.js"></script>
<link rel="stylesheet" href="../css/lightbox.css" type="text/css">
<style>.kmimg{max-width:100%;height:auto;}
html,body,.ui-content,.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper{background-color:rgba(233, 223, 198, 0.3);}
.cover{position:fixed; top: 0px; left: 0px; z-index: 99999;}
</style>
<script>
//打开左侧面板
function openpl(){$("#pl01").panel("open");}
//放大缩小字体
var tgs = new Array( 'div','td','tr','p'); 
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' ); 
var startSz = 2; 
function ts( trgt,inc ) { 
if (!document.getElementById) return 
var d = document,cEl = null,sz = startSz,i,j,cTags; 
sz += inc; 
if ( sz < 0 ) sz = 0; 
if ( sz > 6 ) sz = 6; 
startSz = sz; 
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ]; 
cEl.style.fontSize = szs[ sz ]; 
for ( i = 0 ; i < tgs.length ; i++ ) { 
cTags = cEl.getElementsByTagName( tgs[ i ] ); 
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];}} 
//打开关闭夜间模式
var brightness;
function cover(brightness) {
    if (typeof(div) == 'undefined') {
        div = document.createElement('div');
        div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');
        document.body.appendChild(div);
    } else {
        div.style.display = '';
    }
    div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
}
function opennight(){
	cover(brightness = 0.2);
	}
function closnight(){
	cover(brightness = 0);
	}
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
  <a data-rel="back" data-icon="back">返回</a><h1>{title}</h1><a href = "#" data-role="button" data-icon="grid" onclick="openpl()">目录</a>
</div>
<div class="cover"></div>
<div data-role="content" id="content">
  {body}  
    <div data-role="controlgroup" data-type="horizontal" style="float:right; padding-right:25px; margin-bottom:50px;">
    <a href="../../index.html" rel="external" data-role="button" data-icon="home">首页</a>
    <a href="{previous}" rel="external" data-role="button">上一篇</a>
    <a href="{next}" rel="external" data-role="button">下一篇</a>
    </div>
</div>
<div data-role="footer" data-theme="b" style="width:100%;position:fixed; bottom:0;">
  <div data-role="navbar">
      <ul>
        <li><a href="#" onclick="openpl()">目录</a></li>
        <li><a href="javascript:ts('content',1)">+放大</a></li>
        <li><a href="javascript:ts('content',-1)">-缩小</a></li>
        <li><a href="#" onclick="opennight()">夜晚</a></li>
        <li><a href="#" onclick="closnight()">白天</a></li>
      </ul>
    </div>
</div>
<div data-role = "panel" id="pl01">
    <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入关键字查找...">
      {list}
      <li><a href="{liurl}" rel="external">{lit}</a></li>
      {/list}
    </ul>
</div>
</div>
</body>
</html>


二、如何使用自定义内页模版：

KM盒子自定义内页模版，主要通过查找附加资源文件夹下的html\page\page.html文件，通过模版标签进行输出内容。

在软件设置中附加资源文件，然后保存返回生成就可以了。



我要纠错