EasyUI系列学习(十)-Tabs(选项卡)
一、创建组件
<div class="easyui-tabs" style="width:500px;height:250px">
<div title="tab1">tab1</div>
<div title="tab2">tab2</div>
</div>
二、属性
1.
<div id="tbs">
<div title="tab1">tab1</div>
<div title="tab2">tab2</div>
<div title="tab3">tab3</div>
</div>
<script>
$(function () {
$("#tbs").tabs({
width: 500,
height: 250,
//plain:true,
//fit:true,
border: true,
tools: [
{
iconCls: "icon-add",
handler: function () { alert("add"); }
},
{
iconCls: "icon-edit",
handler: function () { alert("edit"); }
}],
toolPosition: "left",
//设置header的位置
tabPosition: "top",
//tabPosition为left或right时才有效
//headerWidth: 150,
//初始化选中一个tab页,默认为0
selected: 1,
showHeader: true
});
});
</script>
生成的html(发现了panel,那边它也继承了panel的一些属性)
2.
<div id="tbs">
<div title="tab1">tab1</div>
<div title="tab2">tab2</div>
<div title="tab3">tab3</div>
</div>
<script>
$(function () {
$("#tbs").tabs({
width: 500,
height: 250,
tabWidth: 300,
tabHeight: 27,
//选项卡每次滚动的像素值,默认为100
scrollIncrement: 100,
//每次滚动动画持续的时间,默认400
scrollDuration:1000
});
});
</script>
三、事件
四、方法
EasyUI系列学习(十)-Tabs(选项卡)的更多相关文章
- 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件
当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...
- 第二百节,jQuery EasyUI,Tabs(选项卡)组件
jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- (十)easyUI之折叠面板+选项卡+树完成系统布局
一.效果 二 .编码 数据库设计 数据库函数设计,该函数根据父节点id 查询出所有字节点(包括孙子节点) BEGIN #声明两个临时变量 ); ); '; SET tempChd=CAST(rootI ...
- EasyUI - Tabs 选项卡标签
基本效果: 效果图: html代码: <div id="tab"> <div title="tab1" > <p>tab1& ...
- JQERY EasyUI Tabs 选项卡 自适应浏览器宽度高度 解决方案
<script type="text/javascript"> $(window).resize(function () { $('#tt').tabs({ width ...
随机推荐
- fastjson过滤器简单记录
fastjson过滤器,该字段可以将转化的json字段遍历,方便实用 1 /** * 通用输出json * @param object * @return json字符串 */ public Stri ...
- Centos samba install
Ready Change Root Password passwd root 在提示下建立新密码 静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0 ...
- [Debug] Inspect and Style an Element in DevTools that Normally Disappears when Inactive
It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’ ...
- (linux shell)第一章--小试牛刀(下)
文章来源: (linux shell)第一章--小试牛刀(下) 1.6 数组和关联数组 1.6.1 预备知识 Bash同一时候支持普通数组和关联数组.普通数组仅仅能使用整数作为数组索引,而关联数组能够 ...
- AE After Effect 渲染如何输出设置
各种输出设置值的对比情况. Microsoft Video1压缩方法情况(该模式下无法采用RGB+Alpha): 一 深度为"数千种颜色",缩放为1280×720(HDV/HDTV ...
- Oracle index unusable和invisible的差别
摘录自11g的官方文档: UNUSABLE Specify UNUSABLE to mark the index or index partition(s) or index subpart ...
- 理解C语言中指针的声明以及复杂声明的语法
昨天刚把<C程序设计语言>中"指针与数组"章节读完,最终把心中的疑惑彻底解开了.如今记录下我对指针声明的理解.顺便说下怎样在C语言中创建复杂声明以及读懂复杂声明. 本文 ...
- [Unity3D]Unity3D游戏开发之Lua与游戏的不解之缘(下)
---------------------------------------------------------------------------------------------------- ...
- Python 获取新浪微博的热门话题 (API)
Code: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-06-27 @author: guaguastd @name: ...
- 1062. Talent and Virtue (25)【排序】——PAT (Advanced Level) Practise
题目信息 1062. Talent and Virtue (25) 时间限制200 ms 内存限制65536 kB 代码长度限制16000 B About 900 years ago, a Chine ...