iT邦幫忙

2

jQuery套件開發之(十五),dialog的CSS

寫套件的時候,程式設計師最怕的畫畫面!

我來挑戰你了!

飛
昨天講到要來分享CSS的相關知識

我寫套件的時候,不是常常會先用CSS畫畫面嗎?

那就會有一些心得

一起努力學習吧! 不過我對CSS不算很精通@_@

此篇文章主要分兩部分。

一個是一個檔案,大概我會載入哪些CSS
一個是我作一個dialog版型時遇到的問題

首先我都會先針對專案,載入一份reset的CSS

最基本的reset.css我會設定

* {
    margin:0px ;
    padding:0px ;
}

不過網路上很多。大家自己斟酌 (關鍵字 css reset)

有些人會把css reset 跟 css hack 兩個觀念混淆。

實際上是不同的

css reset 是希望,儘量消滅各瀏覽器對初始設定值的差異。

而css hack而是藉由某瀏覽器獨特的語法或是...BUG

變成,該瀏覽器才讀取得到的修飾。

接下來就是針對各種不同功用,分門別類,分別載入CSS

例如說

button.css 專門在修飾此專案按鈕的CSS

套件.css 可能你有載入一些套件,可能有必須要有的CSS設定

最後會有一個 page.css 就是針對該一頁面才需要存在的CSS

但是我覺得如果還可以接受的話,page.css直接寫到htm檔案裡面也很好

所以大概會載入3-4個css以上

1.reset.css
2.sys.css 常用的CSS
3.套件1.css
4.套件2.css
5.page.css 該頁的CSS

< dialog 測試頁 >

在這一分測試頁中,我的page.css裡面沒有東西

因為沒有確定的東西我都會直接放到htm裡面,方便修改。

我以前學到的經驗是

如果你一個div裡面包了三個東西。

那你最好多包一層,變成這樣

&lt;div 原本的div>
    &lt;div 多包的div>
        element1
        element2
        element3
    &lt;/div>
&lt;/div>

這樣你不但可以用你原本預想的方式使用原來的DIV

也可以用多包的DIV來控管裡面的元素

於是 我的dialog結構長這樣

&lt;div class="ryDlog-widget">
    &lt;div class="ryDlog-zone">
        &lt;div class="ryDlog-top">
            &lt;div class="ryDlog-top-title">
            
            &lt;/div>
            &lt;div class="ryDlog-top-btn">
            
            &lt;/div>
        &lt;/div>
        &lt;div class="ryDlog-content">

        &lt;/div>
        &lt;div class="ryDlog-footer">

        &lt;/div>
    &lt;/div>
&lt;/div>

我的習慣是這樣,如果這個東西

會在畫面上出現不只一次,那我會把該單位叫widget

!!!接下來這個部分真的很需要前輩指正

因為我的套件可以依照事件變大變小。

所以我在設計的時候,我只在乎ryDlog-widget

而且在這個例子,我只在乎它的高

因為他的高要注意三個元素的堆疊,寬則單純的多

我的策略是top 跟 bottom高度是不變的。

但是content要隨著整個widget的高度有所改變。

我打算用JS用算的,CSS我不會這樣設定自動化。

以下是我的公式

.ryDlog-widget - height : 250

  • .ryDlog-zone - margin : 2x2
  • .ryDlog-top - padding : 5*2
  • .ryDlog-top - height : 25
  • .ryDlog-footer - padding : 5*2
  • .ryDlog-footer - height : 25
  • .ryDlog-content - padding : 5*2

.ryDlog-content - height :166

然後,在圓角的部分

.rouncConer {    -moz-border-radius: 10px; /* Firefox */  -webkit-border-radius: 10px; /* Safari, Chrome */  -khtml-border-radius: 10px; /* Konqueror */  border-radius: 10px; /* Opera 10.50 and later (CSS3 standard) */  behavior: url(border-radius.htc); /* IE6, IE7, IE8 */}

.rouncConer-top {-webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px;}

.rouncConer-bottom {-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}

.rouncConer-left {-webkit-border-top-left-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomleft: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}

.rouncConer-right {-webkit-border-top-right-radius: 10px;-webkit-border-bottom-right-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-bottomright: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}

要有五個,原因是因為如果你的.ryDlog-top套圓角

那跟.ryDlog-content接觸的地方就破功啦,因為連下端都圓角了

同理可套在.ryDlog-footer,只能套用.rouncConer-bottom

讓下擺變成圓角即可。

最後在按鈕ryDlog-top-btn的地方,放上按鈕。

&lt;script>
$(function()
{
        $('.ry-state-default').hover(
            function(){ $(this).addClass('ry-state-hover'); }, 
            function(){ $(this).removeClass('ry-state-hover'); }
        );
        $('.ry-state-default').click(function(){
            $(this).toggleClass('ry-state-active');
        });

}) ;
&lt;/script>
&lt;style>
* {
    border: 0px solid gray ;
}
.ryDlog-widget {
    position:absolute ;
    top: 0px;
    left: 0px ;
    min-width:200px ;
    min-height:170px ;
    height:250px ;
    width:350px ;
    border: 1px solid gray ;
    opacity: 0.9 ;
}
.ryDlog-zone {
    margin: 2px ;
    height: 246px ;
    width: 346px ;
    background-color: white ;
}
.ryDlog-top {
    height: 25px ;
    padding: 5px ;
    background: #ccc ;
}
.ryDlog-footer {
    height: 25px ;
    padding: 5px ;
    background: #aaa ;
}
.ryDlog-top-title {
    font-weight:bolder ;
    float: left ;
    padding-left:5px ;
    height:inherit ;
}
.ryDlog-top-btn {
    float: right  ;
    padding-right:5px ;
    height:inherit ;
}
.ryDlog-content {
    height: 166px;
/*
    .ryDlog-widget - height     : 250
-   .ryDlog-zone - margin       : 2x2
-   .ryDlog-top - padding       : 5*2
-   .ryDlog-top - height        : 25
-   .ryDlog-footer - padding    : 5*2
-   .ryDlog-footer - height     : 25
-   .ryDlog-content - padding   : 5*2
--------------------------------------
                                166
*/    
    padding: 5px;
    background: #bbb ;
}
&lt;/style>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

&lt;div class="ryDlog-widget rouncConer">
    &lt;div class="ryDlog-zone rouncConer">
        &lt;div class="ryDlog-top rouncConer-top">
            &lt;div class="ryDlog-top-title">
            測試標題
            &lt;/div>
            &lt;div class="ryDlog-top-btn">
                &lt;div class="ry-state-default ry-corner-all" >&lt;span class="ry-icon ry-icon-minus">&lt;/span>&lt;/div>
                &lt;div class="ry-state-default ry-corner-all" >&lt;span class="ry-icon ry-icon-newwin">&lt;/span>&lt;/div>
                &lt;div class="ry-state-default ry-corner-all" >&lt;span class="ry-icon ry-icon-arrow-4">&lt;/span>&lt;/div>
                &lt;div class="ry-state-default ry-corner-all" >&lt;span class="ry-icon ry-icon-close">&lt;/span>&lt;/div>
            &lt;/div>
        &lt;/div>
        &lt;div class="ryDlog-content">
        content
        &lt;/div>
        &lt;div class="ryDlog-footer rouncConer-bottom">
        footer
        &lt;/div>

    &lt;/div>
&lt;/div>

這樣就大功告成了!

http://ry.url.tw/wp/doc/a15.htm


尚未有邦友留言

立即登入留言