基于 jQuery 的智能动态弹出上下文菜单脚本，用于在线文件管理器
4.55/5 (7投票s)
此 jQuery 脚本专用于数据库驱动的在线文件管理器。
引言
此脚本专用于在线文件管理器 CMS 和 Web 应用程序。它的一个优点是，您可以仅通过定义一些重要声明来创建弹出菜单，而无需编写静态代码。
调用方法
$(document).ready(function(){
$(".wrapper").smartPopup({
config:{
file_folder:true,
file:true,
folder:true,
wall:true
},
file_folder:{
instant_class:"icon",
selected_class:"selected",
on_context:"make_selected",
config:{
admin:false,
normal:true,
trash:false
},
menu:{
normal:[
{
id:"copy_command",
text:"Copy",
method:"copy",
image_url:"images/copy.png",
has_extend:false
},
{
id:"cut_command",
text:"Cut",
method:"cut",
image_url:"images/move.png",
has_extend:false,
short_cut:"Ctrl + X"
},
{
id:"rename_command",
text:"Rename",
method:"rename",
image_url:"images/rename.png",
has_extend:false,
short_cut:"F2"
},
{
id:"trash_command",
text:"Trash",
method:"trash",
image_url:"images/trash.png",
has_extend:false,
short_cut:"Del"
},
{
id:"share_command",
text:"Share",
method:"share",
image_url:"images/public.png",
has_extend:false,
short_cut:"F3",
has_pre_bar:true
},
{
id:"properties_command",
text:"Properties",
method:"properties",
image_url:"images/edit.png",
has_extend:false,
short_cut:"F4"
},
],
trash:[
{
id:"restore_command",
text:"Restore",
method:"restore",
image_url:"images/recover.png",
has_extend:false,
short_cut:"Ctrl+R"
},
{
id:"cut_command",
text:"Cut",
method:"cut",
image_url:"images/move.png",
has_extend:false,
short_cut:"Ctrl + X"
},
{
id:"properties_command",
text:"Properties",
method:"properties",
image_url:"images/edit.png",
has_extend:false,
short_cut:"F4"
}
],
admin:[
{
id:"delete_command",
text:"Delete",
method:"delete",
image_url:"images/delete.png",
has_extend:false,
short_cut:"Sht + Del"
}
]
}
},
file:{
instant_class:"file",
on_context:"",
config:{
normal:true
},
menu:{
normal:[
{
id:"download_command",
text:"Download",
method:"download",
image_url:"images/download.png",
has_extend:false,
short_cut:"Ctrl+D"
}
]
}
},
folder:{
instant_class:"folder",
on_context:"",
config:{
normal:true
},
menu:{
normal:[
{
id:"paste_command",
text:"Paste",
method:"paste",
image_url:"images/paste.png",
has_extend:false,
short_cut:"Ctrl+V"
}
]
}
},
wall:{
instant_class:unDot($(this).selector),
on_context:"",
config:{
normal:true
},
menu:{
normal:[
{
id:"paste_command",
text:"Paste",
method:"paste",
image_url:"images/paste.png",
has_extend:false,
short_cut:"Ctrl+V"
},
{
id:"refresh_command",
text:"Refresh",
method:"refresh",
image_url:"images/refresh.png",
has_extend:false,
short_cut:"Ctrl + X"
},
{
id:"sort_by_command",
text:"Sort by",
method:"sort_by",
image_url:"",
has_extend:true,
sub_menu:"sort_by_context",
short_cut:"F6",
image_off:true
},
{
id:"properties_command",
text:"Properties",
method:"properties",
image_url:"images/edit.png",
has_extend:true,
sub_menu:"test_context",
short_cut:"F4"
}
]
}
},
sub:[
{
instant_class:"sort_by",
config:{
normal:true
},
menu:{
normal:[
{
id:"name_command",
text:"Name",
method:"sort_name",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"c_date_command",
text:"Date created",
method:"sort_cdate",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"m_date_command",
text:"Date modified",
method:"sort_mdate",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"size_command",
text:"Size",
method:"sort_size",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"project_command",
text:"Project",
method:"sort_property",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"share_command",
text:"Sharing",
method:"sort_share",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
}
]
}
},
{
instant_class:"test",
config:{
normal1:true
},
menu:{
normal1:[
{
id:"name_command",
text:"Test",
method:"sort_name",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"c_date_command",
text:"Test created",
method:"sort_cdate",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"m_date_command",
text:"Date modified",
method:"sort_mdate",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"size_command",
text:"Size",
method:"sort_size",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"project_command",
text:"Project",
method:"sort_property",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
},
{
id:"share_command",
text:"Sharing",
method:"sort_share",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
}
]
}
}
]
});
$(".icon").selected("selected");
});
有三种菜单类型：墙面弹出菜单（背景）、文件弹出菜单和文件夹弹出菜单。它还允许您定义管理员模式。首先，您必须在 config 属性中禁用弹出菜单，如下所示：
config:{
file_folder:true,
file:true,
folder:true,
wall:true
管理员模式和普通模式可以在 fileFolder 属性的 config 属性中定义。
config:{
admin:false,
normal:true,
trash:false
},
如何与动态数据库驱动的站点配合使用
可以通过从服务器端代码获取 CSS 选择器（类）来告知哪些是文件，哪些是文件夹来实现。例如，要选择文件和文件夹，必须将 file_folder 属性中的 instant_class 属性赋值如下。 类似地，您必须在每个文件、文件夹和墙面属性中定义 instant_class 属性，以通知脚本检测是仅选择了文件，还是选择了文件夹，还是同时选择了文件和文件夹（多选）。您还可以定义项目中的自定义 CSS。
file_folder:{
instant_class:"icon",
selected_class:"selected",
on_context:"make_selected",
config:{
admin:false,
normal:true,
trash:false
},
定义和自定义单个项目
您可以按照以下方式在普通和管理员属性下定义每个菜单项及其各个属性。method 属性接受单击菜单项时要调用的点击处理程序方法名称。short_cut 属性仅用于视觉效果，如果您想实现它，则必须自行在按键事件中编写处理程序。
{
id:"copy_command",
text:"Copy",
method:"copy",
image_url:"images/copy.png",
has_extend:false
},
{
id:"cut_command",
text:"Cut",
method:"cut",
image_url:"images/move.png",
has_extend:false,
short_cut:"Ctrl + X"
},
has_pre_bar 属性用于在菜单项上方插入分隔符。
{
id:"share_command",
text:"Share",
method:"share",
image_url:"images/public.png",
has_extend:false,
short_cut:"F3",
has_pre_bar:true
},
has_extend 属性专用于子菜单，如示例项目所示。关于它的最重要的事实是，您应该在子菜单项中定义菜单项 ID。
{
id:"sort_by_command",
text:"Sort by",
method:"sort_by",
image_url:"",
has_extend:true,
sub_menu:"sort_by_context",
short_cut:"F6",
image_off:true
},
对于上面的父菜单项，您必须将 instant_class 定义为“sort_by”，就像您将 sub_menu 属性定义为“sort_by_context”一样。其余属性易于理解。
sub:[
{
instant_class:"sort_by",
config:{
normal:true
},
menu:{
normal:[
{
id:"name_command",
text:"Name",
method:"sort_name",
image_url:"",
has_extend:false,
image_off:true,
short_cut:""
}
// in here you can add other sub menu items if you want.
}
// in here you can add other sub menus if you want.
]
使用此项目，您还可以通过按 Ctrl 键并调用 icon_selected 方法来测试多文件和文件夹选择。
$(".icon").selected("selected");
我正在准备编写一个包含 Windows 风格拖动选择和 AJAX 丰富的的文件处理的完整文件管理器。敬请期待。