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
  • 相关阅读:
    线程+IO流
    jiava trim()
    statement 的延伸 ----》PreparedStatement
    java中math的用法
    java中获取所有文件--（递归调用）
    编写一个JAVA类，用于计算两个日期之间的周数。
    java中数组排序.知识点
    javascript 常用功能总结
    jquery
    创建 HTML内容
  • 原文地址：https://www.cnblogs.com/ammar/p/1604816.html
Copyright © 2011-2022 走看看