移动混合开发之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 ...
随机推荐
- VB模拟键盘输入的N种方法
VB模拟键盘输入的N种方法http://bbs.csdn.net/topics/90509805hd378发表于: 2006-12-24 14:35:39用VB模拟键盘事件的N种方法 键盘是我们使用计 ...
- 从resfful API设计到加密算法
众所周知,SOAP 是基于XML的webservice协议,传的数据都是xml格式的,而当下resftul设计比较火,因为快效率高,但是安全性就不及SOAP, SOAP定义了xml-security的 ...
- ps
快速恢复默认值 有些不擅长Photoshop的朋友为了调整出满意的效果真是几经周折,结果发现还是原来的默认效果最好,这下傻了眼,后悔不该当初呀!怎么恢复到默认值呀?试着轻轻点按选项栏上的工具图标,然 ...
- 【转】Pycharm的激活
如果要基于Python进行开发的话,那么pycharm是个不错的选择,试用一个月以后需要激活,原文如下: 原文链接:http://blog.csdn.net/lanchunhui/article/de ...
- 在Mac上安装Sublime Text3的插件
首先安装插件管理器Package Control 打开Sublime, 按下快捷键 ctrl+', 然后粘贴下面的代码,然后按回车键: import urllib.request,os; pf = ' ...
- [MISS静IOS开发原创文摘]-AppDelegate存储全局变量和 NSUserDefaults standardUserDefaults 通过模型保存和读取数据,存储自定义的对象
由于app开发的需求,需要从api接口获得json格式数据并保存临时的 app的主题颜色 和 相关url 方案有很多种: 1, 通过AppDelegate保存为全局变量,再获取 2,使用NSUSerD ...
- 无废话SharePoint入门教程一[SharePoint概述]
一.前言 听说SharePoint也有一段时间了,可一直处在门外.最近被调到SharePoint实施项目小组,就随着工作一起学习了一下实施与开发.但苦于网上SharePoint入门的东西实在太少,导致 ...
- C宏展开的几个注意事项
前阵子仔细重新研究了一下C的宏展开.总结起来,有以下几个主要规则: 每次宏展开的结果会被重复扫描,直到没有任何可展开的宏为止. 每展开一个宏,都会记住这次展开,在这个宏展开的结果及其后续展开中,不再对 ...
- x64内联汇编注意点
#include <windows.h> #include <stdio.h> extern "C" int MyPrintf(ULONGLONG,ULON ...
- .net 附加W3wp进程
步骤:1.鼠标右键点击application项目中的web,找到属性 2.修改web服务器地址(如果使用localhost报错,则http://电脑IP/): 3.在本地iis中找到你部署的网站,点击 ...