移动混合开发之android文件管理新建文件和删除文件

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

今天经过一天超过8小时的实践，有很多CSS上的细节需要注意：

1，

/*注意是对before的操作*/
.content ul li .icon-check-empty:before{
display: block;
/*webFont设置其width和height时无效,只有设置font-size*/
/*width: 3rem;*/
/*height: 3rem;*/
font-size: 1.5rem;
position: absolute;
top:0;
left: 0;
bottom: 0;
padding: .75rem;
}

2.选择器的优先级

/*估计这个优先级没有 .down a{}的高,所以根本没执行
a.btn{} > .down a{} > .down a.btn{}
*/
/*.down a.btn{*/
/*background: lavender;*/
/*border: solid 1px grey;*/
/*border-radius: 5px;*/
/*padding: 5px;*/
/*}*/

.opeator a{
/*使用felx:1让内容平均分布*/
flex:1;
-webkit-box-flex: 1;
/*把webFont当作字体处理,字体居中*/
text-align: center;
text-decoration: none;
display: block;}

3.动画的设置

需要设置一个初始状态和结束状态，

.opeator{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3rem;
/*容器使用 display:felx属性*/
display:flex;
display: -webkit-flex; /* */
/*注意是transform*/
transition:-webkit-transform 0.3s ease-in;
transform: translateY(0) translateZ(0);
}.opeator.down {
transform: translateY(3rem) translateZ(0);
}

全部代码：

1.index.html

<!DOCTYPE html>

<html>
<head>

<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">

<link rel="stylesheet" type="text/css" href="./css/css/fontello.css">
<link rel="stylesheet" type="text/css" href="css/index.css"><br>

<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="icon-check-empty" id="check"></div>
<div class="file-icon"></div>
<div class="file-name">This is file name1</div>
</li>
</ul>
</div>
<div class="opeator" id="operator-nocheck">

<a class="icon-plus">新建</a>
<a class="icon-info">详细</a>
</div>
<div class="opeator" id="operator-checked" style="display: none">

<a class="icon-move">移动</a>
<a class="icon-docs">复制</a>
<a class="icon-trash-empty">删除</a>
</div> <div class="opeator down" id="operator-down" >
<a class="btn" id="confirm">确定</a>
<a class="btn" id="cancel">取消</a>
</div>
</div>
<div id="dialog-overlay">
<div id="title"></div>
<div id="dialogContent">

<div id="input-content">
<input type="text" id="file-name-input" placeholder="输入文件夹名">
</div>

<div id="btn-content">
<a class="btn" id="file-create">创建文件夹</a>
<a class="btn" id="file-cancel">取消</a>
</div>
</div>
</div>
</body>
</html>

2.index.css

3.index.js

/*
* 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.
*/
var app = {
// Application Constructor
initialize: function () {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function () {
// app.receivedEvent('deviceready');
$(function () {
myDeviceReady();
});
},
// Update DOM on a Received Event
receivedEvent: function (id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id);
}
};app.initialize();
var myscroll = null;function myDeviceReady() {
var size = $(window).width() / 18
//设计字体宽度
$('html').css('font-size', size);
myscroll = new IScroll("#file-list");
//打开文件夹
window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function (entry) {
fileDealer.openEntry(entry);
}, function () {
alert('fail');
}); //删除文件夹
$('.icon-trash-empty').bindtouch(function () {
var down = $('#operator-down');
down.data('action','delete');
down.removeClass('down');
}); //创建文件夹
$('.icon-plus').bindtouch(function () {
$('#dialog-overlay').css('display', 'block');
});
//fileDiolog
$('#file-create').bindtouch(function () {
// val获取value值
var fileName = $('#file-name-input').val();
if (fileName.length == 0 || fileName == undefined) {
return;
}
var curEntry = $('#current-dir').data('curEntry');
console.log(curEntry);
console.log(fileDealer);
fileDealer.createFile(curEntry, fileName);
}); $('#file-cancel').bindtouch(function () {
// alert('取消创建');
$('#dialog-overlay').css('display', 'none');
}); //confirm dialog
// 确定
$('#confirm').bindtouch(function () {
var down = $('#operator-down');
down.addClass('down');
var action = down.data('action');
console.log(action);
if (action == 'delete'){
$('.icon-ok-squared').each(function () {
var entry = $(this).parent().data('entry');
console.log(entry);
function success() {
console.log('文件删除成功!');
var curEntry = $('#current-dir').data('curEntry');
fileDealer.openEntry(curEntry);
}
function fail() {
alert('删除失败');
} if (entry.isFile) {
entry.remove(success, fail);
} else {
entry.removeRecursively(success, fail)
} });
}
});
// 取消
$('#cancel').bindtouch(function () {
$('#operator-down').addClass('down');
});
}function fileHander() {}/*--------------------创建文件夹-------------*/fileHander.prototype.createFile = function (entry, filename) {
console.log(1);
entry.getDirectory('./' + filename, {create: true}, function (dirEntry) {
console.log('创建成功!');
$('#dialog-overlay').css('display', 'none');
var curEntry = $('#current-dir').data('curEntry');
fileDealer.openEntry(curEntry);
}, function () {
alert('创建失败!');
});
}/*-------------------打开文件夹---------------------*/
fileHander.prototype.openEntry = function (entry) {
//使用克隆方式时,重新更新页面不能用,$('#file-list ul ).html(");
$('#file-list ul li.item').remove();
var curren_dir = $('#current-dir');
curren_dir.text("当前目录:" + entry.name)
curren_dir.data("curEntry", entry); $('#upper').bindtouch(
function () {
entry.getParent(function (entry) {
fileDealer.openEntry(entry);
}, function () {
alert('get Parent Error');
}
);
}
); entry.createReader().readEntries(function (entries) {
sortEntrise(entries);
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
//采用克隆方式,比较方便
var jObjectLi = $('.t').clone().removeClass('t').addClass('item');
jObjectLi.find('.file-name').text(entry.name);
//注意绑定事件在这里,不然没反应....
jObjectLi.find('#check').bindtouch(function () {
changeCheckState.bind(this)();
changeOperatorState();
}, true);
jObjectLi.data('entry', entry);
$('.list ul').append(jObjectLi);
jObjectLi.bindtouch(function () {
var liEntry = $(this).data('entry');
if (!liEntry.isFile) {
fileDealer.openEntry(liEntry);
}
});
}
myscroll.refresh();
},
function (error) {
alert(error);
});
}var fileDealer = new fileHander();function changeCheckState() {
var me = $(this);
if (me.hasClass('icon-check-empty')) {
me.removeClass('icon-check-empty');
me.addClass('icon-ok-squared');
} else {
me.addClass('icon-check-empty');
me.removeClass('icon-ok-squared');
}
}function changeOperatorState() {
var checkedOpera = $('#operator-checked');
var unChckOpera = $('#operator-nocheck'); if ($('.icon-ok-squared').length > 0) {
checkedOpera.show();
unChckOpera.hide();
} else {
checkedOpera.hide();
unChckOpera.show();
}
}//将文件和文件夹分离
function sortEntrise(entries) {
entries.sort(function (a, b) {
if (a.isFile && !b.isFile) {
return 1;
} else if (!a.isFile && b.isFile) {
return -1;
} else {
return a.name < b.name;
}
})
}/*------------添加点击事件--------------*/
//扩展为jQuery自定义函数$.fn.bindtouch = function (cb, bubble) {
attachMyEvent($(this), cb, bubble);
};function attachMyEvent(sr, cb, bubble) {
//click事件反应时间为300毫秒,因此取消click采用手动
//手指按下,若手指移动,则触发取消
sr.unbind();
var point_one = {};
var point_two = {};
sr.on('touchstart', function (event) {
var me = $(this)
me.data('touch', true);
var touch = event.originalEvent.targetTouches[0];
point_one.x = touch.pageX;
point_one.y = touch.pageY;
me.addClass('touchInside');
if (bubble) {
event.stopPropagation();
}
}); sr.on('touchend', function (event) {
var me = $(this);
if (me.data('touch') == true) {
//改变回调函数的this指针为sr
//触发回调函数
cb.bind(this)();
}
me.removeClass('touchInside')
me.data('touch', false);
if (bubble) {
event.stopPropagation();
}
}); sr.on('touchmove', function (event) {
var me = $(this);
var touch = event.originalEvent.targetTouches[0];
point_two.x = touch.pageX;
point_two.y = touch.pageY;
if (me.data('touch')) {
//华为手机测试,没有滑动也会触发touchmove,所以加测滑动距离,来判断是否滑动
var distane = getPointsDistance(point_one, point_two);
console.log(distane);
$('#log').text(distane);
if (distane > 4) {
me.data('touch', false);
me.removeClass('touchInside')
}
}
if (bubble) {
event.stopPropagation();
}
// alert(2);
});
}
//计算两点之间距离
function getPointsDistance(p1, p2) {
var xDistance = Math.abs(p1.x - p2.x);
var yDistance = Math.abs(p1.y - p2.y);
var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
return distance;
}