前端框架jqwidgets的使用-jqxTextAr

前端框架jqwidgets的使用-jqxTextArea

引入的js部分：

HTML部分：

JAVASCRIPT部分：

$(document).ready(function () {

var quotes=[];

quotes.push('Life is a dream for the wise, a game for the fool, a comedy for the rich, a tragedy for the poor.');

quotes.push('Yesterday is not ours to recover, but tomorrow is ours to win or lose.');

quotes.push('It does not matter how slowly you go as long as you do not stop.');

quotes.push('Success depends upon previous preparation, and without such preparation there is sure to be failure.');

quotes.push('Better a diamond with a flaw than a pebble without.');

quotes.push('To succeed in life, you need two things: ignorance and confidence.');

quotes.push('A successful man is one who can lay a firm foundation with the bricks others have thrown at him.');

quotes.push('Sleep is the best meditation.');

$('#jqxTextArea').jqxTextArea({ placeHolder: 'Enter a sentence', height: 90, width: 300, minLength: 1, source: quotes });

});

</script>

多人在使用 CSS 時,對 Display, Visibility 和 Overflow 三個屬性的理解并不是很清晰,這里就對這三個屬性做一下分析,對應三個屬性在使用時的區別.

Display

display 用來設置或檢索對象是否及如何顯示。

display: none

display 屬性為 none 時,隱藏標簽對象。不會為對象保留其位置空間,它下面所在的元素會被自動上移占有被隱藏標簽位置。

HTML 代碼:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代碼:

div{
    width: 200px;
    height: 100px;
}
#a{
    background-color: red;
}
#b{
    
    background-color: green;
    display: none;
}
#c{
    background-color: blue;
}

效果如下:

display: block

display 屬性為 block 時,默認有顯示標簽的意義,同時可以將標簽轉換為塊元素顯示,這時標簽會獨占一行,并且可以設置寬高屬性。

HTML 代碼:

<span id="a">A</span>
<span id="b">B</span>
<span id="c">C</span>

CSS代碼:

span{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
}
#a{
    background-color: red;
}
#b{
    
    background-color: green;
}
#c{
    background-color: blue;
    display: block;
}

效果如下:

display: inline

display 屬性為 inline 時,指定對象為內聯元素,此時對象的寬高屬性不在有效,元素大小取決于實際內容大小。

HTML 代碼:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代碼:

div{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
    display: inline;
}
#a{
    background-color: red;
}
#b{
    background-color: green;
}
#c{
    background-color: blue;
}

效果如下:

Visibility

visibility 屬性用來設置或檢索是否顯示對象。與 display 屬性不同，該屬性為隱藏的對象保留其占據的物理空間, 該屬性默認值為 visible, 設置對象可見。

visibility: hidden

visibility 屬性為 hidden 時,隱藏標簽對象。但該對象所占用的位置空間會被保留。

HTML代碼:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代碼:

div{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
}
#a{
    background-color: red;
}
#b{
    background-color: green;
    visibility: hidden;
}
#c{
    background-color: blue;
}

效果如下:

Overflow

overflow 屬性用來檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

overflow: visible

overflow 默認值為 visible, 作用是按實際效果顯示 ,不剪切超出范圍的內容。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: visible;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: hidden

overflow 值為 hidden時,會將超出對象尺寸的內容進行裁剪，將不出現滾動條。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: hidden;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: scroll

overflow 值為 scroll, 作用是將超出對象尺寸的內容進行裁剪，并以滾動條的方式顯示超出的內容。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow:  scroll;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: auto

overflow 值為 auto時, 作用是在需要時剪切內容并添加滾動條，該值為body對象和textarea的默認值。

HTML 代碼:

<div id="a">
    <div id="b"></div>
</div>

CSS代碼:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: auto;
?
}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

總結:

display 和 visibility 屬性都是用來設置或檢索對象是否及如何顯示。
使用diplay 隱藏對象時,在文檔流中不占空間.后續對象會占據隱藏對象位置。
使用 visibility 隱藏對象時,在文檔流中會保留隱藏對象所占用的空間。
overflow 主要用來檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容顯示。

例

帶有兩個輸入字段和一個提交按鈕的 HTML 表單：

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

（更多實例見頁面底部）

瀏覽器支持

所有主流瀏覽器都支持 <form> 標簽。

標簽定義及使用說明

<form> 標簽用于創建供用戶輸入的 HTML 表單。

<form> 元素包含一個或多個如下的表單元素：

<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>

HTML 4.01 與 HTML5之間的差異

HTML5 新增了兩個新的屬性：autocomplete 和 novalidate，同時不再支持 HTML 4.01 中的某些屬性。

HTML 與 XHTML 之間的差異

在 XHTML 中，name 屬性已被廢棄。使用全局 id 屬性代替。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
accept	MIME_type	HTML5 不支持。規定服務器接收到的文件的類型。（文件是通過文件上傳提交的）
accept-charset	character_set	規定服務器可處理的表單數據字符集。
action	URL	規定當提交表單時向何處發送表單數據。
autocompleteNew	onoff	規定是否啟用表單的自動完成功能。
enctype	application/x-www-form-urlencodedmultipart/form-datatext/plain	規定在向服務器發送表單數據之前如何對其進行編碼。（適用于 method="post" 的情況）
method	getpost	規定用于發送表單數據的 HTTP 方法。
name	text	規定表單的名稱。
novalidateNew	novalidate	如果使用該屬性，則提交表單時不進行驗證。
target	_blank_self_parent_top	規定在何處打開 action URL。