内容简介：响应式文件浏览管理器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 发布，升级组件
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
