顯示具有 css 標籤的文章。 顯示所有文章
顯示具有 css 標籤的文章。 顯示所有文章

2023年4月20日 星期四

V80204 - css - 自定 style - 自定字型,顏色,背景顏色

 目的: V80204 - 自定 style  - css  - 自定字型,顏色,背景顏色

處理說明:  1>利用 labelstyle 及 fieldstyle 設定 字型,顏色
                        labelStyle: "font-size: 20pt; color: blue; background:  gray; ",
                        fieldStyle: "font-size: 20pt; background:  yellow; ",
                   2>利用外部 css 檔案, class 設定
                        var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/mycss.css'  >";
                         $('head').append(Tmp_Str);
                   3>利用自定 class 來設定  字型,顏色                          
                         fieldCls: "my_redcolor  my_bigfont",
                   4>設定 panel 的 顏色 - 
                       bodyStyle: 'background:#ffc; ',
                   5>設定標題顏色 & 字型大小
                         var cmp_TITLE = get_cmp_lbl0("試車/飛(前中)登錄", 550);    
                         cmp_TITLE.style = "font-size: 14pt; color: blue;:text-align:center; ";



1>V80204.js
 //包含 mycss.css
 var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/mycss.css'  >";
 $('head').append(Tmp_Str);

var Query1 = new Ext.FormPanel({
        id: 's1_form', flex:1,
        layout: { type: 'hbox', align: 'stretch' },
        fieldDefaults: { labelAlign: 'right' },
        defaults: { margin: { top: 3 } },
        height: 20,
        items: [
            {
                xtype: 'panel',
                id: 'panel1_1',
                layout: { type: 'hbox', align: 'stretch' },
                flex: 14,
                border: 0,
                items: [
                    {
                        xtype: 'panel',
                        id: 'panel1_11',
                        layout: { type: 'hbox', align: 'stretch' },
                        flex: 15,
                        border: 0,
                        items: [{
                            xtype: "fieldcontainer", fieldLabel: "WBS", labelWidth: 100, layout: "hbox", flex: 2,
                            labelStyle: "font-size: 20pt; color: blue; background:  gray; ",
                            items: [{
                                xtype: "textfield", id: "s1_WBS", name: "s1_WBS", width: 150,
                                padding: "0 4 0 0",                                
                                //Style: "font-size: 20pt; background-color:  red; ",
                                fieldStyle: "font-size: 20pt; background:  yellow; ",
                               //fieldCls: "required",
                                //fieldCls: "my_redcolor  my_bigfont",
                                //cls: "edit_BC",
                            },                            
                            {
                                xtype: "button", id: "s1_btn_WBS", name: "s1_btn_WBS", text: "...",
                                handler: function () {
                                    var win = EditPickx('WBS', '../api/V80204API/get_s_WBSPick', ['WBSNO'], ['s1_WBS'], J_pickstore_s_WBS, J_pickcolumns_s_WBS);
                                    win.show();
                                }
                            },
                            ]
                        }, // end of s1_WBS
                        {
                            xtype: "fieldcontainer", fieldLabel: "機種機號", labelWidth: 100, layout: "hbox", flex: 2,
                            items: [
                                { xtype: "textfield", id: "s1_ACNO", name: "s1_ACNO", width: 150, padding: "0 4 0 0" },
                            ]
                            },  // end of s_機種機號             
                            {  //顯示等候訊息
                                id: "s1_PROCMSG", name: "s1_PROCMSG", xtype: "panel", width: 150, height: 20, margin: "0 4 0 4",
                                hidden: false, border: 0, style: 'background-color:#FFFFFF;'
                            },
                        ]
                    },  // end of panel1
                ]
            },


2>mycss.css
<style type="text/css" >
#my_tbl {
    border-width: 9px;
    border-style: solid;    
}

.my_bigfont{
    font-size:  30px;
        color: yellow;
}

.my_redcolor {
    //background-color: red;
    background: red;
}


4>*.js

var DataPanel = Ext.create("Ext.panel.Panel", {
        flex: 4, layout: { type: 'hbox', align: 'stretch' },
        bodyStyle: 'background:#ffc; ',
        //bodyCls: 'my_lightgreen',
        fieldDefaults: { labelAlign: 'right' },  
        items: [
            //{ xtype: "panel", flex: 2, title: "", },
            {
     xtype: "fieldcontainer", fieldLabel: "WBS報工工時(小時)", labelWidth: 130, layout: "hbox", flex: 5,
                items: [{
                   xtype: "textfield", id: "s1_WBS_HR", name: "s1_WBS_HR", width: 150, 
                             padding: "0 4 0 0", fieldCls: "readonly",
                    // value: 'FM20120301001',
                },
                ]
            }], // end of s1_WBS_HR
    });  // end of DataPanel

2022年11月2日 星期三

V120502A - jQuery - 屬性設定及 CSS

 目的: jQuery 屬性設定及 CSS

處理方法: 1>取得  jQuery屬性:  $("#my_tbl").attr('style')
                       var Tmp_tbl = $("#my_tbl");
                        console.log("0 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));
                  2>設定 jQuery屬性:   $("#my_tbl").attr('style') 
                     Tmp_tbl.attr('style','border: 5px solid red;');
                  3>取得輸入元件的欄位值
// HTML <input type="text"> // 設定欄位值 $('input').val('Hello World!'); // 設定後的結果 <input type="text" value="Hello World!">
4>設定 CSS 屬性值
                     例如,替所有段落的字體設為紅色,背景設為藍色:
                      $('p').css({ color: 'red', 'background-color': 'blue' });
      


1>*.js
// [確定]  - 於 sub_panel1 建立 Table
function mySub1_OkBtn1_click() {
    var Tmp_Str = "<div  id='print_area'   style = 'border: 1px solid red; width=100%;' >"
        + "<table style = 'border: 1px solid black; width=100%;'  id = 'my_tbl' > "        
        + "<tr style='border: 6px solid blue;'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"
        + "<tr style='border: 6px solid blue;'><th>EO號碼<br>(EONO)</th><td>GM1381+A15</td></tr>"
        + "</table>"
        +"</div>";
    //var Tmp_tbl = Ext.getCmp("my_tbl");
    var Tmp_tbl = $("#my_tbl");
    if (!checkisnull(Tmp_tbl)) {        
        console.log("0 Tmp_tbl:", Tmp_tbl);        
        console.log("0 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));
        console.log("0 $('#my_tbl').attr('style'):", $("#my_tbl").attr("style"));
        Tmp_tbl.attr('style','border: 5px solid red;');
    };    
    var Tmp_sub_panel1 = $('#sub_panel1');
    Tmp_sub_panel1.append(Tmp_Str);
}


// [設定  property]  - 設定  Table 的 style  - 改變顏色為 藍色
function sub_PrnTable_OkBtn2_click() {
    var Tmp_tbl = $("#my_tbl");
    if (!checkisnull(Tmp_tbl)) {
        console.log("5 Tmp_tbl is captched");
        console.log("5 Tmp_tbl:", Tmp_tbl);        
        console.log("5 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));        
        Tmp_tbl.attr('style', 'border: 2px solid blue;');
        console.log("5 $('#my_tbl').attr('style'): blue", $("#my_tbl").attr("style"));
    }
}


jQuery 屬性與樣式 (Attributes & CSS)

我想一般對於 JavaScript 大部分的操作都用在變動 HTML DOM 元素的屬性跟樣式,如果你有這個經驗,就會知道在設定時會有許多複雜及麻煩的問題,比如說舊 IE 它 setAttribute 不吃 name 屬性;又像在指定 class 屬性時,名稱不能用 class 而要用 className 等問題。令人開心的,jQuery 已經幫你處理掉中間這些繁雜過程可能遇到的問題了!

用 jQuery 時,你只需要記得原本的 HTML 和 CSS 是怎樣寫就行。

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

取得選取到的元素之屬性值:

.attr(attributeName)

例如,取得第一個連結的 title 值:

$('a').attr('title');

替選取到的元素設定屬性值:

.attr(attributeName, value)

例如,替所有連結的 title 屬性設為 Enjoy jQuery:

$('a').attr('title', 'Enjoy jQuery');

你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值:

.attr(attributes)

例如,同時改變 alt 和 title 屬性:

$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
});

移除元素屬性也很簡單:

.removeAttr(attributeName)

例如,移除所有連結的 title 屬性:

$('a').removeAttr('title');
// 上面同等於這樣做
$('a').attr('title', null);

jQuery 對 class 這個屬性有特別的處理

對於 class,jQuery 另外提供個別的函式來作 class 增刪的動作,這是為了可以方便疊加與移除特定的 class。

增加 class:

.addClass(className)

例如,幫所有的段落加入 selected 和 highlight 類別:

$('p').addClass('selected highlight');
用空白隔開多個 class。

移除 class:

.removeClass(className)

例如,移除 id 為 wrapper 的元素其 blue 這個類別:

$('#wrapper').removeClass('blue');

Value - Getter/Setter

val,一個很常用到的方法,用來取得和設定表單元素的 value 值:

.val() // get
.val(value) // set

例如,取得表單元素的值:

// 取得下拉選單 (select box) 的值
$('select.foo').val();

// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();

// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();

例如,設定表單元素的值:

// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">

jQuery 對於樣式的操作 (CSS)

傳統 JavaScript 在處理 CSS 的問題上簡直頭大,設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor;對透明度 opacity 設定上你要了解舊 IE 是用 filter··。jQuery 的寫法很簡單,就直接用 key/value 成對的一組屬性來設定,我們只要知道 CSS 的表達式就沒問題。

取得第一個匹配到的元素之樣式:

.css(propertyName)

例如,取得第一個段落的字體顏色:

$('p').css('color'); 

替所有匹配到元素設定一種樣式:

.css(propertyName, value)

例如,替所有段落的透明度設為半透明:

$('p').css('opacity', '0.5');
// 是的,設 opacity 就可以,jQuery 已經幫你處理好跨瀏覽器問題

你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式:

.css(properties)

例如,替所有段落的字體設為紅色,背景設為藍色:

$('p').css({
  color: 'red',
  'background-color': 'blue'
});
若屬性中包含 -,記得加上引號,沒有的話則可有可無。

元素的位置及寬高 - 常用的屬性獨立出來

.width() // 取得元素寬度
.width(value) // 設定元素寬度
.height() // 取得元素高度
.height(value) // 設定元素高度

.width() .height() 抓到的值是元素內容寬、高度,不包含 padding, border, margin。

例如,取得第一個匹配到的段落元素高度 (px) (無參數)

$('p').height();

例如,設定每個匹配到的段落元素其高度設為 100px (沒指定單位時預設為 px) (有參數)

$('p').height(100);

取得元素相對於當前視窗左上角的位置偏移量:

.offset()
// 返回值 Object{top, left}
var offset = $('p:last').offset();
console.log(offset.left)
console.log(offset.top)

一般在傳統 JavaScript 我們會用 offsetLeft 及 offsetTop 來取得元素在頁面上的座標,不過 IE 與 FF 瀏覽器解讀這兩個屬性是不一樣的,IE 會解讀成目標元素跟父元素的 left-top 距離;FF 則是相對於頁面上的 left-top,所以在 IE 下我們一般都需要利用往父元素跑迴圈加總 offsetLeft 來取得元素在頁面上的座標值。不過,在 jQuery 中我們統一用 offset() 就可以囉!

看過上述 jQuery 對於屬性及樣式的操作,是不是簡化了我們許多不必要的煩惱,讓我們可以將精力拉回純 HTML 與 CSS 的思緒上面呢!

2022年11月1日 星期二

CSS - selector # - Extjs panel 元件的 bodyStyle 設定方式 - font-size - px,pt,cm

 目的: Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)是用來描述HTML的樣式

selector(選取器),也就是要定義的對象。

將樣式套用在 selector(選取器)

我們想設定一些標籤的基本樣式

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-size: 20px;
}



方法1:完整的html如下,請記得這些內容要放在<head> </head>中,而不是放在<body> </body>中:

<!DOCTYPE html>
<html>
<head>
<style>
body {
       background-color: lightblue;
}

h1 {
color: white;
text-align: center;
background-color: darkblue;
}

p {
font-size: 20px;
}

</style>
</head>

<body>

<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>

</body>

</html>

2>方法2:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="my.css"/>

</head>

<body>


<h1>吳濟聰</h1>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>


</body>

</html>


my.css的內容則不需要有<style></style>,如下面的範例:

body {

background-color: lightblue;

}


h1 {

color: white;

text-align: center;

background-color: darkblue;

}


p {

font-size: 20px;

}




CSS的語法是一開始是selector(選取器),也就是要定義的對象。

selector可以是

  1. html的基本元素(element),如:body、h1等等。上面的範例就是針對基本元素定義樣式。

  2. 當我們希望只針對某一個特定元件定義樣式,我們可以利用在html中所定義的id定義樣式。

  3. 當我們希望只針對某一群元件定義樣式,我們可以利用在html中所定義的class定義樣式。

要針對id定義樣式的話,在selector前加「#」:


1>針對特定元件(id)設定樣式 - 由 id="xxxx" 設定樣式


<!DOCTYPE html>

<html>

<head>

<style>

#primaryHeading {

text-align: center;

color: red;

}

</style>

</head>

<body>


<h1 id="primaryHeading">HTML</h1>

<h1>CSS</h1>


</body>

</html>


2>多元件(class)套用同一樣式
     因為在同一個網頁中id是不能重複,如果有多個元件要套同一個樣式,
     那就要使用class,要針對class定義樣式的話,在selector前加「.」:



<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

}

</style>

</head>

<body>


<h1 class="importantHeadings">HTML</h1>

<h1 class="importantHeadings">CSS</h1>

<h1>JavaScript</h1>

<h1>jQuery</h1>


</body>

</html>


3>利用 tag (p, body, h1) 套用樣式



<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}


h1 {

color: white;

text-align: center;

background-color: darkblue;

}


p {

font-size: 20px;

}

</style>

</head>

<body>


<h1>吳濟聰</h1>

<p>輔大資管系助理教授</p>

<p>印地安那大學博士</p>


</body>

</html>


4>div span

雖然div及span都算是html的基本語法,但是,通常是用在樣式的設定上。

div與span的差別在於div是可以用來定義一個區塊的樣式,而且在<div></div>前後會換行。

span只能在一行之中,而且不會換行

<!DOCTYPE html>

<html>
<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>


<div class="importantHeadings">

<h1>My Important Heading</h1>

<h1>My Second Heading</h1>

</div>


<p>hello</p>

</body>

</html>




<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

background-color:black;

padding:20px

}

</style>

</head>

<body>


<h1><span class="importantHeadings">My Important Heading</span></h1>

<h1><span class="importantHeadings">My Second Heading</span></h1>

<p>hello</p>



</body>

</html>


2>Extjs 的 panel. bodyStyle 設定 兩種方式   CSS 字串


1>CSS字串方式:
bodyStyle: 'background:#ffc; padding:10px;

2>object 方式設定  CSS:
   bodyStyle: { background: '#ffc', padding: '10px' }


 {
            xtype: 'panel', bodyStyle: "background-color:transparent; border: 1px red solid;",  padding: "0",            
            layout: 'border',            
            items: [
                {  //sub_panel1 : table panel                                        
                    xtype: 'panel',
                    id: 'sub_panel1',                    
                    layout: 'fit',                    
                    items: [],                                       
                },  //end of panel1                                                    
            ] // end of   layout: "vbox", padding: "5", items: [
        }  //end of  sub_PrnTableFlds , items[{


3>font-size 的設定

說到font-size,就必須要知道該屬性設定值的問題,font-size可設定的值Amos會將其區分成三大類:
關鍵字 :  small  , large, larger,
絕對單位:  
                        px (1pixel = 1/96in) , 螢幕上顯示數據的最基本的點
                        pt (1point = 1/72in) ,
是印刷行業常用單位
                        cm
                        mm

                       in (1inch = 96px = 2.54cm)

相對單位:   % (百分比)