zoukankan      html  css  js  c++  java

  • [orginal] OOP tab control based on web !!

    abstract

    The attached tabs creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. If the tabs-interface is implemented into the structure of browsers supporting JavaScript, it is sure to make the search engine user-f . It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases. here we introduce the methods  how can we create tabbed control for web application as well as for the desktop applications.

    introduction :


     the tab control   is  fully programmable, so that can be change the width, height ,top ,left in way that no need for manual ,it also provide a very nice look and interactive  events. it is outoHTML CODE GENERATOR.mean no need for write html code  you just need to right only one line on code in html code .

    we can consider the tab control as  three parts 

    >1- the header part :

         the header part is the part that contain  the text caption of the tab item it may contain some else element for instance the the icon image or some    others needed elements , here we can see the tab header as figure below  ,which contain three headers , each header contain two elements  which are the icon and the text caption.

     


     





    >2- the body part : the body the scope where to contain the nested element ,or the element that to be add to the tab control.

      

    >..>3- the tab control it's self .


    design methodology:

     first of all we consider the css code:

    Code


    here we see the js code:

    Code


    now we see  how to create the tab control with html code:

    in the head part of the html page add the headers file mean css and js files.

    <link rel="stylesheet" type="text/css" href="TabHeader.css"/>
    <script language="javascript" type="text/javascript" src="TabHeader.js"></script>

    after that just add one line html code  as ant element , here we add the div element 

     <div id="x"></div>

    now add the js code:

    Code



    here we can see the auto generated code:

    Code
  • 相关阅读:
    整理前端面试题1
    前端面试题2
    6.显示锁Lock 和 线程通信Condition
    5.创建执行线程的方式之三 ：实现Callable 接口
    4.闭锁 CountDownLatch
    3.ConcurrentHashMap 锁分段机制 Copy-On-Write
    2.原子变量 CAS算法
    1.volatile关键字 内存可见性
    13.MyBatis注解式开发
    12.查询缓存
  • 原文地址：https://www.cnblogs.com/ammar/p/1604816.html
Copyright © 2011-2022 走看看