JFUI是一款基于jQuery的后台管理web UI框架。
开发工具为VsCode。纯html+css+js实现。
本框架包括面包屑插件、确认框插件、数据列表插件、下拉菜单插件、主界面顶部、左侧导航插件、分页导航插件、下拉列表插件、开关按钮插件。
为何要开发这个框架？
本着先入为主的原则，开发者最早先学习的jQuery，独立开发的泛依软件web系统（OKTODO和OKCODO）都是基于jQuery库的。因为jQuery简单高效，命令式编程能够让开发者更快的入门前端开发。
由于泛依软件的各web系统之间样式代码不统一。开发者不想每次遇到同样的样式问题再去查看之前的代码，再去思考是怎么实现的，本着打造统一规范且现代的前端代码，JFUI就这么来了。
J代表jQuery，F取自开发者姓名全拼首字母，UI代表界面。
已经有很多现成的web后台管理框架，为何还要自己再造一个？所有的开发者都用同一个框架不好吗？让我们一直在学习！
如果仅仅会用框架，而且所有的开发者都用同一个框架，那么这个世界也就太单调了，IT世界没有创新那就没有进步了。
为的是打造专属个性化框架。每个框架都有共同之处，也有差异化，这个差异化就是个性化。个性化可能会带来技术进步。不管会不会真带来技术进步，这个不重要，重要的就是可能二字。
jQuery已经淘汰了，现在是vue、react的天下。也行，请移步VFUI。
作为职业C#后端，开发者老早就觉得前端比后端更接近用户体验，是技术和艺术的结合。自己实现一个虽然丑了点，但是代码最简单且自主可控。
这是一个后端程序员视角下实现的前端后台管理webUI框架，代码简单，容易快速上手，完全数据驱动。
如果您只想实现一个CRUD的后台管理，不用管样式，直接填充数据就行了。
如果您对前端框架感兴趣，本框架也可以用于jQuery入门学习和研究使用。
<!--前端代码-->
<div class="f-bread-nav"><ul></ul></div>
//js代码
$('.f-bread-nav').breadNav({
navID:navid,
navName:navname,
navUrl:navurl
});
navID:面包屑导航ID
navName:面包屑导航名称
navUrl:面包屑导航URL
<!--前端代码-->
<div id="delpopup" class="f-ask-popup"></div>
//js代码
$('#delpopup').confirmBox({
title: '删除确认',
content: '确认删除数据吗？',
props: { id: item.id },
ok: function (_props) {
alert('删除成功！');
},
close: function () {
}
}).showConfirmBox();
title:标题
content:内容
props:属性json
ok:确认回调
close:关闭回调
<!--前端代码-->
<div id="custlist" class="f-table-container">
</div>
//js代码
$('#custlist').dataList({
fields: [
{ code: "name", name: "姓名", minWidth: 100, format: false },
{ code: "edu", name: "学历", minWidth: 100, format: true },
{ code: "major", name: "专业", minWidth: 100, format: true }
],
fmt: fmt,
click: onclick
}
).renderList([
{id:1,name:'范1',edu:2,major:1,ops: [
{ name: "查看", code: "view" }
]},
{id:2,name:'范2',edu:2,major:1,ops: [
{ name: "查看", code: "view" }
]},
{id:3,name:'范3',edu:2,major:1,ops: [
{ name: "查看", code: "view" }
]}
]);
function fmt(item, field) {
if (field == 'edu') {
switch (item.edu) {
case 1: return "专科";
case 2: return "本科";
}
} else if (field == 'major') {
switch (item.major) {
case 1: return "计算机";
case 2: return "软件工程";
}
}
}
function onclick(item, opcode) {
switch (opcode) {
case "edit": {
gotoPage('add.html?id=' + item.id);
return;
}
case "delete": {
return;
}
case "view": {
return;
}
}
}
fields:字段集合
code:字段编码
name:字段名称
minWidth:列最小宽度
format:列是否格式化
fmt:格式化函数
click:行单击事件
<!--前端代码-->
<div class="f-dropdown-container"><ul></ul></div>
//js代码
var itemOps = [
{ name: "编辑", code: "edit" },
{ name: "删除", code: "delete" },
{ name: "查看", code: "view" }
]
$('<td class="f-dropdown-container">').dropdown({
data:item,
ops: itemOps,
click:itemClick
})
data:数据
ops:操作集合项
click:菜单项单击事件
<!--前端代码-->
<div class="f-header"></div>
//js代码
$('.f-header').header(
{
name:'你好,JFUI',
homeUrl:'/frame.html',
logoutUrl:'/login.html'
}
)
name:左上角显示文本
homeUrl:主页url
logoutUrl:注销url
<!--前端代码-->
<div class="f-navigator"></div>
//js代码
$('.f-navigator').leftNav({
items:[
{ id: 1, text: '业务',pid:0,icon:'nav_yw',url:'' },
{ id: 2, text: '设置',pid:0,icon:'nav_sz',url:'' },
{ id: 3, text: '列表',pid:1,icon:'nav_page',url:'/list.html' },
{ id: 4, text: '新建',pid:1,icon:'nav_page',url:'/add.html' },
{ id: 5, text: '关于',pid:2,icon:'nav_page',url:'/about.html'}
],
click:function(navid,navname,navurl){
$('.f-bread-nav').breadNav({
navID:navid,
navName:navname,
navUrl:navurl
});
if (document.body.clientWidth < 650) {
header.toggleNavigator();//左侧导航开关，点击菜单隐藏左侧导航
}
}
})
items:菜单项集合
id:导航ID
text:导航文本
pid:父导航ID
icon:图标样式类
url:导航URL
click:导航单击事件，用于面包屑生成
<!--前端代码-->
<div class="f-pagernav"></div>
//js代码
$('.f-pagernav').pager({
total:22,
pageSize:10,
pageIndex:1,
click:query
});
total:记录总数
pageSize:每页记录数
pageIndex:分页索引
click:单击事件
<!--前端代码-->
<div id="seledu" class="f-select f-left"></div>
//js代码
$('#seledu').select({
text: '教育程度',
ds: [
{ name: "本科", code: "1" },
{ name: "专科", code: "2" }
]
});
text:下拉列表显示文本
ds:数据集合
name:数据项名称
code:数据项值
<!--前端代码-->
<div id="switchIsInWork"></div>
//js代码
$('#switchIsInWork').switchButton(
{
click:function(){
//alert($('#switchIsInWork').getChecked());
}
}
);
click:单击事件
getChecked:获取选中状态
setChecked:设置选中状态
about.html:关于页面
add.html:新建页面
frame.html:主框架页面
list.html:列表页面
login.html:登录页面
登录页
主界面
新建页
