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









  • 相关阅读:
    数据库索引(Oracle和Mysql)学习总结
    个人开源Git地址
    关于SQL优化这些你了解吗?
    Java项目排查cpu负载高
    Java Bean与Map之间相互转化的实现
    Maven项目改为spring boot项目的方法
    spring boot从redis取缓存发生java.lang.ClassCastException异常
    MySQL优化之Explain命令解读
    阿里巴巴校招四面经验分享
    HDBS之应用代码优化
  • 原文地址:https://www.cnblogs.com/ammar/p/1604816.html
Copyright © 2011-2022 走看看