Tìm hiểu cách xây dựng các ứng dụng không máy chủ sẵn sàng sản xuất trên AWS

Bạn đang xem: cách tạo ghi chú trong html

Tôi thấy cái này < / span> hướng dẫn vào ngày hôm trước, thật tuyệt nhưng tôi đã tưởng tượng ra việc tiến thêm một bước nữa và biến nó trở nên hữu ích như một ứng dụng chứ không chỉ là một cách ưa thích để hiển thị một số dữ liệu có cấu trúc trên màn hình. Dưới đây là danh sách các tính năng mà tôi muốn thêm:

  • có thể chỉnh sửa tiêu đề và nội dung của ghi chú
  • có thể lưu tất cả các ghi chú của bạn
  • có thể thêm ghi chú mới
  • có thể xóa các ghi chú bạn không muốn nữa
  • ngẫu nhiên hóa màu sắc của các ghi chú hơn

Thay đổi HTML và CSS

Ban đầu, tôi đã cân nhắc việc sử dụng thuộc tính contenteditable mới trong HTML5 để làm cho tiêu đề và nội dung có thể chỉnh sửa được, nhưng đã quyết định sử dụng textarea thay vào đó, nó cung cấp hỗ trợ tốt hơn cho văn bản nhiều dòng và bạn có thể dễ dàng thêm văn bản giữ chỗ cũng như đặt giới hạn về độ dài của tiêu đề.

Tôi đã thêm hai hình ảnh làm nút để thêm ghi chú mới và lưu trạng thái của tất cả các ghi chú và tạo đường viền xung quanh các ghi chú để làm cho chúng nổi bật hơn một chút.

Đây là HTML được cập nhật:

 

1:

& lt;

body

& gt;

 

2:

& lt;

div

id

= "điều khiển" < / p>

& gt;

 

3:

& lt;

img

id

= "btnNew" < / p>

src

= "images / newnote.png"

/ & gt;

 

4:

& lt;

img

id

= "btnSave" < / p>

src

= "images / save.png"

/ & gt;

 

5:

& lt; /

div

& gt;

 

6:

 

7:

& lt;

ul

id

= "ghi chú" < / p>

& gt;

 

8:

& lt; /

ul

& gt;

 

9:

& lt; /

body

& gt;

Và CSS đi cùng với nó:

 

1:

* {

 

2:

maring: 0;

 

3:

đệm

: 0;

 

4:

}

 

5:

 

6:

.hide

{

 

7:

hiển thị

:

không;

 

8:

}

 

9:

 

10:

nội dung

{

 

11:

font-size

:

100%;

 

12:

margin

:

15px;

 

13:

nền

:

# 666;

 

14:

màu

:

#fff;

 

15:

}

 

16:

 

17:

#controls

img

{

 

18:

chiều rộng

:

28px;

 

19:

chiều cao

:

30px;

 

20:

background

: rgba (0, 0, 0, 0);

 

21:

}

 

22:

 

23:

#controls

img

: hover, #controls

img

: focus {

 

24:

-webkit-biến đổi: quy mô (1.2);

 

25:

-moz-biến đổi: scale (1.2);

 

26:

-o-biến đổi: scale (1.2);

 

27:

vị trí

:

tương đối;

 

28:

}

 

29:

 

30:

ul

,

li

{

 

31:

kiểu danh sách

:

không có;

 

32:

}

 

33:

 

34:

ul

{

 

35:

tràn

:

ẩn;

 

36:

padding

:

15px;

 

37:

}

 

38:

 

39:

ul

li

{

 

40:

margin

:

15px;

 

41:

float

:

left;

 

42:

vị trí

:

tương đối;

 

43:

}

 

44:

 

45:

ul

li

div

{

 

46:

text-decoration

:

không;

 

47:

màu

:

# 000;

 

48:

nền

:

#ffc;

 

49:

hiển thị

:

khối;

 

50:

chiều cao

:

150px;

 

51:

chiều rộng

:

150px;

 

52:

padding

:

10px;

 

53:

-moz-box-shadow: 5px 5px 7px rgba (33, 33, 33, 1);

 

54:

-webkit-box-shadow: 5px 5px 7px rgba (33, 33, 33, .7);

 

55:

box-shadow: 5px 5px 7px rgba (33, 33, 33, .7);

 

56:

-moz-chuyển đổi: -moz

-transform .15s tuyến tính;

 

57:

-o-chuyển đổi: -o

-transform .15s tuyến tính;

 

58:

-webkit-chuyển đổi: -webkit

-transform .15s tuyến tính;

 

59:

border-style

:

solid;

 

60:

}

 

61:

 

62:

ul

li

div

img

{

 

63:

padding

:

1px 3px;

 

64:

margin

:

10px;

 

65:

vị trí

:

tuyệt đối;

 

66:

đầu trang

: 0;

 

67:

đúng

: 0;

 

68:

}

 

69:

 

70:

ul

li

textarea

{

 

71:

font-family

: 'Chewy', arial, sans

-serif;

 

72:

background

: rgba (0, 0, 0, 0);

/ * nền trong suốt * /

 

73:

thay đổi kích thước:

không;

 

74:

padding

:

3px;

 

75:

border-style

:

none;

 

76:

}

 

77:

 

78:

.note-title

{

 

79:

font-size

:

140%;

 

80:

font-weight

:

bold;

 

81:

chiều cao

:

30px;

 

82:

chiều rộng

:

70%;

 

83:

}

 

84:

 

85:

.note-content

{

 

86:

font-size

:

120%;

 

87:

chiều cao

:

100px;

 

88:

chiều rộng

:

95%;

 

89:

}

 

90:

 

91:

ul

li

: nth-child (chẵn)

div

{< / pre>

 

92:

-o-biến đổi: xoay (4deg);

 

93:

-webkit-biến đổi: xoay (4deg);

 

94:

-moz-biến đổi: xoay (4deg);

 

95:

vị trí

:

tương đối;

 

96:

đầu trang

:

5px;

 

97:

}

 

98:

 

99:

ul

li

: nth-child (3n)

div

{< / pre>

 

100:

-o-biến đổi: xoay (-3deg);

 

101:

-webkit-biến đổi: xoay (-3deg);

 

102:

-moz-biến đổi: xoay (-3deg);

 

103:

vị trí

:

tương đối;

 

104:

đầu trang

:

-5px;

 

105:

}

 

106:

 

107:

ul

li

: nth-child (5n)

div

{< / pre>

 

108:

-o-biến đổi: xoay (5deg);

 

109:

-webkit-biến đổi: xoay (5deg);

 

110:

-moz-biến đổi: xoay (5deg);

 

111:

vị trí

:

tương đối;

 

112:

đầu trang

:

-10px;

 

113:

}

 

114:

 

115:

ul

li

div

: hover,

ul

li

div

: tiêu điểm {

 

116:

-moz-box-shadow: 10px 10px 7px rgba (0,0,0, .7);

 

117:

-webkit-box-shadow: 10px 10px 7px rgba (0,0,0, .7);

 

118:

box-shadow: 10px 10px 7px rgba (0,0,0, .7);

 

119:

-webkit-biến đổi: quy mô (1.25);

 

120:

-moz-biến đổi: scale (1.25);

 

121:

-o-biến đổi: scale (1.25);

 

122:

vị trí

:

tương đối;

 

123:

z-index: 5;

 

124:

}

 

125:

 

126:

/ * xác định 3 màu khác nhau cho ghi chú * /

 

127:

ul

li

div

.colour1

{

 

128:

nền

:

#ffc;

 

129:

}

 

130:

ul

li

div

.colour2

{

 

131:

nền

:

#cfc;

 

132:

}

 

133:

ul

li

div

.colour3

{

 

134:

nền

:

#ccf;

 

135:

}

Có một số điều cần lưu ý ở đây:

  • phần tử textarea có nền trong suốt
  • phần tử textarea không thể thay đổi kích thước
  • phần tử textarea có một văn bản giữ chỗ

Đây là giao diện của trang bây giờ:

Thêm tương tác với Javascript

Thêm ghi chú mới

Trong CSS ở trên, bạn có thể thấy rằng tôi đã xác định ba lớp CSS:

 

1:

/ * xác định 3 màu khác nhau cho các ghi chú * /

 

2:

ul

li

div

.colour1

{

 

3:

nền

:

#ffc;

 

4:

}

 

5:

ul

li

div

.colour2

{

 

6:

nền

:

#cfc;

 

7:

}

 

8:

ul

li

div

.colour3

{

 

9:

nền

:

#ccf;

 

10:

}

khi chúng tôi tạo một ghi chú mới, tất cả những gì chúng tôi cần làm để ngẫu nhiên hóa màu của ghi chú đó là thêm một trong những lớp này vào phần tử một cách ngẫu nhiên.

Đây là trình xử lý sự kiện cho nút hình ảnh "mới":

 

1:

$ (document) .ready (

function

() {

 

2:

Notes = $ (

"#notes"

);

// nhận tham chiếu đến danh sách 'ghi chú'

 

3:

...

 

4:

// nhấp vào nút 'Ghi chú mới' sẽ thêm ghi chú mới vào danh sách

 

5:

$ (

"#btnNew"

) .click (

hàm

() {

 

6:

addNewNote ();

 

7:

});

 

8:

...

 

9:

});

 

10:

 

11:

// thêm ghi chú mới vào danh sách 'ghi chú'

 

12:

hàm

addNewNote (

lớp

, tiêu đề, nội dung) {

 

13:

// nếu lớp không được chỉ định, hãy sử dụng lớp màu ngẫu nhiên

 

14:

if

(!

class

) {

 

15:

lớp

=

"color"

+ Math.ceil (Math.random () * 3);

 

16:

}

 

17:

 

18:

// thêm ghi chú mới vào cuối danh sách

 

19:

Notes.append (

"& lt; li & gt; & lt; div class = '"

+

lớp

+

"'& gt;"

+

 

20:

"& lt; textarea class = 'note-title' placeholder = 'Untitled' maxlength = '10 '/ & gt;"

+

 

21:

"& lt; textarea class = 'note-content' placeholder = 'Nội dung của bạn ở đây' / & gt;"

+

 

22:

"& lt; img class = 'hide' src = 'images / close.png' / & gt;"

+

 

23:

"& lt; / div & gt; & lt; / li & gt;"

);

 

24:

 

25:

// lấy ghi chú mới vừa được thêm vào và đính kèm trình xử lý sự kiện nhấp chuột vào nút đóng của nó

 

26:

var

newNote = Notes.find (

"li: last"

);

 

27:

newNote.find (

"img"

) .click (

hàm

() {

 

28:

newNote.remove ();

 

29:

});

 

30:

 

31:

// kết nối các trình xử lý sự kiện để hiển thị / ẩn nút đóng khi thích hợp

 

32:

addNoteEvent (newNote);

 

33:

 

34:

// nếu có tiêu đề thì hãy đặt tiêu đề của ghi chú mới

 

35:

nếu

(title) {

 

36:

// lấy phần tử textarea tiêu đề và đặt giá trị của nó

 

37:

newNote.find (

"textarea.note-title"

) .val (title);

 

38:

}

 

39:

 

40:

// nếu một nội dung được cung cấp thì hãy đặt nội dung của ghi chú mới

 

41:

nếu

(nội dung) {

 

42:

// lấy phần tử textarea nội dung và đặt giá trị của nó

 

43:

newNote.find (

"textarea.note-content"

) .val (nội dung);

 

44:

}

 

45:

}

 

46:

 

47:

hàm

addNoteEvent (noteElement) {

 

48:

noteElement.focus (

hàm

() {

 

49:

$ (

cái này

) .find (

".img"

) .removeClass (

" ẩn "

);

 

50:

}). hover (

hàm

() {

 

51:

$ (

this

) .find (

"img"

) .removeClass (

"ẩn "

);

 

52:

},

hàm

() {

 

53:

$ (

this

) .find (

"img"

) .addClass (

"ẩn "

);

 

54:

});

 

55:

}

như bạn có thể thấy, trình xử lý sự kiện này gọi hàm addNewNote chịu trách nhiệm thêm ghi chú mới vào danh sách không có thứ tự ghi chú và đặt lớp, tiêu đề hoặc nội dung của nó tùy thuộc vào các đối số. Trong cách sử dụng cụ thể này, nó sẽ chọn ngẫu nhiên một trong ba lớp màu và thêm lớp đó vào ghi chú mới.

Khi một ghi chú đã được thêm vào, tôi sẽ tham chiếu đến nó và tạo một trình xử lý sự kiện cho nút đóng của nó để khi nó được nhấp vào, nó sẽ xóa ghi chú này khỏi DOM.

Sau đó, chức năng addNoteEvent có nhiệm vụ thêm tiêu điểm và trình xử lý sự kiện di chuột vào / ra vào ghi chú để hiển thị và ẩn nút đóng để nó chỉ hiển thị khi ghi chú được đặt tiêu điểm / di chuột vào.

Lưu ghi chú

Trước đây tôi đã đề cập đến việc sử dụng bộ nhớ phiên và cục bộ của HTML5 trong bài đăng này rồi, những gì tôi đang làm ở đây rất giống nhưng có liên quan nhiều hơn một chút.

Khi nhấp vào nút 'lưu', tôi cần kiểm tra từng ghi chú và nhớ lớp, văn bản tiêu đề (hãy nhớ rằng bạn không thể lấy văn bản đã được nhập vào vùng văn bản bằng cách lấy HTML của phần tử ) và văn bản nội dung trong một đối tượng đặt riêng, mảng đối tượng kết quả sau đó được JSON tuần tự hóa bằng cách sử dụng thư viện Json.js của Douglas Crockford. Đây là chuỗi JSON được lưu vào bộ nhớ cục bộ.

Mặt khác, khi trang đã được tải và sự kiện DOM được kích hoạt (tức là khi JQuery.ready kích hoạt), tôi sẽ cần kiểm tra xem chuỗi JSON có trong bộ nhớ cục bộ hay không, nếu có, sau đó giải mã hóa chuỗi quay lại mảng đối tượng và thêm lại các ghi chú theo thứ tự:

 

1:

var

ghi chú;

 

2:

var

count = 0;

 

3:

 

4:

$ (document) .ready (

function

() {

 

5:

Notes = $ (

"#notes"

);

// nhận tham chiếu đến danh sách 'ghi chú'

 

6:

 

7:

// tải ghi chú từ bộ nhớ cục bộ nếu có

 

8:

var

storageNotes = localStorage.getItem (

"ghi chú"

);

 

9:

nếu

(Lưu ý)

 

10:

{

 

11:

// chuyển json đã lưu trữ trở lại một mảng các đối tượng ghi chú

 

12:

var

NotesArray = JSON.parse (ManagedNotes);

 

13:

count = noteArray.length;

 

14:

 

15:

cho

(

var

i = 0; i & lt; count; i ++) {

 

16:

var

storageNote = NotesArray [i];

 

17:

addNewNote (ManagedNote.Class, ManagedNote.Title, ManagedNote.Content);

 

18:

}

 

19:

}

 

20:

 

21:

...

 

22:

 

23:

// nhấp vào nút 'Lưu' sẽ lưu trạng thái của bảng ghi chú vào bộ nhớ cục bộ

 

24:

$ (

"#btnSave"

) .click (

hàm

() {

 

25:

var

NotesArray =

new

Array ();

 

26:

 

27:

// đối với mỗi ghi chú, hãy thêm một đối tượng ghi chú riêng vào mảng

 

28:

Notes.find (

"li & gt; div"

) .each (

hàm

(i, e ) {

 

29:

// lưu thuộc tính lớp của div, cũng như văn bản cho các vùng văn bản nội dung và tiêu đề

 

30:

var

colourClass = $ (e) .attr (

"class"

);

 

31:

var

title = $ (e) .find (

"textarea.note-title"

);

 

32:

var

content = $ (e) .find (

"textarea.note-content"

);

 

33:

 

34:

NotesArray.push ({Index: i, Title: title.val (), Content: content.val (), Class: colourClass});

 

35:

});

 

36:

 

37:

// json mã hóa nó

 

38:

var

jsonStr = JSON.stringify (NotesArray);

 

39:

 

40:

// và lưu chuỗi json vào bộ nhớ cục bộ

 

41:

localStorage.setItem (

"ghi chú"

, jsonStr);

 

42:

 

43:

// thông tin người dùng đã hoàn tất

 

44:

alert (

"Đã lưu các ghi chú"

);

 

45:

});

 

46:

 

47:

// thêm ghi chú vào danh sách nếu không có ghi chú nào

 

48:

if

(count == 0)

 

49:

{

 

50:

$ (

"#btnNew"

) .click ();

 

51:

}

 

52:

});

Bản trình diễn

Bạn có thể thử bản trình diễn đầy đủ tại:

http://stickynote.theburningmonk.com

hoặc sử dụng liên kết ngắn:

http://LNK.by/fhbba

Hãy tận hưởng!

CẬP NHẬT 27/02/2011:

Cảm ơn Joey Beechey đã chỉ ra cho tôi trong nhận xét rằng bản trình diễn không hoạt động trong Safari và sau khi tìm hiểu kỹ, tôi nhận thấy rằng vấn đề là với hàm addNewNote có chức năng tham số có tên ' class ' là một từ dành riêng. Tôi cũng tìm thấy một tham chiếu khác về vấn đề này tại đây , đề cập đến vấn đề tương tự nhưng thay vào đó với tên biến ‘ abstract ‘!

Tôi cũng đã đưa toàn bộ nội dung vào một tệp zip mà bạn có thể tải xuống từ tại đây , vì vậy, bạn cứ tự nhiên tìm hiểu nó!

Tài liệu tham khảo:

Dự án JSON-js của Douglas Crockford trên github

Bài đăng trên blog của John Resig bao gồm một số ví dụ hữu ích về cách sử dụng thư viện JSON-js

Hướng dẫn gốc đã truyền cảm hứng cho bài đăng trên blog này


Xem thêm những thông tin liên quan đến chủ đề cách tạo ghi chú trong html

Comments trong HTML

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2020-09-16
  • Đánh giá: 4 ⭐ ( 8123 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách ghi chú và sử dụng chú thích trong HTML
    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    Rất mong nhận được sự động viên từ các bạn. Một chút khích lệ từ người xem sẽ là động lực to lớn để mình tiếp tục phát triển kênh.
    BIDV: 21510002210466
    Vietcombank: 0451000308735
    hoặc qua ví điện tử momo, zalopay, shoppeepay: https://bit.ly/ViDienTu
    html css nguyenthithuylien

Cách tạo ghi chú, chú thích footnote cuối trang cho văn bản (13

  • Tác giả: www.ketoanthue.vn
  • Đánh giá: 3 ⭐ ( 8740 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ke toan thue, Trung Tam dao tao ke toan VAFT – Đào tạo kế toán thuế - Dao tao ke toan truong – Cung cấp dich vu ke toan, Phần mềm kế toán tại Hà Nội, TPHCM, Đồng Nai, Cầu Giấy, Hà Đông – Thiết kế website

Cách để Chú thích trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 4 ⭐ ( 4516 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Chú thích trong HTML. Chú thích trên mã sẽ cho phép bạn để lại lời nhắc và sự lý giải cho chính mình cũng như những lập trình viên khác khi làm việc trên trang web. Ghi chú cũng có thể được sử dụng nhằm vô hiệu hóa những đoạn mã...

Cách ghi chú thích trong HTML

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 2422 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học này, tôi sẽ hướng dẫn các bạn cách ghi chú thích trong HTML

Ghi chú, chú thích trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 4 ⭐ ( 6803 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và mẹo sử dụng thẻ ghi chú, chú thích trong HTML. Trong những trang code dài, thẻ ghi chú, chú thích trong HTML đặc biệt hữu dụng.

Cách Tạo Chú Thích Trong HTML

  • Tác giả: nguyenhung.net
  • Đánh giá: 3 ⭐ ( 5154 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Comment trong HTML - Cách tạo chú thích trong HTML để giúp người viết ghi chú từng đoạn code để sau này khi đọc lại hoặc khi sữa code sẽ dễ dàng hơn.

Ghi chú trong HTML.

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 9862 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các ghi chú trong html sẽ được đặt trong cặp thẻ .

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tìm việc làm tại TPHCM lương cao mới nhất - phỏng vấn tester

By ads_php