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
  • 相关阅读:
    SpringMVC Controller介绍及常用注解
    spring Handler 映射
    如何更高效的对首页数据的展示
    设计表时给哪些字段加索引，索引的用处，以及能不能给所有字段加索引
    spring mybatis解决application.properties注入变量问题
    Spring配置中的id和name属性区分
    @RequestBody和@RequestParam区别
    SpringMVC中controller中方法返回类型为ResponseEntity乱码的问题
    扩展springMVC消息转换器来支持jsonp数据格式
    SpringMVC——消息转换器HttpMessageConverter
  • 原文地址：https://www.cnblogs.com/ammar/p/1604816.html
Copyright © 2011-2022 走看看