jQuery UI 标准PHP后台管理演示及使用说明
发布者：phpchina
发布日期： 0:32:09 &&更新日期： 0:32:09
文件大小：216K
下载次数：205 &&浏览次数：2442
评分：4.80
源码目录结构图
externalLink.gif
ui-anim_basic_16x16.gif
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_x240.png
ui-icons_2e83ff_256x240.png
ui-icons_x240.png
ui-icons_x240.png
ui-icons_cd0a0a_256x240.png
jquery.ui.accordion.css
jquery.ui.all.css
jquery.ui.autocomplete.css
jquery.ui.base.css
jquery.ui.button.css
jquery.ui.core.css
jquery.ui.datepicker.css
jquery.ui.dialog.css
jquery.ui.progressbar.css
jquery.ui.resizable.css
jquery.ui.selectable.css
jquery.ui.slider.css
jquery.ui.tabs.css
jquery.ui.theme.css
ui-lightness
ui-anim_basic_16x16.gif
ui-bg_diagonals-thick_18_b.png
ui-bg_diagonals-thick_20_x40.png
ui-bg_flat_10_x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_gloss-wave_35_f6a828_500x100.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_x240.png
ui-icons_228ef1_256x240.png
ui-icons_ef8c08_256x240.png
ui-icons_ffd27a_256x240.png
ui-icons_ffffff_256x240.png
jquery-ui-1.8.2.custom.css
jquery.ui.accordion.css
jquery.ui.all.css
jquery.ui.autocomplete.css
jquery.ui.base.css
jquery.ui.button.css
jquery.ui.core.css
jquery.ui.datepicker.css
jquery.ui.dialog.css
jquery.ui.progressbar.css
jquery.ui.resizable.css
jquery.ui.selectable.css
jquery.ui.slider.css
jquery.ui.tabs.css
jquery.ui.theme.css
helper.html
jQuery UI标准后台页面演示系统说明.mht
免责声明：好库网所展示的信息由发布者自行提供，其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证，并不承担任何法律责任。externalLink.gif
ui-anim_basic_16x16.gif
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_x240.png
ui-icons_2e83ff_256x240.png
ui-icons_x240.png
ui-icons_x240.png
ui-icons_cd0a0a_256x240.png
jquery.ui.accordion.css
jquery.ui.all.css
jquery.ui.autocomplete.css
jquery.ui.base.css
jquery.ui.button.css
jquery.ui.core.css
jquery.ui.datepicker.css
jquery.ui.dialog.css
jquery.ui.progressbar.css
jquery.ui.resizable.css
jquery.ui.selectable.css
jquery.ui.slider.css
jquery.ui.tabs.css
jquery.ui.theme.css
ui-lightness
ui-anim_basic_16x16.gif
ui-bg_diagonals-thick_18_b.png
ui-bg_diagonals-thick_20_x40.png
ui-bg_flat_10_x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_gloss-wave_35_f6a828_500x100.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_x240.png
ui-icons_228ef1_256x240.png
ui-icons_ef8c08_256x240.png
ui-icons_ffd27a_256x240.png
ui-icons_ffffff_256x240.png
jquery-ui-1.8.2.custom.css
jquery.ui.accordion.css
jquery.ui.all.css
jquery.ui.autocomplete.css
jquery.ui.base.css
jquery.ui.button.css
jquery.ui.core.css
jquery.ui.datepicker.css
jquery.ui.dialog.css
jquery.ui.progressbar.css
jquery.ui.resizable.css
jquery.ui.selectable.css
jquery.ui.slider.css
jquery.ui.tabs.css
jquery.ui.theme.css
helper.html
jQuery UI标准后台页面演示系统说明.mht
error_reporting(0);
//测试数据
$testRow=array();
$row = !empty($_POST) ? $_POST : $testR
$state=!empty($_POST);
&?php if($state){?&
&div class=&ui-state-highlight&&
&p&&span class=&ui-icon ui-icon-info&&&/span&
发布成功时显示！&/p&
&div class=&ui-state-error&&
&p class=&ui-state-error-text&&&span class=&ui-icon ui-icon-alert&&&/span&
发布失败时显示！&/p&
&fieldset id=&sl-systemsetting&&
&legend&基本设置&/legend&
&form id=&form-systemsetting& name=&form-systemsetting& action=&systemsetting.php& method=&POST&&
&ul class=&sl-table&&
&li&&label&是否缓存&/label&&input type=&radio& name=&useCache& value=&0& &? if($row['useCache']==0){?&checked&?}?&&??&input type=&radio& name=&useCache& value=&1& &? if($row['useCache']==1){?&checked&?}?&&??/li&
&li&&label&缓存有效??分钟,1??1440分钟????10080分钟????525600分钟)&/label&&input type=&text& name=&cacheLimit& class=&required digits& value=&&?=$row['cacheLimit']?&&/&&/li&
&li&&label&时区&/label& &select size=&1& id=&offset& name=&offset&&&option value=&-12& &? if($row['offset']==-12){?&selected&?}?&&(UTC -12:00) 西部国际日期变更线、艾尼威多克、夸贾林环礁&/option&&option value=&-11& &? if($row['offset']==-11){?&selected&?}?&&(UTC -11:00) 中途岛、萨摩亚群岛&/option&&option value=&-10& &? if($row['offset']==-10){?&selected&?}?&&(UTC -10:00) 夏威??/option&&option value=&-9.5& &? if($row['offset']==-9.5){?&selected&?}?&&(UTC -09:30) 泰奥海伊、马克萨斯群??/option&&option value=&-9& &? if($row['offset']==-9){?&selected&?}?&&(UTC -09:00) 阿拉斯加&/option&&option value=&-8& &? if($row['offset']==-8){?&selected&?}?&&(UTC -08:00) 美国西部标准时间（美国及加拿大）&/option&&option value=&-7& &? if($row['offset']==-7){?&selected&?}?&&(UTC -07:00) 山地时间（美国及加拿大）&/option&&option value=&-6& &? if($row['offset']==-6){?&selected&?}?&&(UTC -06:00) 中部时间（美国及加拿大）、墨西哥??/option&&option value=&-5& &? if($row['offset']==-5){?&selected&?}?&&(UTC -05:00) 东部时间（美国及加拿大）、波哥大、利??/option&&option value=&-4.5& &? if($row['offset']==-4.5){?&selected&?}?&&(UTC -04:30) Venezuela&/option&&option value=&-4&&(UTC -04:00) 大西洋时间（加拿大）、加拉加斯、拉巴斯&/option&&option value=&-3.5& &? if($row['offset']==-3.5){?&selected&?}?&&(UTC -03:30) 圣约翰、纽芬兰和拉布拉??/option&&option value=&-3& &? if($row['offset']==-3){?&selected&?}?&&(UTC -03:00) 巴西、布宜诺斯艾利斯、乔治敦&/option&&option value=&-2& &? if($row['offset']==-2){?&selected&?}?&&(UTC -02:00) 中大西洋&/option&&option value=&-1& &? if($row['offset']==-1){?&selected&?}?&&(UTC -01:00) 亚速尔群岛、佛得角群岛&/option&&option selected=&selected& value=&0& &? if($row['offset']==0){?&selected&?}?&&(UTC 00:00) 西欧时间、伦敦、里斯本、卡萨布兰卡、雷克雅未克&/option&&option value=&1& &? if($row['offset']==1){?&selected&?}?&&(UTC +01:00) 中欧时间(布鲁塞斯、哥本哈根、马德里、巴??&/option&&option value=&2& &? if($row['offset']==2){?&selected&?}?&&(UTC +02:00) 东欧时间(伊士坦布尔、耶路撒冷、加里宁格勒、南??&/option&&option value=&3& &? if($row['offset']==3){?&selected&?}?&&(UTC +03:00) 莫斯科、巴格达、奈洛比、圣彼德斯堡&/option&&option value=&3.5&&(UTC +03:30) 德黑??/option&&option value=&4& &? if($row['offset']==4){?&selected&?}?&&(UTC +04:00) 阿布扎比、马斯喀特、巴库、第比利??/option&&option value=&4.5& &? if($row['offset']==4.5){?&selected&?}?&&(UTC +04:30) 喀布尔&/option&&option value=&5& &? if($row['offset']==5){?&selected&?}?&&(UTC +05:00) 叶卡捷琳堡、伊斯兰堡、卡拉奇、塔什??/option&&option value=&5.5&&(UTC +05:30) Bombay, Calcutta, Madras, New Delhi, Colombo&/option&&option value=&5.75& &? if($row['offset']==5.75){?&selected&?}?&&(UTC +05:45) 加德满都&/option&&option value=&6& &? if($row['offset']==6){?&selected&?}?&&(UTC +06:00) Almaty, Dhaka&/option&&option value=&6.5& &? if($row['offset']==6.5){?&selected&?}?&&(UTC +06:30) 亚贡(缅甸)&/option&&option value=&7& &? if($row['offset']==7){?&selected&?}?&&(UTC +07:00) 曼谷、河内、雅加达、金??/option&&option value=&8& &? if($row['offset']==8){?&selected&?}?&&(UTC +08:00) 北京时间、佩思、新加坡、香港、台??/option&&option value=&8.75& &? if($row['offset']==8.75){?&selected&?}?&&(UTC +08:00) Ulaanbaatar, Western Australia&/option&&option value=&9& &? if($row['offset']==9){?&selected&?}?&&(UTC +09:00) 东京、汉城、大阪、札??/option&&option value=&9.5& &? if($row['offset']==9.5){?&selected&?}?&&(UTC +09:30) 阿德莱德、达尔文、Yakutsk&/option&&option value=&10& &? if($row['offset']==10){?&selected&?}?&&(UTC +10:00) 澳大利亚东部标准时间、关岛、海参崴&/option&&option value=&10.5& &? if($row['offset']==10.5){?&selected&?}?&&(UTC +10:30) 豪勋爵岛 (澳大利亚)&/option&&option value=&11& &? if($row['offset']==11){?&selected&?}?&&(UTC +11:00) 马加丹、索罗门群岛、新卡伦多尼??/option&&option value=&11.5& &? if($row['offset']==11.5){?&selected&?}?&&(UTC +11:30) 诺福克岛&/option&&option value=&12& &? if($row['offset']==12){?&selected&?}?&&(UTC +12:00) 奥克兰、惠灵顿、斐??/option&&option value=&12.75& &? if($row['offset']==12.75){?&selected&?}?&&(UTC +12:45) 查塔姆岛&/option&&option value=&13& &? if($row['offset']==13){?&selected&?}?&&(UTC +13:00) 汤加&/option&&option value=&14& &? if($row['offset']==14){?&selected&?}?&&(UTC +14:00) 基里巴斯&/option&&/select&&/li&
&li&&label&session时长(分钟)&/label& &input type=&text& name=&sessionLimit& value=&&?$row['sessionLimit']?&& class=&required digits&/& &/li&
&li&&label&后台默认语言&/label& &select name=&adminLanguage&&&option value=&zh-CN& SELECTED&中文&/option&&option value=&en-US&&english&/option&&/select& &/li&
&li&&label&前台默认语言&/label& &select name=&defaultLanguage&&&option value=&zh-CN& SELECTED&中文&/option&&option value=&en-US&&english&/option&&/select& &/li&
&li&&label&后台配色方案&/label& &select name=&adminTheme&&&option value=&ui-lightness& SELECTED&ui-lightness&/option&&option value=&base&&base&/option&&/select& &/li&
&li&&label&暂时关闭网站&/label& &input type=&radio& name=&offline& value=&0& checked&??&input type=&radio& name=&offline& value=&1&&??/li&
&li&&label&网站关闭原因&/label& &textarea name=&offlineMessage& cols=&50& rows=&5&&&?$row['offlineMessage']?&&/textarea&&/li&
&li&&label&网站标题&/label&&input type=&text& name=&title& class=&required&/&&/li&
&li&&label&网站简介（Meta 描述??/label& &textarea name=&metaDesc& cols=&50& rows=&5&&&?$row['metaDesc']?&&/textarea& &/li&
&li&&label&网站关键字（全站 Meta 关键字）&/label& &textarea name=&metaKeys& cols=&50& rows=&5&&&?$row['metaKeys']?&&/textarea&&/li&
&li&&label&&&/label&&input id=&submit& type=&submit& name=&submit& value=&保存修改&/&&/li&
&/fieldset&
Copyright(C)
OKBASE.NET All Rights Reserved 好库网 版权所有JQuery-UI中的tabs默认是横向显示各个标签卡，如何修改才能让其纵向垂直显示呢？怎么修改了ul属性的display为block结果还是水平横向显示标签？　　HTML code　　 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &;& &html xmlns=&;& &head&
&title&无标题页&/title&
&link href=&css/ui-lightness/jquery-ui-1.8.6.custom.css& rel=&stylesheet& type=&text/css& /&
&script src=&js/jquery-1.4.2.js& type=&text/javascript&&&/script&
&script src=&js/jquery-ui-1.8.6.custom.min.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
$(function (){
$(&#tabletest&).tabs();
&/head& &body&
&div id=&tabletest&&
&ul style=&display:&&
&li&&a href=&#tb1&&1&/a&&/li&
&li&&a href=&#tb2&&2&/a&&/li&
&li&&a href=&#tb3&&3&/a&&/li&
&div id=&tb1&&
1的内容&/p&
&div id=&tb2&&
2的内容&/p&
&div id=&tb3&&
3的内容&/p&
&/div& &/body& &/html&
什么叫Tab？tab就是横向排列的。如果要纵向的话，就不要用这个了。考虑其他实现方式吧
回答2：自己研究css/ui-lightness/jquery-ui-1.8.6.custom.css改一下吧。估计是要把li的设置成块状的样式下次自动登录
现在的位置:
& 综合 & 正文
jQuery UI dialog Demo （来自 /demos/）
&!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="Keywords" content="jQuery Dialog Demo" /&
&meta name="Description" content="jQuery Dialog Demo" /&
&title&jQuery Dialog Demo&/title&
&link rel="stylesheet" href="/ui/css/base2.css" mce_href="/ui/css/base2.css" type="text/css" media="all" /&
&link rel="stylesheet" href="/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" mce_href="/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /&
&link rel="stylesheet" href="/ui/css/demo-docs-theme/ui.theme.css" mce_href="/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /&
&mce:script src="/ajax/libs/jquery/1.3.2/jquery.min.js" mce_src="/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&&/mce:script&
&mce:script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" mce_src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"&&/mce:script&
&mce:script src="http://jquery-/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" mce_src="http://jquery-/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"&&/mce:script&
&mce:script src="http://jquery-/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" mce_src="http://jquery-/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"&&/mce:script&
&mce:script src="/js/demos.js" mce_src="js/demos.js" type="text/javascript"&&/mce:script&
&mce:script src="/themeroller/themeswitchertool/" mce_src="themeroller/themeswitchertool/" type="text/javascript"&&/mce:script&
&mce:style type="text/css"&&!--
body { font-size: 62.5%; }
label, input { display: }
input.text { margin-bottom:12 width:95%; padding: .4 }
fieldset { padding:0; border:0; margin-top:25 }
h1 { font-size: 1.2 margin: .6em 0; }
div#users-contain {
width: 350 margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid # padding: .6em 10 text-align: }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5 text-decoration:
! cursor: position: text-align: }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3
--&&/mce:style&&style type="text/css" mce_bogus="1"&
body { font-size: 62.5%; }
label, input { display: }
input.text { margin-bottom:12 width:95%; padding: .4 }
fieldset { padding:0; border:0; margin-top:25 }
h1 { font-size: 1.2 margin: .6em 0; }
div#users-contain {
width: 350 margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid # padding: .6em 10 text-align: }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5 text-decoration:
! cursor: position: text-align: }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3
&mce:script type="text/javascript"&&!--
$(function() {
var name = $("#name"),
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $("#validateTips");
function updateTips(t) {
tips.text(t).effect("highlight",{},1500);
function checkLength(o,n,min,max) {
if ( o.val().length & max || o.val().length & min ) {
o.addClass('ui-state-error');
updateTips("Length of " + n + " must be between "+min+" and "+max+".");
function checkRegexp(o,regexp,n) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass('ui-state-error');
updateTips(n);
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
hide:"slide",
buttons: {
'Create an account': function() {
var bValid =
allFields.removeClass('ui-state-error');
bValid = bValid && checkLength(name,"username",3,16);
bValid = bValid && checkLength(email,"email",6,80);
bValid = bValid && checkLength(password,"password",5,16);
bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: /email_address_validation/
bValid = bValid && checkRegexp(email,/^((([a-z]|/d|[!#/$%&'/*/+/-//=/?/^_`{/|}~]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])+(/.([a-z]|/d|[!#/$%&'/*/+/-//=/?/^_`{/|}~]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])+)*)|((/x22)((((/x20|/x09)*(/x0d/x0a))?(/x20|/x09)+)?(([/x01-/x08/x0b/x0c/x0e-/x1f/x7f]|/x21|[/x23-/x5b]|[/x5d-/x7e]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])|(//([/x01-/x09/x0b/x0c/x0d-/x7f]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF]))))*(((/x20|/x09)*(/x0d/x0a))?(/x20|/x09)+)?(/x22)))@((([a-z]|/d|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])|(([a-z]|/d|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])([a-z]|/d|-|/.|_|~|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])*([a-z]|/d|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])))/.)+(([a-z]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])|(([a-z]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])([a-z]|/d|-|/.|_|~|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])*([a-z]|[/u00A0-/uD7FF/uF900-/uFDCF/uFDF0-/uFFEF])))/.?$/i,"eg. ");
bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
if (bValid) {
$('#users tbody').append('&tr&' +
'&td&' + name.val() + '&/td&' +
'&td&' + email.val() + '&/td&' +
'&td&' + password.val() + '&/td&' +
$(this).dialog('close');
Cancel: function() {
$(this).dialog('close');
close: function() {
allFields.val('').removeClass('ui-state-error');
$('#create-user').click(function() {
$('#dialog').dialog('open');
function(){
$(this).addClass("ui-state-hover");
function(){
$(this).removeClass("ui-state-hover");
).mousedown(function(){
$(this).addClass("ui-state-active");
.mouseup(function(){
$(this).removeClass("ui-state-active");
// --&&/mce:script&
&div class="demo"&
&div id="dialog" title="Create new user"&
&p id="validateTips"&All form fields are required.&/p&
&fieldset&
&label for="name"&Name&/label&
&input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /&
&label for="email"&Email&/label&
&input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /&
&label for="password"&Password&/label&
&input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /&
&/fieldset&
&div id="users-contain" class="ui-widget"&
&h1&Existing Users:&/h1&
&table id="users" class="ui-widget ui-widget-content"&
&tr class="ui-widget-header "&
&th&Name&/th&
&th&Email&/th&
&th&Password&/th&
&td&John Doe&/td&
&td&john.&/td&
&td&johndoe1&/td&
&button id="create-user" class="ui-button ui-state-default ui-corner-all"&Create new user&/button&
&/div&&!-- End demo --&
&div class="demo-description"&
&p&Use a modal dialog to require that the user enter data during a multi-step process.
Embed form markup in the content area, set the &code&modal&/code& option to true, and specify primary and secondary user actions with the &code&buttons&/code& option.&/p&
&/div&&!-- End demo-description --&
&&&&推荐文章:
【上篇】【下篇】您查找的文档不存在 - 文档下载