適用於儀表版的小工具樣版

by ken tsai

HTML

<h2>Widget Layout</h2> 

<!--widget START-->
            <div class="widget">
                <!--widget title  START-->
                <div class="widget-header">
                    <h3>Widget Header</h3>
                    <span class="widget-header-subtitle">Subtitle !!</span>
                    <div class="widget-header-toolbar">
                        <!--<div class="widget-header-toolbar-btn-group">-->
                        <ul class="widget-header-toolbar-btn-group">
                            <li>

                                <a data-role="none" href="javascript:void(0)" class="widget-header-toolbar-btn widget-header-toolbar-btn-color">
                                </a>
                            </li>
                            <li>

                                <a data-role="none" href="javascript:void(0)" class="widget-header-toolbar-btn widget-header-toolbar-btn-toggle-collapse">
                                </a>
                            </li>
                            <li>

                                <a data-role="none" href="javascript:void(0)" class="widget-header-toolbar-btn widget-header-toolbar-remove">
                                </a>
                            </li>
                        </ul>



                        <!--</div>-->
                    </div>
                </div>
                <!--widget title  END-->

                <!--widget content  START-->
                <div class="widget-content">
                    <h1>I am Widget</h1>
                </div>
                <!--widget content  END-->
            </div>
            <!--widget  END-->


  <h2>Widget Layout with edit menu</h2>
            <!--widget START-->
            <div class="widget">
                <!--widget title  START-->
                <div class="widget-header">
                    <h3>Widget Header</h3>
                    <span class="widget-header-subtitle">Subtitle !!</span>
                    <div...

CSS

ul li{
    list-style: none;
}
/*Widget START*/
.widget{
    margin-bottom: 5px;
    border: 1px solid #d3d3d3;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.widget-w-1-3{
    width: 550px;
}

.widget-charts-1-2{
    width: 700px;
    height: 400px;
}

.widget-charts-1-3{
    width: 550px;
    min-height: 350px;
}

.widget-gauge-1-3{
    width: 550px;
    height:  320px;
}

.widget-header {
    padding: 0 10px;
    height: 35px;
    border-bottom: 1px solid #d3d3d3;
    background-color: #eee;
    cursor: move;
    font-size:  large;
}

.widget-header h3 {
    float: left;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    font-family: "latobold";
    font-size: 1.1em;
    margin: 0 auto;
    line-height: 35px;
}

.widget-header-subtitle{
    float: left;
    font-size: medium;
    color: #a4a4a4;
    line-height: 35px;
    margin-left: 4px;
}

.widget-content{
    padding: 20px 10px;
    height: 100%;
    background:  #ffffff !important;
    
    
}

.widget-content-resize{
    background: url('../images/icons/widget-resize.png') no-repeat left center;
    width: 24px;
    height: 24px;
    position:  absolute;
    right: 0;
    bottom: 0;

}

.widget-header-toolbar {
    float: right;
    height: 35px;
    border-left: 1px solid #ddd;
    padding-left: 10px;
    margin-left: 10px;
}

.widget-header-toolbar h3{

}

/*widget toolbar level1*/
ul.widget-header-toolbar-btn-group {
    position: relative;
    margin: 0;
    padding: 0;
}

ul.widget-header-toolbar-btn-group li{
    float: left;
}

/*based btn style*/
/*a.widget-header-toolbar-btn{*/
ul.widget-header-toolbar-btn-group li a{
    display: block;
    
    margin: 10px 5px 5px 5px;
   
   /*vertical alignment of the inline element*/ 
    /*vertical-align: middle;*/         
    width: 17px;
    height: 17px;
    background-size: 17px 17px;
    
}

.widget-header-toolbar-btn-color{
    background:...