顯示具有 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,

fieldDefaults: { labelAlign: 'right' },

defaults: { margin: { top: 3 } },

height: 20,

items: [

{

xtype: 'panel',

id: 'panel1_1',

flex: 14,

border: 0,

items: [

{

xtype: 'panel',

id: 'panel1_11',

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

#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>

<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可以是

html的基本元素(element)，如:body、h1等等。上面的範例就是針對基本元素定義樣式。
當我們希望只針對某一個特定元件定義樣式，我們可以利用在html中所定義的id定義樣式。
當我們希望只針對某一群元件定義樣式，我們可以利用在html中所定義的class定義樣式。

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

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

<!DOCTYPE html>

<html>

<head>

<style>

#primaryHeading {

text-align: center;

color: red;

}

</style>

</head>

<body>

</body>

</html>

2>多元件(class)套用同一樣式

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

<!DOCTYPE html>

<html>

<head>

<style>

.importantHeadings {

text-align: center;

color: red;

}

</style>

</head>

<body>

<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>

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

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

</body>

</html>

4>div span

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

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

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

<!DOCTYPE html>

<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",

items: [

{ //sub_panel1 : table panel

xtype: 'panel',

id: 'sub_panel1',

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)

相對單位: % (百分比)

訂閱：文章 (Atom)

2023年4月20日星期四

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

2022年11月2日星期三

V120502A - jQuery - 屬性設定及 CSS

jQuery 屬性與樣式 (Attributes & CSS)

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

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

Value - Getter/Setter

jQuery 對於樣式的操作 (CSS)

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

2022年11月1日星期二

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

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2023年4月20日 星期四

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

2022年11月2日 星期三

V120502A - jQuery - 屬性設定及 CSS

jQuery 屬性與樣式 (Attributes & CSS)

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

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

Value - Getter/Setter

jQuery 對於樣式的操作 (CSS)

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

2022年11月1日 星期二

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

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2023年4月20日星期四

2022年11月2日星期三

2022年11月1日星期二