移动混合开发之android文件管理-->flexbox，webFont。
增加操作栏，使用felxbox居中，felx相关参考网址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
使用webFont添加图标,webFont下载地址为http://fontello.com/
index.html：
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta charset="utf-8">
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--引入webFont,fontello.css里面已经定义好font-family,只是需要设置类名,单独写css控制位置即可-->
<link rel="stylesheet" type="text/css" href="./css/css/fontello.css">
<link rel="stylesheet" type="text/css" href="css/index.css"><br>
<!----引入jQuery----!>
<!--引入滑动第三方库,让列表滑动-->
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/iscroll-lite.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Hello World</title>
</head>
<body>
<div id="log"></div>
<div class="head">
极客浏览器
</div>
<!--自定义布局,没有使用第三方框架-->
<div class="content">
<div class="nav">
<div id="current-dir"></div>
<div id="upper">上一级</div>
</div>
<div class="list" id="file-list">
<ul >
<li class="t">
<div class="file-icon"></div>
<div class="file-name">This is file name1</div>
</li>
</ul>
</div>
<div class="opeator">
<!--写好类名,类名可查看fontello下载的demo-->
<a class="icon-trash-empty">新建文件夹</a>
<a class="icon-server">复制</a>
<a class="icon-html5">删除</a>
</div>
</div>
</body>
</html>
index.css
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
} .head{
position:absolute;
left:0;
right:0;
top:0;
height:2rem;
line-height: 2rem;
background-color:orange;
padding-left:.3rem;
color: white;
text-align: center;
} .content{
position:absolute;
top:2rem;
bottom:0;
left:0;
right:0;
overflow: hidden;
}
.content .nav{
position: absolute;
top: 0;
height: 1.5rem;
left: 0;
right: 0;
background: #efefef;
} .content .list{
position: absolute;
top: 1.5rem;
left: 0;
right: 0;
bottom: 3rem;
background: #adadad;
overflow: hidden;
} .opeator{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3rem;
/*容器使用 display:felx属性*/
display:flex;
display: -webkit-flex; /* */
} .opeator a{
/*使用felx:1让内容平均分布*/
flex:1;
-webkit-box-flex: 1;
/*把webFont当作字体处理,字体居中*/
text-align: center;
}
.content ul{
list-style: none;
padding: 0;
margin: 0;
} .content ul li{
position: relative;
height: 4rem;
line-height: 2rem;
padding-left: .5rem ;
border-bottom: 1px solid gray;
background: white;
}
.content ul li.touchInside{
background: #efefef;
}
.content ul li .file-icon{
position: absolute;
background: url("../img/file.png") no-repeat center;
background-size: 1.2rem 1.2rem;
width: 1.2rem;
height: 1.2rem;
left: 1rem;
top:.3rem;
}
.content ul li .file-name{
position: absolute;
line-height: 2rem;
left: 3.2rem;
} .t{
display: none;
}
#upper{
position: absolute;
right: 15px;
top: 5px;
color: blue;
} #log{
width: 200px;
height: 30px;
color: red;
float: right;
} /*重新定义图标位置*/
.trash:before{
display: block;
padding-top: 10px;
/*这个会使字体不居中,直接指定fontSize就好*/
font-size: 1.2rem;
} .icon-server:before{
display: block;
padding-top: 10px;
/*这个会使字体不居中,直接指定fontSize就好*/
font-size: 1.2rem;
} .icon-html5:before{
display: block;
padding-top: 10px;
/*这个会使字体不居中,直接指定fontSize就好*/
font-size: 1.2rem;
}
index.js 暂无变化，参考上一篇随笔
移动混合开发之android文件管理-->flexbox，webFont。的更多相关文章
- 移动混合开发之android文件管理新建文件和删除文件
今天经过一天超过8小时的实践,有很多CSS上的细节需要注意: 1, /*注意是对before的操作*/ .content ul li .icon-check-empty:before{ display ...
- 移动混合开发之android文件管理demo
框架采用cordova,android编译环境为android studio.系统为mac,cordova 环境搭建参考网址:http://cordova.apache.org/docs/en/5.0 ...
- Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...
- Android混合开发之WebView与Javascript交互
前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...
- Android混合开发之WebView使用总结
前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...
- 基于xmpp openfire smack开发之Android客户端开发[3]
在上两篇文章中,我们依次介绍openfire部署以及smack常用API的使用,这一节中我们着力介绍如何基于asmack开发一个Android的客户端,本篇的重点在实践,讲解和原理环节,大家可以参考前 ...
- 混合开发之DSBridge(同时支持Android和iOS)
什么是 Javascript bridge 随着h5的不断普及及优化,以及移动端对动态化的需求越来越大,开发者经常需要在app中嵌入一些网页,然后会在web和native之间进行交互,如传递数据,调用 ...
- Android 开发之Android 应用程序如何调用支付宝接口
1.到支付宝官网,下载支付宝集成开发包 由于android设备一般用的都是无线支付,所以我们申请的就是支付宝无线快捷支付接口.下面是申请的地址以及下载接口开发包的网址:https://b.alipay ...
- iOS 混合开发之 Cordova 实践
在15年时,之前公司使用 Cordova 做混合开发使用,后来公司没有用到了,现在重新记录下. Cordova (官网:http://cordova.apache.org/)简介: Apache Co ...
随机推荐
- 解决Mac下MX4手机无法连接adb问题之解决方案
一般的android连接mac 很方便不用安装驱动就可以啦,可是不知道为什么特殊情况下有的android手机(小米2,华为等)就是连接不上,下来就说说特殊情况下如何连接. 使用USB连接安卓手机后可以 ...
- Student elective system (VF)
博客插N+文件有些麻烦,索性PDF上传到百度文库 点击获取<数据库系统原理与应用>也有相应的word版本 word版加密密码:(博客链接加密后) 六.附录 数据库设计的基本步骤,按照规范设 ...
- instanceof 与isAssignableFrom
instanceof 针对实例 isAssignableFrom针对class对象 isAssignableFrom 是用来判断一个类Class1和另一个类Class2是否相同或是另一个类的超类或 ...
- Python中文乱码
1,注意:请使用智慧型浏览器 "CHROME" 配合理解和运作本文中提到的程序. 2,提示:谷歌的CHROME浏览器是迄今为止最智慧的浏览器,没有之一,只有第一. 3,谷歌的CHR ...
- JavaScript实现快速排序
思想: 通过分治思想.递归方法将数据依次分解为包含较小元素和较大元素的不同子序列 1.在数组中选择一个元素为基准 2.对数组进行遍历,小于基准的元素都移到基准的左边,大于基准的元素都移到基准的右边 3 ...
- Hprose question
1 在服务端 接口的开发中 如果定义了index()方法 中间不能够有参数,否则报错. 2 接口方法中的参数 最好使用单参数 如fun($uid ) 或者 如果需要多个参数 fun($param){$ ...
- SQLite3中自增主键归零方法
当SQLite数据库中包含自增列时,会自动建立一个名为 sqlite_sequence 的表.这个表包含两个列:name和seq.name记录自增列所在的表,seq记录当前序号(下一条记录的编号就是当 ...
- mybatis高级(3)_延迟加载_深度延迟_一级缓存_二级缓存
设置延迟加载需要在mybatis.xml中设置 注: 侵入式延迟加载为真时是延迟加载 侵入式延迟加载为假时是深度延迟加载 <!-- 延迟加载和深度延迟加载 --> <settings ...
- 关于css
已经学了四天的css.现在对于css的了解还很肤浅,首先,我对基础的还不是很了解. 级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Shee ...
- 无废话SharePoint入门教程四[创建SharePoint母版页]
一.前言 文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建HTML页面 2.将HTML文件转换为SharePoint母版页 3.在 SPD中修改母版页“PlaceHolderMai ...