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

内容简介：响应式文件浏览管理器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

微信打赏

支付宝打赏

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

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

查看所有标签

猜你喜欢:

• [ Laravel 5.7 文档 ] 基础组件 —— HTTP 响应
• [ Laravel 5.8 文档 ] 基础组件 —— HTTP 响应
• Binder+Handler，看组件生命周期如何被响应
• DevExtreme 18.2 发布，响应式 Web 开发 JS 组件
• Android官方架构组件Paging-Ex:列表状态的响应式管理
• 异步响应式 RPC 框架 turbo-rpc 0.0.4 发布，升级组件

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