zoukankan      html  css  js  c++  java
  • EasyUI-Tabs

    EasyUI-Tabs 选项卡篇

    Tabs我们可以理解为选项卡,那么什么才算是选项卡呢:

    从上图中一定就理解了啥叫选项卡了

    参考代码如下所示:

    <div class="easyui-tabs" style="700px;height:250px">
      <div title="About" style="padding:10px"></div>
      <div title="My Documents" style="padding:10px"></div>
      <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"></div>
    </div>

    Tabs的用法跟其他元素基本相似,也是指定Class的值 = "easyui-tabs" ,然后在指定的容器内添加子内容

    1:我们还可以为任何一个Tab项添加icon图片,参考代码如下:

    <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"></div>

    也是指定data-options中的iconCls属性的值,这个值指定为icon图片的名称即可

    2:我们还可以指定Tabs在容器中的位置,现在支持四个方向:top,bottom,right,left

    参考代码:

    1. <divstyle="margin:10px0;">
      1.   <span>Position:</span>
      2.   <selectonchange="$('#tt').tabs({tabPosition:this.value})">
      3.   <optionvalue="top">Top</option>
      4.   <optionvalue="bottom">Bottom</option>
      5.   <optionvalue="left">Left</option>
      6.   <optionvalue="right">Right</option>
      7.   </select>
    2.   </div>
    3. <divid="tt"class="easyui-tabs"style="width:700px;height:250px">

    主要是通过设置 tabPosition属性的值

    比如:tabPostion:bottom

    topPostion:left

    3:Tabs项不仅仅可以显示文字,还可以显示icon,比如下图所示:

    上面这些是关于Tab组件常见的用法,但是tab不仅仅支持上面这些用户,更多用法请参考:

    http://www.jeasyui.com/demo/main/index.php?plugin=Tabs&theme=default&dir=ltr&pitem=

    但是作为基本的需求,上面的几个属性已经可以满足大部分开发需求了

    Jason

    2014年2月28日21:50:01

  • 相关阅读:
    案例分享:只因在 update 语句中误用一个双引号,生产数据竟然都变成了 0
    快速了解Service Mesh微服务架构实现服务间gRPC通信
    实战|如何优雅地自定义Prometheus监控指标
    微服务架构中如何快速构建一个数据报告服务?
    k8s微服务接入SkyWalking,三分钟教你怎么玩!
    Python基础-27-面向对象
    Python基础-21-字典
    Jmeter JSON提取器
    Jmeter正则表达式提取器
    访问github,修改host文件
  • 原文地址:https://www.cnblogs.com/xingchen/p/3574398.html
Copyright © 2011-2022 走看看