移动混合开发之android文件管理新建文件和删除文件
生活随笔
收集整理的這篇文章主要介紹了
移动混合开发之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> <!--Licensed to the Apache Software Foundation (ASF) under oneor more contributor license agreements. See the NOTICE filedistributed with this work for additional informationregarding copyright ownership. The ASF licenses this fileto you under the Apache License, Version 2.0 (the"License"); you may not use this file except in compliancewith the License. You may obtain a copy of the License athttp://www.apache.org/licenses/LICENSE-2.0Unless 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 ANYKIND, either express or implied. See the License for thespecific language governing permissions and limitationsunder 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-policySome 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="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"><!--寫好類名,類名可查看fontello下載的demo--><a class="icon-plus">新建</a><a class="icon-info">詳細</a></div><div class="opeator" id="operator-checked" style="display: none"><!--寫好類名,類名可查看fontello下載的demo--><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布局--><div id="input-content"><input type="text" id="file-name-input" placeholder="輸入文件夾名"></div><!--注意采用div布局,這樣css會簡寫很多--><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
/** 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; /* *//*注意是transform*/transition:-webkit-transform 0.3s ease-in;transform: translateY(0) translateZ(0); }.opeator.down {transform: translateY(3rem) translateZ(0); }a{-webkit-user-select: none;user-select: none; }a.touchInside{background: lightgray;color: whitesmoke; }.opeator a{/*使用felx:1讓內容平均分布*/flex:1;-webkit-box-flex: 1;/*把webFont當作字體處理,字體居中*/text-align: center;text-decoration: none;display: block;}.content ul{list-style: none;padding: 0;margin: 0; }.content ul li{position: relative;height: 3rem;border-bottom: 1px solid gray;background: white; }.content ul li.touchInside{background: #efefef; }/*注意是對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; } .content ul li .icon-ok-squared: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;color: greenyellow; }.content ul li .file-icon{position: absolute;background: url("../img/file.png") no-repeat center;background-size: 1.5rem 1.5rem;width: 1.5rem;height: 1.5rem;left: 3rem;top:.75rem; }.content ul li .file-name{position: absolute;line-height: 3rem;left: 5rem; }.t{display: none; } #upper{position: absolute;right: 15px;top: 5px;color: blue; }#log{width: 200px;height: 30px;color: red;float: right; }/*重新定義圖標位置*/ .icon-plus:before{display: block;padding-top: 10px;/*這個會使字體不居中,直接指定fontSize就好*//*width: .3rem;*/font-size: 1.2rem; }.icon-info:before{display: block;padding-top: 10px;/*這個會使字體不居中,直接指定fontSize就好*/font-size: 1.2rem; }.icon-move:before{display: block;padding-top: 10px;/*這個會使字體不居中,直接指定fontSize就好*/font-size: 1.2rem; } .icon-docs:before{display: block;padding-top: 10px;/*這個會使字體不居中,直接指定fontSize就好*/font-size: 1.2rem; }.icon-trash-empty:before{display: block;padding-top: 10px;/*這個會使字體不居中,直接指定fontSize就好*/font-size: 1.2rem; }#dialog-overlay{display: none;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.3); }#title{font-size: 1rem;height: 1rem;padding: .3rem;text-align: center; }#dialogContent{text-align: center;background: #efefef;height: 8rem;position: absolute;left: 0;bottom: 0;right: 0; }#input-content{padding-top: 2rem;padding-bottom: 1rem; }#file-name-input{width: 16rem;padding: .3rem .4rem;font-size: 1rem; }/*估計這個優先級沒有 .down a{}的高,所以根本沒執行a.btn{} > .down a{} > .down a.btn{} */ /*.down a.btn{*//*background: lavender;*//*border: solid 1px grey;*//*border-radius: 5px;*//*padding: 5px;*/ /*}*/a#confirm {line-height:3rem; }a#cancel{line-height: 3rem; }a.btn{background: lavender;border: solid 1px grey;border-radius: 5px;padding: 5px; }a.btn.touchInside{background: lightgray;color: whitesmoke; }#btn-content{text-align: center;padding: .3rem; }
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 Constructorinitialize: 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 EventreceivedEvent: 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; }
轉載于:https://www.cnblogs.com/yqlog/p/5616804.html
總結
以上是生活随笔為你收集整理的移动混合开发之android文件管理新建文件和删除文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Lab01:Xv6 and Unix u
- 下一篇： Vue3、TypeScript 实现图片