后台管理界面--导航栏设计

本章我们开始进行后台管理界面的设计,本节课设计一下导航栏设计。
一. 退出登录
//logout.php
<?php
session_start();
session_destroy();
header(‘location:login.php‘);
?>

二. 导航栏设计
根据生成的 JSON 方案,表如下:

//nav.php
<?php
require ‘config.php‘;
$id = isset($_POST[‘id‘]) ? $_POST[‘id‘] : 0;
$query = mysql_query("SELECT id,text,state,iconCls,url FROM
easyui_nav WHERE nid=‘$id‘") or die(‘SQL 错误!‘);
$json = ‘‘;
while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
$json .= json_encode($row).‘,‘;
}

$json = substr($json, 0, -1);
echo ‘[‘.$json.‘]‘;
mysql_close();
?>
//tree 结构
$(‘#nav‘).tree({
url : ‘nav.php‘,
lines : true,
onLoadSuccess : function (node, data) {
var _this = this;
if (data) {
$(data).each(function (index, value) {
if (this.state == ‘closed‘) {
$(_this).tree(‘expandAll‘);
}
});
}
},
onClick : function (node) {
if (node.url) {
if ($(‘#tabs‘).tabs(‘exists‘, node.text)) {
$(‘#tabs‘).tabs(‘select‘, node.text)
} else {
$(‘#tabs‘).tabs(‘add‘, {
title: node.text,
closable: true,
iconCls : node.iconCls,
href : node.url + ‘.php‘,
});
}
}
}
});

时间: 2024-10-10 00:36:44

后台管理界面--导航栏设计的相关文章

Django后台管理界面

之前的几篇记录了模板视图.模型等页面展示的相关内容,这篇主要写一下后台admin管理界面的内容. 激活管理界面 Django管理站点完全是可选择的,之前我们是把这些功能给屏蔽掉了.记得上篇中Django模型模型安装小结中,我们把settings.py中的部分内容屏蔽了,并添加了一个app,如下 1 INSTALLED_APPS = ( 2 ## 'django.contrib.admin', 3 ## 'django.contrib.auth', 4 ## 'django.contrib.con

4、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——后台管理界面

这一章节比较简单,我就直接贴代码了,后台管理登陆界面如下: 对应的控制器HomeController.cs,代码如下: using YKT.Model; using YKT.Common; using YKT.BLL; using YKT.Common.HtmlHelpers; using YKT.Common.Functions; using Microsoft.Practices.Unity; using YKT.IBLL; namespace YKT.Controllers { publi

使用vuejs2.0和element-ui 搭建的一个后台管理界面

说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element-ui:基于vuejs2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. axios: 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用. mock.js: 生成随机数据,拦截 Ajax 请求,让前端攻城师独立于后端进行开发.

vuejs 和 element 搭建的一个后台管理界面

介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于vuejs2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 效果图: 演示地址:https://taylorchen709.github.io/vue-admin/ 源码地址:https:

后台管理界面--管理页设计

本章我们开始进行后台管理界面的设计,本节课设计一下登录后的管理页. 一. 登录验证首先,创建一个数据库:easyui:其次,创建一个表:easyui_admin:然后,创建三个字段:id(自动编号).manager(管理员帐号).password(管理员密码).create(创建时间).//服务器端验证$.ajax({url : 'checklogin.php',type : 'POST',data : {manager : $('#manager').val(),password : $('#

运营平台——效率型后台管理类产品交互设计心得

此文已由作者姚依旻授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 无论是光鲜亮丽界面可人的C类产品,还是稳重大气商务气质的B类产品,若某产品存在运营行为,则必存在一个给团队自己人用的后台,也就是运营平台.人们容易都把目光 focus 在大众用户的体验上,自己人的使用体验则优先级被放低了一些.我与运营平台朝夕相伴了一年整载,终于从一无所知到若有所悟,同时感慨时光飞速竟不察. 笔者在自己在写文章之前,也怕自己资历尚浅观点偏颇,故查阅了一些资料,得知各类运营后台的产品与交互设

仿微信主界面导航栏图标字体颜色的变化

在所有的移动产品中,微信的界面做的很简洁,简单,我对微信主界面影响最深的就是微信底部导航栏的图标,以及字体颜色的变化,一直都想实现以下,今天有空,就大体的模仿者做了一遍. 效果图如下: 分析: 底部主要分为图标的渐变,字体颜色的渐变. 图标的颜色的渐变:主要是通过canvas绘制两个不同的图片,控制其图片的alpha透明度,来达到图标的渐变. 字体颜色:字体颜色就很好说了,Animator动画框架应该很熟悉了,在Animator框架中,有一个TypeEven是来计算十六进制色值的,我们可以通过A

CI框架后台添加左侧导航栏出现的一系列问题

后台在数据库中添加了一个栏目.但是但点击这个新添加的栏目之后,却发现左侧的导航栏没有了,,为什么呢. 注意CI框架下在shared/libraries/Acl.php这个文件,(后台权限控制类) 里边有一个show_left_menus()方法,这个方法主要是用来过滤左侧导航栏的功能.在这里边添加你新添加的导航, 发现是不是ok了,,耗费大量人力物力,终于好了..

RabbitMQ后台管理界面

打开后台界面:http://localhost:15672/#/   右上角可以设置页面"刷新时间".以及选择监听的"虚拟主机". 界面有"概要"."连接"."通道"."分发器"."队列"."用户"等几个管理页签. Overview 概要就是RabbitMQ的基本信息 Totals里面有Unacked未确认的消息数 Nodes :其实就是支撑Rab