新年第一炮,thinkphp3.2.3+easyui1.4.1做的简易后台 - ThinkPHP框架
新年第一炮,响不响就看你们的了.thinkphpp3.2.3+easyui1.4.1做的简易后台,提供给大家参考学习.首先说明,easyui1.4.1不完全支持IE,所以会在IE下有瑕疵.建议大家在非IE浏览器测试学习.360浏览器的要注意切换到极速模式.只做了两个模块:权限模块和会员模块.
在线测试,可以点击这链接来浏览.只提供非超级管理员账户测试.账号:test001,密码:123456.
下面就是上图了
提供了附件给大家下载.安装说明:下载解压后,把数据库备份文件easyui.sql导入到数据库,然后修改配置文件中数据库项.超级管理员:admin,密码:123456
不得不说,easyui真的很强大,虽然UI不是最美的,但插件齐全,弹窗,提示,表单验证等等,功能十分强大.值得大家学习.做前端特效时,可以直接拿来使用了.
积分：6531
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。jQuery Easy UI学习（1）――如何使用easyui，导入js顺序

一、首先在WebRoot目录下创建js文件夹，导入压缩好的完整的easy-ui的js包。
二、在HTML的页面中导入easy ui 的js
1、一次导入所有js：(建议用这种)
.引用jQuery的js文件
&script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.min.js"&&/script&
.引用Easy UI的Js文件
&script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.easyui.min.js"&&/script&
.导入Easy UI的主题Css文件
.导入Easy UI的图标Css文件
.引用Easy UI的国际化文件
以下为让它显示中文
&script type="text/javascript" src="../js/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"&&/script&
.页面上加上UTF-8编码
.使用（以dialog为例）
&script type = "text/javascript" charset = "UTF-8"&
$(function(){
$('#dd').dialog({
modal:true
或使用class添加组件：（这一个同时可用于单个导入）
&script type = "text/javascript" charset = "UTF-8"&
$(function());
2、导入单个js：
.引用jQuery的Js文件
&script type="text/javascript" src="../js/jquery-easyui-1.3.5/jquery.min.js"&&/script&
.引用easyLoader.js
&script type="text/javascript" src="../js/jquery-easyui-1.3.5/easyloader.js"&&/script&
.使用组件（同上例）
&script type = "text/javascript" charset = "UTF-8"&
$(function(){
easyloader.load('dialog',function(){
$('#dd').dialog({
modal : true
/* easyloader可以换成using */
如果要加载两个组件的话，使用数组:
&script type = "text/javascript" charset = "UTF-8"&
$(function(){
easyloader.load(['dialog','messager'],function(){
$('#dd').dialog({
modal : true
$.messager.alert('Title','load ok');
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'&主题：win8.1色差距大，我应该怎么设置？
泡网分: 2.238
帖子: 2316
注册: 2013年06月
以前用Win7，U2713H显示，LR出图，1390打印，都设置成SRGB，不管是风景还是人像，基本上所见即所得，连校色都免了。
前几天升了8.1，麻烦不断。。。。。其他不说了，最难以接受的就是色差距大！！！！
具体表现为：在LR里面调图满意后，直接QQ截发图，我自己看和网友看，都和以前没区别。但是，只要把这张截图另存为JPG，麻烦来了，蓝变紫了！
& && && && &用LR导出为JPG,情况一样，都是蓝变紫。
自我诊断：QQ截图，未经电脑保存，直接发到群里，无色差，说明不是显示器的问题
& && && & 一经电脑保存，立马出现色差，应该是系统的色彩管理出了问题
求救：Win8.1的色彩管理一大堆看不懂的配置文件，一大堆的选项。。。。。。没法搞啊。
上图一片，原色样实在是没法让大家看到了，上图就要经过电脑保存，唉。截了两张对比图，多少能看出些问题。
微信扫一扫分享
&浏览：642&&回帖：6 &&
泡网分: 2.238
帖子: 2316
注册: 2013年06月
gamcom 发表于
典型的色彩管理问题。
不懂色彩管理、没有特殊需求的同学还是老老实实全程使用sRGB色彩空间吧，特别是相机内设置，这样省心省力。就是色彩管理的事。
我本来就从相机到打印机，全程SRGB，在Win7上没事，到8.1就色差距大，降回去又没事了。
楼上同学说是显卡驱动问题，不对，显卡都是最新驱动版本，色差依然存在。
泡网分: 22.926
注册: 2004年07月
典型的色彩管理问题。
不懂色彩管理、没有特殊需求的同学还是老老实实全程使用sRGB色彩空间吧，特别是相机内设置，这样省心省力。
泡网分: 68.542
帖子: 28463
注册: 2003年06月
建议更换显卡驱动。
去年底 我就安装了8.1，且激活。安装好OS后 发现显卡效果极差，主要是层次缺少明显，后来用了微软的驱动后，立刻明显改善。
泡网分: 2.238
帖子: 2316
注册: 2013年06月
redpigirl 发表于
什么图片到了QQ对话框中都会丢失内嵌的图片icc配置。
因此，当你“把这张截图另存为JPG”时，你从QQ中存出来的JPG就是一张没有图片icc配置的文件，差别也就产生了。
建议在作图软件中把图片保存成内嵌sRGB配置的JPG文件后再发送交流，不要直接截取做图软件的界面显示效果。用SRGB模式导出为JPG，立马变紫。QQ截图未经电脑处理，不变色。
最后，把Win8.1降回Win7，问题解决了。
泡网分: 0.904
帖子: 2952
注册: 2012年09月
redpigirl 发表于
什么图片到了QQ对话框中都会丢失内嵌的图片icc配置。
因此，当你“把这张截图另存为JPG”时，你从QQ中存出来的JPG就是一张没有图片icc配置的文件，差别也就产生了。
建议在作图软件中把图片保存成内嵌sRGB配置的JPG文件后再发送交流，不要直接截取做图软件的界面显示效果。
泡网分: 1.171
注册: 2011年09月
什么图片到了QQ对话框中都会丢失内嵌的图片icc配置。
因此，当你“把这张截图另存为JPG”时，你从QQ中存出来的JPG就是一张没有图片icc配置的文件，差别也就产生了。
建议在作图软件中把图片保存成内嵌sRGB配置的JPG文件后再发送交流，不要直接截取做图软件的界面显示效果。
本帖最后由 redpigirl 于
15:14 编辑
&版权所有：&&桂ICP备号&增值电信业务经营许可证查看: 1984|回复: 12
如何激活win8.1？？？
入门会员, 积分 0.2, 距离下一级还需 0.8 积分
技术分0 分
资产值1906 nb
联谊分0 分
我的电脑本来预装的是8.1pro，但是买回来就被我删了换成了D版win7，现在想装回去，会自动激活吗，还是说我会在电脑某处找到一个激活码？
入门会员, 积分 0.4, 距离下一级还需 0.6 积分
技术分0.2 分
资产值1585 nb
联谊分0 分
那个激活码对你无用，那个激活码是不能激活Win7的。。。不过可以激活WIN10，当你安装联想OEM版系统的话，会自动激活8.1的，那个KEY在你主板里，在8.1的时候可以用AIDA64看到
入门会员, 积分 0.4, 距离下一级还需 0.6 积分
技术分0.2 分
资产值1585 nb
联谊分0 分
那个KEY的激活规则是和WIN10是一样的，KEY在你BIOS里，你的硬件信息和KEY是唯一性的，需要联网到微软服务器，微软认证后，硬件相同或者说相差不大，自动就激活了，相差不大这个指的是有个标准值，换硬盘扣分，换XX扣分，当你换的东西太多的时候有可能出现分值不够就不能激活，还有，换主板直接就会激不活，微软会认为你换机器了
入门会员, 积分 0.5, 距离下一级还需 0.5 积分
技术分0 分
资产值4941 nb
联谊分0 分
win7激活刷個slic2.1的bios搞定吧
入门会员, 积分 0.5, 距离下一级还需 0.5 积分
技术分0 分
资产值4861 nb
联谊分0 分
入门会员, 积分 0.2, 距离下一级还需 0.8 积分
技术分0 分
资产值1906 nb
联谊分0 分
那个KEY的激活规则是和WIN10是一样的，KEY在你BIOS里，你的硬件信息和KEY是唯一性的，需要联网到微软服务器 ...
所以，我现在装win10的话应该就会自己激活了？那就方便多了。。。
入门会员, 积分 0.4, 距离下一级还需 0.6 积分
技术分0.2 分
资产值1585 nb
联谊分0 分
所以，我现在装win10的话应该就会自己激活了？那就方便多了。。。
直接装貌似不会，需要手动输入WIN8的KEY，从81升级安装到10会激活，但是只限你预装的版本
入门会员, 积分 0.2, 距离下一级还需 0.8 积分
技术分0 分
资产值1906 nb
联谊分0 分
嗯。。。所以我要先装win8.1，找到key，然后再装win10？
入门会员, 积分 0.4, 距离下一级还需 0.6 积分
技术分0 分
资产值2942 nb
联谊分0 分
直接装貌似不会，需要手动输入WIN8的KEY，从81升级安装到10会激活，但是只限你预装的版本
这个要看什么电脑。我的T450S是win8.1的。后来重装itellyou里的下载的win8.1或是win10只要版本对，就不用管。安的时候提示序列号可以跳过。然后开机连上网全是自动激活了。不用输入任何号。原来用T420S也是win7安装直接激活
入门会员, 积分 0.4, 距离下一级还需 0.6 积分
技术分0 分
资产值2942 nb
联谊分0 分
嗯。。。所以我要先装win8.1，找到key，然后再装win10？
你要是T450S去itellyou下载一个对应的版本就直接激活。不用麻烦
入门会员, 积分 0.2, 距离下一级还需 0.8 积分
技术分0 分
资产值1906 nb
联谊分0 分
你要是T450S去itellyou下载一个对应的版本就直接激活。不用麻烦
我希望我是T450.。。。。 我的是松下
先试试再说吧，不行就继续用win7
初级会员, 积分 1.5, 距离下一级还需 2.5 积分
技术分0 分
资产值14031 nb
联谊分0 分
如果最终是想安装win10，那就先安装win8.1，如果8.1能自动激活最好，如果不能自动激活，就KMS激活，然后再系统更新到win10，这样win10也就激活了，这个时候如果感觉不爽，可以立马再全新安装win10一次，也是默认激活的，以后再重装win10，也是激活的，在安装过程中如果碰到需要激活码啥的，可以先略过，等安装好之后就是激活的。
入门会员, 积分 0.7, 距离下一级还需 0.3 积分
技术分0 分
资产值6712 nb
联谊分0 分
来自手机版
得装oem版的系统才能自动激活，D版和正版一样直接kms算了
月全勤勋章
Powered by Discuz! X3.2 &
Comsenz Inc &初试jQuery EasyUI 使用介绍
字体：[ ] 类型：转载 时间：
想必关注jQuery的同学们对jQuery EasyUI已经有所耳闻了，目前已经更新到1.0.5版本，风格与EXTJS有点相似，可以很好的满足开发人员对UI的需求。
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。
&jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，tree，window等等。
OK，下面就开始我们的初探之旅。jQuery EasyUI---Accordion 手风琴效果，大家应该很熟悉。 基本代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&Accordion&/title& &script src="../jquery-1.4.2.min.js" type="text/javascript"&&/script& &script src="../jquery.easyui.min.js" type="text/javascript"&&/script& &link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /& &link href="../themes/icon.css" rel="stylesheet" type="text/css" /& &script type="text/javascript"&&/script& &/head& &body& &div style="overflow:width:600height:300padding:10border:1px solid #"& &div id="aa" class="easyui-accordion" fit="true" style="width:300height:200"& &div title="Title1" style="overflow:padding:10"& &h3&Accordion1&/h3& &/div& &div title="Title2" style="padding:10"& &h3&Accordion2&/h3& &/div& &div title="Title3"& &h3&Accordion3&/h3& &/div& &/div& &/div& &/body& &/html&
代码非常简单，只需要简单的html就可以实现。这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。 效果： 由于只是简单的html，所以我们可以通过js轻松的对Accordion进行操控，控制大小，位置等等。 jQuery EasyUI---DataGrid 从名字就可以知道这是个数据的绑定和显示控件。 基本代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&DataGrid&/title& &meta http-equiv="Content-Type" content="text/ charset=UTF-8"& &script src="../jquery-1.4.2.min.js" type="text/javascript"&&/script& &script src="../jquery.easyui.min.js" type="text/javascript"&&/script& &link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /& &link href="../themes/icon.css" rel="stylesheet" type="text/css" /& &script type="text/javascript"& $(function() { $('#test').datagrid({ title: 'jQuery EasyUI---DataGrid', iconCls: 'icon-save', width: 500, height: 350, nowrap: false, striped: true, url: '../Data/datagrid_data.json', sortName: 'ID', sortOrder: 'desc', idField: 'ID', frozenColumns: [[ { field: 'ck', checkbox: true }, { title: 'ID', field: 'ID', width: 80, sortable: true } ]], columns: [[ { title: '基本信息', colspan: 2 }, { field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2, formatter: function(value, rec) { return '&span style="color:red"&编辑 删除&/span&'; } } ], [ { field: 'name', title: 'Name', width: 120 }, { field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true } ]], pagination: true, rownumbers: true, singleSelect: false, toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function() { alert('添加数据') } }, '-', { text: '保存', iconCls: 'icon-save', handler: function() { alert('保存数据') } }] }); }); &/script& &/head& &body& &table id="test"&&/table& &/body& &/html&
这里我们从datagrid_data.json中获取数据，代码的编写风格同EXTIS十分相似。ExtJS开发实践 效果： &jQuery EasyUI---Dialog 网页窗体效果。 基本代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&Dialog&/title& &script src="../jquery-1.4.2.min.js" type="text/javascript"&&/script& &script src="../jquery.easyui.min.js" type="text/javascript"&&/script& &link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /& &link href="../themes/icon.css" rel="stylesheet" type="text/css" /& &script& $(function(){ $('#dd').dialog({ toolbar:[{ text:'添加', iconCls:'icon-add', handler:function(){ alert('添加数据') } },'-',{ text:'保存', iconCls:'icon-save', handler:function(){ alert('保存数据') } }], buttons:[{ text:'提交', iconCls:'icon-ok', handler:function(){ alert('提交数据'); } },{ text:'取消', handler:function(){ $('#dd').dialog('取消'); } }] }); }); &/script& &/head& &body& &div id="dd" style="padding:5width:400height:200"& &p&jQuery EasyUI---Dialog&/p& &/div& &/body& &/html&
效果： &jQuery EasyUI---Tabs 无论是网站还是管理软件，我们越来越多的使用Tabs，EasyUI自然也进行了支持。 基本代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&Tabs&/title& &script src="../jquery-1.4.2.min.js" type="text/javascript"&&/script& &script src="../jquery.easyui.min.js" type="text/javascript"&&/script& &link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /& &link href="../themes/icon.css" rel="stylesheet" type="text/css" /& &/head& &body& &div id="tt" class="easyui-tabs" style="width:500height:250"& &div title="Tab1" style="padding:20display:"& &h1&Tab1 Content&/h1& &/div& &div title="Tab5" closable="true" style="padding:10display:"& &div class="easyui-tabs" fit="true" plain="true" style="height:100width:300"& &div title="Title1"&Content 1&/div& &div title="Title2"&Content 2&/div& &div title="Title3"&Content 3&/div& &/div& &/div& &/div& &/body& &/html&
效果： &jQuery EasyUI---Messager 信息提示控件，可以很好的进行数据的提示，推荐。 基本代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&Messager&/title& &script src="../jquery-1.4.2.min.js" type="text/javascript"&&/script& &script src="../jquery.easyui.min.js" type="text/javascript"&&/script& &link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /& &link href="../themes/icon.css" rel="stylesheet" type="text/css" /& &script& function show1() { $.messager.show({ title: '提示信息1', msg: '信息1', showType: 'show' }); } function show2() { $.messager.show({ title: '提示信息2', msg: '信息5分钟后消失.', timeout: 5000, showType: 'slide' }); } function show3() { $.messager.show({ title: '渐进显示信息3', msg: '渐进显示信息3', timeout: 0, showType: 'fade' }); } &/script& &/head& &body& &h1&信息提示&/h1& &div& &a href="javascript:void(0)" onclick="show1()"&显示&/a& | &a href="#" onclick="show2()"&滑动&/a& | &a href="#" onclick="show3()"&渐进显示&/a& | &/div& &/body& &/html&
页面左下角信息提示jQuery EasyUI---ValidateBox 数据验证控件，可以很好的对表单数据进行验证。 基本代码：
代码如下: &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&ValidateBox&/title& &script src="../jquery-1.4.2.min.js" type="text/javascript"&&/script& &script src="../jquery.easyui.min.js" type="text/javascript"&&/script& &link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /& &link href="../themes/icon.css" rel="stylesheet" type="text/css" /& &/head& &body& &div& &table& &tr& &td&姓名:&/td& &td&&input class="easyui-validatebox" required="true" validType="length[1,3]"&&/td& &/tr& &tr& &td&电子邮件:&/td& &td&&input class="easyui-validatebox" required="true" validType="email"&&/td& &/tr& &tr& &td&URL:&/td& &td&&input class="easyui-validatebox" required="true" validType="url"&&/td& &/tr& &tr& &td&说明:&/td& &td&&textarea class="easyui-validatebox" required="true" style="height:100"&&/textarea&&/td& &/tr& &/table& &/div& &/body& &/html&
不需要写任何函数，只需对要验证的控件required="true" validType="url"就可以。 效果： &jQuery EasyUI---LayOut页面布局，可以将整个页面划分成几个区域。类似ExtJS中的Border布局。基本代码： 代码如下:&html xmlns=""&&head&&&& &title&LayOut&/title&&&& &script src="../jquery-1.4.2.min.js" type="text/javascript"&&/script&&&& &script src="../jquery.easyui.min.js" type="text/javascript"&&/script&&&& &link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /&&&& &link href="../themes/icon.css" rel="stylesheet" type="text/css" /&&/head&&body&&&& &div class="easyui-layout" style="width:600height:400"&&&&&&&& &div region="north" border="false" style="overflow:height:60background:#A4BED4;"&&&&&&&&&&&& &h2&Border布局&/h2&&&&&&&& &/div&&&&&&&& &div region="south" split="true" style="height:50background:#"&&&&&&&& &/div&&&&&&&& &div region="east" icon="icon-reload" title="Menu2" split="true" style="width:180"&&&&&&&& &/div&&&&&&&& &div region="west" split="true" title="Menu1" style="width:100"&&&&&&&& &/div&&&&&&&& &div region="center" title="Main Form" style="background:#"&&&&&&&& &/div&&&& &/div&&/body&&/html&效果：&jQuery EasyUI---换肤 jQuery EasyUI使用了统一的CSS样式，在修改方面也很是方便： &如图所示，对于每一个控件，都有专有的CSS。相应对其修改就可以，只需简单的了解CSS即可。
小结：jQuery EasyUI的体验就到这里，还有一些控件这里没有介绍，比如：combobox，splitbutton等等。
官方网站：
下载地址：
文章作者：高维鹏（Brian）
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具