带自动选项卡生成的后台管理界面

最新推荐文章于 2023-06-09 14:48:56 发布
最新推荐文章于 2023-06-09 14:48:56 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 网站建设 文章标签： class function float safari 相册 opera
<script type=text/javascript> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript> </script> <script> window.google_render_ad(); </script>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:12px;}
ul,li,h2{margin:0;padding:0;}
ul{list-style:none;}
#top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00}
#top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;text-align:center;line-height:40px;}
#topTags{width:750px;height:40px;margin:0 auto;background-color:#CCCC00;float:left}
#topTags ul li{float:left;width:100px;height:25px;margin-right:5px;display:block;text-align:center;cursor:pointer;padding-top:15px;}
#main{width:900px;height:500px;margin:0 auto;background-color:#F5F7E6;}
#leftMenu{width:150px;height:500px;background-color:#009900;float:left}
#leftMenu ul{margin:10px;}
#leftMenu ul li{width:130px;height:30px;display:block;background:#99CC00;cursor:pointer;line-height:30px;text-align:center;margin-bottom:5px;}
#leftMenu ul li a{color:#000000;text-decoration:none;}
#content{width:750px;height:500px;float:left}
.content{width:740px;height:490px;display:none;padding:5px;overflow-y:auto;line-height:30px;}
#footer{width:900px;height:30px;margin:0 auto;background-color:#ccc;line-height:30px;text-align:center;}
.content1 {width:740px;height:490px;display:block;padding:5px;overflow-y:auto;line-height:30px;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
function $(id){return document.getElementById(id)}
var menu=$("topTags").getElementsByTagName("ul")[0];//顶部菜单容器
var tags=menu.getElementsByTagName("li");//顶部菜单
var ck=$("leftMenu").getElementsByTagName("ul")[0].getElementsByTagName("li");//左侧菜单
var j;
//点击左侧菜单增加新标签
for(i=0;i<ck.length;i++){
ck[i].οnclick=function(){
$("welcome").style.display="none"//欢迎内容隐藏
//循环取得当前索引
for(j=0;j<8;j++){
if(this==ck[j]){
if($("p"+j)==null){
openNew(j,this.innerHTML);//设置标签显示文字
 }
clearStyle();
$("p"+j).style.backgroundColor="yellow";
clearContent();
$("c"+j).style.display="block";
   }
 }
return false;
  }
 }
//增加或删除标签
function openNew(id,name){
var tagMenu=document.createElement("li");
tagMenu.id="p"+id;
tagMenu.innerHTML=name+"   "+"<img src='http://www.tjdadi.com.cn/off.gif' style='vertical-align:middle'/>";
//标签点击事件
tagMenu.οnclick=function(evt){
clearStyle();
tagMenu.style.backgroundColor="yellow";
clearContent();
$("c"+id).style.display="block";
}
//标签内关闭图片点击事件
tagMenu.getElementsByTagName("img")[0].οnclick=function(evt){
evt=(evt)?evt:((window.event)?window.event:null);
if(evt.stopPropagation){evt.stopPropagation()} //取消opera和Safari冒泡行为;
this.parentNode.parentNode.removeChild(tagMenu);//删除当前标签
var color=tagMenu.style.backgroundColor;
//设置如果关闭一个标签时，让最后一个标签得到焦点
if(color=="#ffff00"||color=="yellow"){//区别浏览器对颜色解释
if(tags.length-1>=0){
clearStyle();
tags[tags.length-1].style.backgroundColor="yellow";
clearContent();
var cc=tags[tags.length-1].id.split("p");
$("c"+cc[1]).style.display="block";
 }
else{
clearContent();
$("welcome").style.display="block"
   }
  }
}
menu.appendChild(tagMenu);
}
//清除标签样式
function clearStyle(){
for(i=0;i<tags.length;i++){
menu.getElementsByTagName("li")[i].style.backgroundColor="#FFCC00";
  }
}
//清除内容
function clearContent(){
for(i=0;i<7;i++){
$("c"+i).style.display="none";
 }
}
}
</script>
</head>
<body>
<div id="top">
<h2>管理菜单</h2>
<div id="topTags">
<ul>
</ul>
</div>
</div>
<div id="main"> 
<div id="leftMenu">
<ul>
<li>个人资料</li>
<li>相册管理</li>
<li>日志管理</li>
<li>留言管理</li>
<li>风格管理</li>
<li>系统管理</li>
<li>帮助信息</li>
<li>再加一个</li>
</ul>
</div>
<div id="content">
<div id="welcome" class="content" style="display:block;">
  <div align="center">
    <p> </p>
    <p><strong>欢迎使用用户管理系统！</strong></p>
    <p> </p>
    </div>
</div>
<div id="c0" class="content">个人资料</div>
<div id="c1" class="content">相册管理</div>
<div id="c2" class="content">日志管理</div>
<div id="c3" class="content">留言管理</div>
<div id="c4" class="content">风格管理</div>
<div id="c5" class="content">系统管理</div>
<div id="c6" class="content">帮助信息</div>
</div>
</div>
<div id="footer">copyright for lalasxc </div>
</body>
</html>
piperzero
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带Tab的ACE后台模板
11-17
带Tab的ACE后台模板
TAB选项卡后台菜单效果
06-29
TAB选项卡后台菜单效果，一个完善优秀的后台管理系统布局。
后台管理系统框架html多选项卡,求个后台管理系统 多标签切换（类似于tab切换页面）案例...
weixin_33931886的博客
06-09 311
框架很多，能直接拿就没必要动手写重复代码简单的一个tab切换demo:#tabs > li.active{text-decoration: underline;}#tabs > li{list-style: none;display: inline-block;float: left;padding: 5px 10px;}#tabs > li:hover{text-decorat...
一个非常漂亮的多Tab后台管理框架
11-25
一个非常漂亮的多Tab后台管理框架.希望对大家有所帮助。
值得收藏的带自动选项卡生成的后台管理界面
05-29
值得收藏的带自动选项卡生成的后台管理界面! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
react-dyn-tabs：React动态选项卡，多个选项卡，多选项卡
02-22
本项目“react-dyn-tabs”专注于提供一个React组件，实现动态选项卡功能，适用于那些需要根据用户操作或数据变化自动生成和管理选项卡的应用。 首先，让我们深入了解一下“动态选项卡”。在传统的网页设计中，选项...
tab选项后台管理界面设计
07-27
"tab选项后台管理界面设计"这个主题，聚焦于如何构建一个具有可生成和删除功能的选项卡系统，为后台操作提供便捷的导航和组织结构。选项卡设计在用户界面（UI）中扮演着重要角色，它允许用户在多个视图或功能之间...
C#选项卡Listview自动生成需要的来看
02-07
以上就是关于“C#选项卡Listview自动生成”的关键知识点，包括选项卡控件、ListView控件的使用，动态添加功能的实现，以及性能优化和代码组织策略。通过这些知识，你可以构建出功能丰富的用户界面，满足各种数据展示...
axure后台管理系统原型rp.rar
12-23
原型中这部分通常以选项卡或侧边栏的形式呈现。 在实现过程中，Axure的特性如动态面板、中继器、条件逻辑、函数等都将发挥重要作用。动态面板用于模拟页面间的跳转和状态切换；中继器则可实时显示数据列表，支持...
最新精美后台管理系统模版html源文件+PSD源文件下载 uimaker 带TAB选项卡最新版
06-12
最新精美后台管理系统模版html源文件+PSD源文件下载 uimaker 带TAB选项卡最新版
uimaker最新精美后台管理系统模版html源文件.7z
12-04
uimaker最新精美后台管理系统模版html源文件 处理含昂 大家一起csdn加油uimaker最新精美后台管理系统模版html源文件 处理含昂 大家一起csdn加油
Bootstrap 后台模板 tab页效果 除此之外内附强大的bootstrap 后台模板
02-24
Bootstrap Ace模板 整合tab页效果，可以多tab展示内容。压缩文件里两个目录：ace和ace-tab
ajax 50个经典实例（包括常用特效）
08-12
ajax 50个经典实例（包括常用特效） 发布到tomcat，数据库为mysql。直接导入eclipse工程即可，很实用。
Bootstrap ACE后台管理界面模板(扁平化)
11-10
响应式Bootstrap网站后台管理系统模板ace admin，非常不错的轻量级易用的admin后台管理系统，基于Bootstrap3，拥有强大的功能组件以及UI组件，基本能满足后台管理系统的需求，而且能根据不同设备适配显示，而且还有四个主题可以切换。网页图标全采用FontAwesome，除Bootstrap,jQuery UI使用到的第三方插件有： jQuery 2.0.3 jQuery UI 1.10.3 (Custom Build) Twitter Bootstrap 3.0.0 FontAwesome 3.2.1 Google "Open Sans" Font jQuery Flot Charts 0.8.1 jQuery Sparklines 2.1.2 Easy Pie Chart 1.2.5 jQuery Knob 1.2.0 jQuery Validate 1.11.1 FuelUX 2.3.0 (Spinner & Wizard & Treeview) FullCalendar 1.6.4 jQuery ColorBox 1.4.27 jQuery dataTables 1.9.4 jQuery Chosen 1.0 jQuery Masked Input 1.3.1 jQuery Input Limiter 1.3.1 jQuery AutoSize 1.17.7 Bootstrap Colorpicker Bootstrap Datepicker Bootstrap Timepicker v0.2.3 Bootstrap DateRange Picker 1.2 Bootbox.js 4.0.0 jQuery Gritter 1.7.4 jQuery slimScroll 1.1.1 Spin.js 1.3.0 jQuery UI Touch Punch 0.2.2 Google Code Prettify ExplorerCanvas Mindmup Wysiwyg Editor Toopay Markdown Editor 1.1.4 X-editable 1.4.6 Select2 3.4.2 Bootstrap Tags 2.2.5 jQuery Mobile 1.3.2 (Custom Build) jqGrid 4.5.2 Dropzone.js 3.0 Nestable lists plugin 浏览器兼容： Firefox 5+ Google Chrome 14+ Internet Explorer 8 Internet Explorer 9 Opera 11 Safari 5 Bootstrap兼容： Bootstrap 2.2.x Bootstrap 2.3.x Bootstrap 3.0.x ace admin
后台管理系统中选项卡的动态渲染
Miketutu的博客
02-16 677
后台管理系统中选项卡的动态渲染
WPF ItemsControl定义数据模板实现后台动态生成卡片
m0_58028410的博客
06-09 755
1.利用数据模板，和数据绑定实现卡片式后台生成选项
14.5zeroice admin 界面端后台管理如何启动？
xiaoliuliu2050的专栏
11-28 965
zeroice admin 界面端后台管理如何启动？ Java -jar icegridgui.jar
php 生成卡密
热门推荐
qq1778871523的博客
06-05 1万+
&lt;?php //mt_rand 获取随机数 mt_rand(min, max); $str="abcdefghijkmnpqrstuvwxyz0123456789ABCDEFGHIGKLMNPQRSTUVWXYZ";//设置被随机采集的字符串 $codeLen='5';//设置生成的随机数个数 function str_rand($str,$codeLen){ $rand...
wpf tabcontrol动态生成选项卡,并添加窗体
最新发布
06-30
### 回答1： WPF的TabControl控件可以通过动态生成选项卡的方式来添加窗体，具体步骤如下： 1. 首先，在XAML中添加一个TabControl控件，作为主窗口的子控件。 2. 在后台代码中，创建一个ObservableCollection对象，用于存储选项卡的集合。例如，可以创建一个名为TabItems的ObservableCollection<TabItem>对象。 3. 创建一个方法，该方法用于动态生成选项卡并添加窗体。该方法可以根据需求接收窗体的相关参数，如窗体的名称、标题、内容等。 4. 在该方法中，创建一个新的TabItem对象，并设置其Header属性为窗体的标题。 5. 创建一个新的Window对象，并设置其Content属性为窗体的内容。这里可以根据需要选择合适的窗体控件，如Grid、StackPanel等。 6. 将新创建的Window对象设置为TabItem对象的Content属性。 7. 将新创建的TabItem对象添加到TabItems集合中。 8. 将TabItems集合绑定到TabControl控件的ItemsSource属性，以便在界面上显示动态生成的选项卡。 9. 最后，可以在需要的时候调用该方法来动态地生成选项卡并添加窗体。 通过以上步骤，我们可以实现在WPF的TabControl控件中动态生成选项卡并添加窗体的功能。这样可以方便地根据需要动态地添加和关闭选项卡，提升用户体验。 ### 回答2： 在WPF中，可以通过动态生成选项卡来实现TabControl的功能。首先，我们需要创建一个TabControl控件。 ```xaml <TabControl x:Name="tabControl" /> ``` 接下来，在代码中，我们可以通过循环方式动态生成选项卡，并添加需要的窗体。 ```csharp var tabItem = new TabItem(); tabItem.Header = "选项卡标题"; var newWindow = new Window() { Title = "新窗体", Content = new UserControl() // 窗体内容可以是自定义的UserControl }; tabItem.Content = newWindow; tabControl.Items.Add(tabItem); ``` 通过上述代码，我们就可以动态生成一个选项卡，并将需要添加的窗体作为其内容添加进去。每次循环创建新的选项卡和窗体，就可以实现动态生成多个选项卡的效果。 需要注意的是，添加的窗体内容可以是自定义的UserControl，可以根据实际需要进行修改。另外，动态生成选项卡的过程可以根据实际业务需求进行处理，可以通过循环、条件判断等方式灵活处理。 ### 回答3： 在WPF中，可以通过代码动态生成TabControl的选项卡，并添加窗体。以下是一个简单的示例： 首先，需要在XAML中创建一个TabControl的实例，设置一个名为"tabControl"的控件： ``` <TabControl x:Name="tabControl"/> ``` 然后，在后台的C#代码中使用以下方法来动态生成选项卡和添加窗体： ```csharp // 创建一个新的TabItem TabItem newTab = new TabItem(); // 设置TabItem的标题 newTab.Header = "选项卡标题"; // 创建一个新的窗体，可以是任何自定义的窗体 Window newWindow = new Window(); // 设置窗体的内容 newWindow.Content = "窗体内容"; // 设置窗体的标题 newWindow.Title = "窗体标题"; // 将窗体添加到选项卡中 newTab.Content = newWindow; // 将选项卡添加到TabControl中 tabControl.Items.Add(newTab); ``` 通过上述代码，我们可以在TabContol中动态生成一个新的选项卡，并将窗体作为其内容添加进去。可以根据需要重复上述代码，在TabControl中生成任意数量的选项卡和窗体。 需要注意的是，动态生成的选项卡和窗体可以通过命令或事件与其他控件进行交互，并具有自定义的操作和逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值