响应式文件浏览管理器angular-filemanager【组件】

栏目: 编程语言 · AngularJS · 发布时间: 6年前

内容简介:响应式文件浏览管理器angular-filemanager【组件】

niki_响应式文件浏览管理器angular-filemanager_v1.0

插件描述:基于Spring Boot、AngularJS、CSS3、HTML5的响应式文件浏览管理器

angular-filemanager

功能介绍

多语言(英语,中文,西班牙语,俄语,葡萄牙语,法语,德语,意大利语,斯洛伐克语,希伯来语,波斯语,波兰语,乌克兰语,土耳其语)

多个模板(列表/图标)

多文件上传

多文件支持

为第三方应用选择文件回调

搜索文件

目录树导航

复制,移动,重命名(Interactive UX)

删除,编辑,预览,下载

文件权限(Unix chmod style)

移动支持

Drag and drop

Dropbox和Google云端硬盘的兼容性

扩展后端网桥(PHP,Java,Python,Node,.Net)

将jQuery迁移到native或angular.element

Backend API

Read the docs

在您现有的项目中使用

1)安装和使用bower install –save angular-filemanager

2)在项目中包含依赖项

<!– third party –>

<script src=”bower_components/angular/angular.min.js”></script>

<script src=”bower_components/angular-translate/angular-translate.min.js”></script>

<script src=”bower_components/jquery/dist/jquery.min.js”></script>

<script src=”bower_components/bootstrap/dist/js/bootstrap.min.js”></script>

<link rel=”stylesheet” href=”bower_components/bootswatch/paper/bootstrap.min.css” />

<!– angular-filemanager –>

<link rel=”stylesheet” href=”dist/angular-filemanager.min.css”>

<script src=”dist/angular-filemanager.min.js”></script>

在HTML中使用

<angular-filemanager></angular-filemanager>

使用源文件而不是缩小的JS

<!– Uncomment if you need to use raw source code

<script src=”src/js/app.js”></script>

<script src=”src/js/directives/directives.js”></script>

<script src=”src/js/filters/filters.js”></script>

<script src=”src/js/providers/config.js”></script>

<script src=”src/js/entities/chmod.js”></script>

<script src=”src/js/entities/item.js”></script>

<script src=”src/js/services/apihandler.js”></script>

<script src=”src/js/services/apimiddleware.js”></script>

<script src=”src/js/services/filenavigator.js”></script>

<script src=”src/js/providers/translations.js”></script>

<script src=”src/js/controllers/main.js”></script>

<script src=”src/js/controllers/selector-controller.js”></script>

<link href=”src/css/animations.css” rel=”stylesheet”>

<link href=”src/css/dialogs.css” rel=”stylesheet”>

<link href=”src/css/main.css” rel=”stylesheet”>

–>

<!– Comment if you need to use raw source code –>

<link href=”dist/angular-filemanager.min.css” rel=”stylesheet”>

<script src=”dist/angular-filemanager.min.js”></script>

<!– /Comment if you need to use raw source code –>

扩展配置文件

<script type="text/javascript">
angular.module('FileManagerApp').config(['fileManagerConfigProvider', function (config) {
var defaults = config.$get();
config.set({
appName: 'angular-filemanager',
pickCallback: function(item) {
var msg = 'Picked %s "%s" for external use'
.replace('%s', item.type)
.replace('%s', item.fullPath());
window.alert(msg);
},
allowedActions: angular.extend(defaults.allowedActions, {
pickFiles: true,
pickFolders: false,
}),
});
}]);
</script>

]

您可以通过扩展配置来做许多事情。 喜欢隐藏侧边栏或搜索按钮。 请参阅默认配置列表。angular-filemanager/src/js/providers/config.js

(function(angular) {
'use strict';
angular.module('FileManagerApp').provider('fileManagerConfig', function() {

var values = {
appName: 'angular-filemanager v1.5',
defaultLang: 'en',

listUrl: 'bridges/php/handler.php',
uploadUrl: 'bridges/php/handler.php',
renameUrl: 'bridges/php/handler.php',
copyUrl: 'bridges/php/handler.php',
moveUrl: 'bridges/php/handler.php',
removeUrl: 'bridges/php/handler.php',
editUrl: 'bridges/php/handler.php',
getContentUrl: 'bridges/php/handler.php',
createFolderUrl: 'bridges/php/handler.php',
downloadFileUrl: 'bridges/php/handler.php',
downloadMultipleUrl: 'bridges/php/handler.php',
compressUrl: 'bridges/php/handler.php',
extractUrl: 'bridges/php/handler.php',
permissionsUrl: 'bridges/php/handler.php',
basePath: '/',

searchForm: true,
sidebar: true,
breadcrumb: true,
allowedActions: {
upload: true,
rename: true,
move: true,
copy: true,
edit: true,
changePermissions: true,
compress: true,
compressChooseName: true,
extract: true,
download: true,
downloadMultiple: true,
preview: true,
remove: true,
createFolder: true,
pickFiles: false,
pickFolders: false
},

multipleDownloadFileName: 'angular-filemanager.zip',
filterFileExtensions: [],
showExtensionIcons: true,
showSizeForDirectories: false,
useBinarySizePrefixes: false,
downloadFilesByAjax: true,
previewImagesInModal: true,
enablePermissionsRecursive: true,
compressAsync: false,
extractAsync: false,
pickCallback: null,

isEditableFilePattern: /\.(txt|diff?|patch|svg|asc|cnf|cfg|conf|html?|.html|cfm|cgi|aspx?|ini|pl|py|md|css|cs|js|jsp|log|htaccess|htpasswd|gitignore|gitattributes|env|json|atom|eml|rss|markdown|sql|xml|xslt?|sh|rb|as|bat|cmd|cob|for|ftn|frm|frx|inc|lisp|scm|coffee|php[3-6]?|java|c|cbl|go|h|scala|vb|tmpl|lock|go|yml|yaml|tsv|lst)$/i,
isImageFilePattern: /\.(jpe?g|gif|bmp|png|svg|tiff?)$/i,
isExtractableFilePattern: /\.(gz|tar|rar|g?zip)$/i,
tplPath: 'src/templates'
};

return {
$get: function() {
return values;
},
set: function (constants) {
angular.extend(values, constants);
}
};

});
})(angular);

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/21368.html

响应式文件浏览管理器angular-filemanager【组件】

响应式文件浏览管理器angular-filemanager【组件】 微信打赏

响应式文件浏览管理器angular-filemanager【组件】 支付宝打赏

感谢您对作者Niki的打赏,我们会更加努力!    如果您想成为作者,请点我


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

电商产品经理宝典:电商后台系统产品逻辑全解析

电商产品经理宝典:电商后台系统产品逻辑全解析

刘志远 / 电子工业出版社 / 2017-10-1 / 49.00元

时至今日,对于产品经理的要求趋向业务型、平台型,甚至产生了细分领域专家。纯粹的前端产品经理(页面、交互)逐渐失去竞争力。而当后台产品经理的视野开始从功能延伸到模块,再延伸到子系统,最后关注整体系统时,就有了把控平台型产品的能力。 《电商产品经理宝典:电商后台系统产品逻辑全解析》围绕“电商后台产品”,从电商的整体产品架构入手,逐步剖析各支撑子系统。通过学习电商产品后台的架构和逻辑,可以让读者从......一起来看看 《电商产品经理宝典:电商后台系统产品逻辑全解析》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具