Thực đơn
trang chủExcel

Cơ sở xác nhận html. Hộp thoại và JavaScript: cảnh báo, xác nhận, nhắc nhở

Xác nhận phương pháp HTML, XHTML và CSS 100% Kvint Igor()

phương thức xác nhận()

Phương thức confirm() hiển thị một cửa sổ xác nhận, tương tự như cửa sổ cảnh báo được tạo bởi phương thức notification() nhưng chứa hai nút: OK và Cancel. Liệt kê 11.3 minh họa việc tạo một cửa sổ xác nhận, nhưng tập lệnh này không phân biệt giữa nút OK và nút Hủy. Nhấn bất kỳ nút nào sẽ chỉ đóng cửa sổ (Hình 11.5).

Cơm. 11.5. Làm việc với xác nhận

Liệt kê 11.3. Làm việc với xác nhận

Làm việc với xác nhận

confirm("Đây là xác nhận của tôi");

Sau khi đọc chương này, bạn sẽ học cách sử dụng phương pháp này để làm cho tập lệnh của bạn phản hồi khác đi khi bạn nhấp vào nút OK và Hủy.

Từ cuốn sách Máy chủ Windows Script dành cho Windows 2000/XP của Andrey Vladimirovich Popov

Phương thức chạy Tham số intWindowStyle đặt loại cửa sổ cho ứng dụng sẽ được khởi chạy (Bảng 1.13).Bảng 1.13. Các loại cửa sổ (intWindowStyle) Tham số Visual Basic Hằng số Mô tả 0 vbHide Ẩn cửa sổ hiện tại và kích hoạt một cửa sổ khác (hiển thị và đặt tiêu điểm cho nó) 1 vbNormalFocus Kích hoạt và

Từ cuốn sách Lập trình trong Ngôn ngữ Ruby[Tư tưởng ngôn ngữ, lý thuyết và thực hành ứng dụng] của Fulton Hal

Phương thức xóa Nếu tham số bắt buộc là sai hoặc không được chỉ định thì khi sử dụng phương thức Xóa sẽ không thể xóa thư mục có thuộc tính chỉ đọc. Đặt giá trị bắt buộc thành true sẽ cho phép xóa các thư mục đó ngay lập tức. Khi sử dụng phương thức Xóa, việc có chỉ định hay không không quan trọng

Từ cuốn sách Lập trình PDA và Điện thoại thông minh trên .NET Compact Framework của Klimov Alexander P.

Phương thức di chuyển Tham số đích được yêu cầu chỉ định thư mục mà việc di chuyển sẽ được thực hiện; ký tự đại diện không được phép trong tên thư mục. Lưu ý Thay vì phương thức Move, bạn có thể sử dụng phương thức đối tượng MoveFolder

Từ cuốn sách Linux và UNIX: lập trình shell. Hướng dẫn dành cho nhà phát triển. của Tainsley David

Phương thức sao chép Tham số đích bắt buộc chỉ định tệp mà bản sao sẽ được thực hiện; ký tự đại diện không được phép trong tên tệp. Tham số ghi đè là biến Boolean xác định xem có ghi đè hay không tập tin hiện cóđích được đặt tên (ghi đè=true)

Từ cuốn sách Mô tả ngôn ngữ PascalABC.NET của Nhóm RuBoard

Phương thức xóa Nếu tham số bắt buộc là sai hoặc không được chỉ định thì khi sử dụng phương thức Xóa sẽ không thể xóa tệp có thuộc tính chỉ đọc. Đặt lực lượng thành đúng sẽ cho phép xóa các tệp đó ngay lập tức. Lưu ý Bạn có thể sử dụng phương pháp DeleteFile thay vì phương pháp Xóa.

Từ cuốn sách của tác giả

8.3.1. Phương thức tiêm Phương thức tiêm đến với Ruby từ ngôn ngữ Smalltalk (nó xuất hiện lần đầu trong Ruby 1.8). Hành vi của nó rất thú vị, mặc dù không dễ hiểu trong lần đầu tiên. Nó phản ánh thực tế là chúng ta thường muốn đi vòng quanh danh sách và “tích lũy” một số kết quả trong suốt quá trình. Tất nhiên, nhất

Từ cuốn sách của tác giả

8.3.3. Phương pháp phân vùng Như người ta nói, “có hai loại người trên thế giới: những người chia mọi người thành nhiều loại khác nhau và những người không làm vậy”. Phương thức phân vùng không đề cập đến con người (mặc dù chúng ta có thể biểu diễn chúng dưới dạng đối tượng trong Ruby), nhưng nó cũng chia tập hợp thành hai phần.Nếu một khối được đưa ra khi phân vùng được gọi thì nó sẽ được đánh giá

Từ cuốn sách của tác giả

11.1.10. Phương thức khởi tạo_copy Khi sao chép một đối tượng bằng phương thức dup hoặc clone, hàm tạo không được gọi. Tất cả thông tin trạng thái đều được sao chép, nhưng nếu bạn không cần hành vi này thì sao? Hãy xem một ví dụ: class Document attr_accessor:title, :text attr_reader:timestamp def khởi tạo(title, text) @title, @text = title, text @timestamp =

Từ cuốn sách của tác giả

11.1.11. Phương thức phân bổ Rất hiếm, nhưng có trường hợp bạn cần tạo một đối tượng mà không cần gọi hàm tạo của nó (bỏ qua phương thức khởi tạo). Ví dụ, có thể trạng thái của một đối tượng được xác định hoàn toàn bằng các phương thức truy cập của nó; thì không cần phải gọi phương thức mới (sẽ gọi phương thức khởi tạo) trừ khi bạn

Từ cuốn sách của tác giả

11.3.2. phương thức const_get Phương thức const_get lấy giá trị của một hằng số từ Tên từ mô-đun hoặc lớp mà nó thuộc về.str = "PI"Math.const_get(str) # Giá trị là Math::PI. Đây là một cách để tránh gọi phương thức eval, đôi khi bị coi là không phù hợp. Cách tiếp cận này rẻ hơn từ quan điểm

Từ cuốn sách của tác giả

11.3.5. Phương thức định nghĩa_method Bên cạnh đó từ khóa chắc chắn, là người duy nhất Cách thông thườngđể thêm một phương thức vào một lớp hoặc đối tượng - hãy sử dụng phương thức defin_method và nó cho phép bạn thực hiện việc này trong thời gian chạy. Tất nhiên, trong Ruby hầu hết mọi thứ đều xảy ra trong thời gian chạy. Nếu như

Từ cuốn sách của tác giả

11.3.6. Phương thức const_missing Phương thức const_missing tương tự như phương thức Method_missing. Khi cố gắng truy cập một hằng số không xác định, phương thức này sẽ được gọi - tất nhiên nếu nó được xác định. Là một tham số, nó được truyền một ký hiệu tham chiếu đến một hằng số.

Từ cuốn sách của tác giả

Phương thức Lockbits .NET Compact Framework 2.0 đã giới thiệu hỗ trợ hạn chế cho phương thức LockBits, phương thức này có thể được sử dụng để thao tác một mảng pixel hình ảnh. Bảng liệt kê ImageLockMode trong phương thức này cho phép các giá trị ReadWrite, ReadOnly và WriteOnly. Và hỗ trợ liệt kê PixelFormat

Từ cuốn sách của tác giả Từ cuốn sách của tác giả

Method Zip Mô tả các phương thức Các phương thức được đưa ra cho chuỗi trình tự của hàm T. Zip(second: chuỗi TSecond; resultSelector: (T,TSecond)->Res): chuỗi Res; Nối hai chuỗi bằng cách sử dụng chức năng được chỉ định, lấy một phần tử của mỗi chuỗi và

Từ cuốn sách của tác giả

Phương thức Chứa Mô tả các phương thức Các phương thức được đưa ra cho chuỗi trình tự của T. function Chứa(giá trị: T): boolean; Xác định xem phần tử đã chỉ định có nằm trong chuỗi hay không bằng cách sử dụng bộ so sánh đẳng thức mặc định. hàm Chứa(giá trị: T; bộ so sánh: IEqualityComparer): boolean;

Có ba trong JavaScript hoạt động cơ bản, cho phép bạn nhận dữ liệu từ người dùng để xử lý thêm trong tập lệnh. Đây là những cảnh báo, nhắc nhở và xác nhận. Chúng được sử dụng để làm gì, cách sử dụng chúng và các sắc thái khác sẽ được thảo luận sau trong bài viết này.

báo động

Được sử dụng để hiển thị một cửa sổ phương thức trên màn hình trình duyệt (điều này có nghĩa là người dùng không thể nhấp vào bất cứ thứ gì trên trang cho đến khi anh ta đóng cửa sổ này. Trong ví dụ này, cho đến khi anh ta nhấp vào “OK” trong cửa sổ).

Sau khi thông báo trong cảnh báo được hiển thị, quá trình thực thi tập lệnh sẽ bị tạm dừng và tiếp tục lại sau khi đóng cửa sổ phương thức.

Nếu trường được điền và nhấp vào OK, thông tin do người dùng nhập sẽ được trả về tập lệnh.

Cú pháp của lệnh này phức tạp hơn một chút so với lệnh trước, vì nó cho phép bạn đặt văn bản của tin nhắn cho người dùng và nội dung của trường nhập thông tin, sẽ được hiển thị theo mặc định: result = nhắc(title , mặc định ) ; , Ở đâu

  • tiêu đề – một thông báo sẽ được hiển thị cho người dùng trong cửa sổ phương thức. Đối số là bắt buộc.
  • mặc định – những gì sẽ được hiển thị trong trường nhập văn bản theo mặc định. Nó cũng được yêu cầu, vì nếu không được chỉ định, nó có thể dẫn đến lỗi trong một số trình duyệt. Nếu bạn muốn để trống trường nhập thông tin thì chỉ cần đặt lời nhắc như sau:

    var myTest = nhắc("Mọi thông tin", """);

Một ví dụ nhỏ về việc sử dụng dấu nhắc:

var Year = nhắc("Bạn tốt nghiệp đại học năm nào?", 2008); notification("Bạn đã tốt nghiệp " + năm + " năm!" );

Thường xuyên lệnh nàyđược sử dụng để thu thập dữ liệu từ người dùng mà tập lệnh cần để tiếp tục công việc tiếp theo.

xác nhận

Cũng đại diện cho một cửa sổ phương thức. Như bạn có thể đoán từ cái tên, nó thường được sử dụng để phối hợp điều gì đó với người dùng.

Đây là lý do tại sao nó được thiết kế để tương tác, nó cung cấp cho người dùng các nút OK và CANCEL, tương ứng trả về các giá trị Boolean đúng và sai cho tập lệnh. Xếp hạng: 4 (trung bình 4 trên 5)

Tiếp tục loạt bài viết giáo dục về hướng dẫn và quản lý sắc đẹp cài đặt tiêu chuẩn trình duyệt, hôm nay chúng tôi mời bạn phát triển hộp thoại xác nhận trên nhiều trình duyệt với giao diện dễ sử dụng plugin jQuery. Bạn có thể chọn văn bản, nút và hành động sẽ được thực hiện sau một cú nhấp chuột.

Mã HTML

Mặc dù ban đầu chúng ta nên tập trung vào cửa sổ xác nhận, nhưng trước tiên hãy cho bạn biết một chút về trang chúng ta sẽ sử dụng. Nếu bạn muốn thấy nguồn plugin, bạn có thể bỏ qua bước này và cuộn xuống phần bài viết nói về jQuery.

Index.php


Thay thế hộp thoại xác nhận jQuery bằng CSS3 | Bản demo hướng dẫn

Ở đầu tài liệu, chúng tôi đã bao gồm phông chữ Cuprum từ , jQuery.confirm.css (các biểu định kiểu xếp tầng cho hộp thoại) và styles.css - các biểu định kiểu xếp tầng của trang của chúng tôi.

Ở dưới cùng của nội dung tài liệu chúng tôi đã bao gồm thư viện jQuery, jquery.confirm.js (tệp plugin chính), cũng như script.js, lắng nghe sự kiện nhấn nút và chạy plugin. Trong bước cuối cùng của hướng dẫn hôm nay, chúng tôi sẽ cho bạn biết về hai tệp này.

Để đưa cửa sổ xác nhận vào trang web của bạn, bạn sẽ cần sao chép thư mục jquery.confirm từ kho lưu trữ đã tải xuống và đưa jquery.confirm.css vào phần đầu mã, cũng như tệp jquery.confirm.js trước thẻ kết thúc phần nội dung của tài liệu + thư viện jQuery.

Bản thân hộp thoại không gì khác hơn là một vài dòng mã HTML. Dưới đây bạn có thể thấy mã được plugin chèn vào để hiển thị hộp thoại.

Mã hộp thoại ví dụ

Mã được thêm vào phần thân của tài liệu. confirmOverlay được hiển thị ở đầu phần còn lại của trang, điều này ngăn cản mọi tương tác với các thành phần trang trong khi hộp thoại được hiển thị. Các nút xác nhận h1, p và div được sắp xếp theo cấu trúc được chỉ định trong cài đặt plugin. Phần sau của bài viết bạn sẽ tìm hiểu thêm về điều này.

Mã CSS

Thiết kế của hộp thoại được chứa trong tệp jquery.confirm.css. Điều này giúp đơn giản hóa đáng kể quá trình tích hợp vào hệ thống hiện có dự án đã hoàn thành và kiểu dáng được thực hiện theo cách mà bạn có thể chắc chắn rằng các kiểu đó sẽ không trộn lẫn với các kiểu đã có trên trang.

jquery.confirm.css

#confirmOverlay(
chiều rộng: 100%;
chiều cao:100%;
vị trí: cố định;
đỉnh: 0;
trái: 0;
nền:url("ie.png");
nền: -moz-tuyến tính-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) lặp lại-x rgba(11,11,11,0.2);
nền:-webkit-gradient(tuyến tính, 0% 0%, 0% 100%, từ(rgba(11,11,11,0.1)), đến(rgba(11,11,11,0.6))) lặp lại-x rgba(11,11,11,0.2);
chỉ số z: 100000;
}

#confirmBox(
nền:url("body_bg.jpg") lặp lại-x phía dưới bên trái#e5e5e5;
chiều rộng: 460px;
vị trí: cố định;
trái: 50%;
trên cùng: 50%;
lề:-130px 0 0 -230px;
đường viền: rgba rắn 1px(33, 33, 33, 0.6);

Moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inet;
-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inet;
bóng hộp: 0 0 2px rgba(255, 255, 255, 0.6) inet;
}

#confirmBox h1,
#confirmBox p(
phông chữ:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;
nền:url ("header_bg.jpg") lặp lại-x phía dưới bên trái #f5f5f5;
phần đệm: 18px 25px;
bóng văn bản: 1px 1px 0 rgba(255, 255, 255, 0.6);
màu:#666;
}

#confirmBox h1(
khoảng cách chữ: 0,3px;
màu:#888;
}

#confirmBox p(
nền: không có;
cỡ chữ: 16px;
chiều cao dòng: 1,4;
phần đệm trên cùng: 35px;
}

#confirmButton(
phần đệm:15px 0 25px;
căn chỉnh văn bản:giữa;
}

#confirmBox.button(
hiển thị: khối nội tuyến;
màu trắng;
vị trí: tương đối;
chiều cao: 33px;

Phông chữ:17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;

Lề phải: 15px;
phần đệm: 0 35px 0 40px;
trang trí văn bản: không có;
đường viền: không có;
}

#confirmBox .button:last-child( lề phải: 0;)

#confirmBox .button span(
vị trí: tuyệt đối;
đỉnh: 0;
phải:-5px;
nền:url("buttons.png") không lặp lại;
chiều rộng:5px;
chiều cao:33px
}

#confirmBox .blue( vị trí nền: trên cùng bên trái; bóng văn bản: 1px 1px 0 #5889a2;)
#confirmBox .blue span( vị trí nền:-195px 0;)
#confirmBox .blue:hover( vị trí nền: dưới cùng bên trái;)
#confirmBox .blue:hover span( vị trí nền: -195px dưới cùng;)

#confirmBox .gray( vị trí nền: -200px trên cùng; bóng văn bản: 1px 1px 0 #707070;)
#confirmBox .gray span( vị trí nền:-395px 0;)
#confirmBox .gray:hover( vị trí nền: -200px dưới cùng;)
#confirmBox .gray:hover span( vị trí nền: -395px dưới cùng;)

Điều này tận dụng CSS3 mới. Trong định nghĩa #confirmOverlay, chúng tôi sử dụng các mức tăng dần CSS3 (chỉ hoạt động trong Firefox, Safari và Chrome) với dự phòng được cung cấp dưới dạng PNG trong suốt.

Tiếp theo, trong #confirmBox nằm ở giữa màn hình, chúng tôi đã thêm bóng tối bên trong khối (tương tự như ánh sáng bên trong trong Photoshop). Chúng tôi cũng sử dụng phông chữ Cuprum được thêm từ thư mục phông chữ của Google.

Cùng với bóng văn bản, bạn có thể thấy kiểu dáng của nút. Chúng được thực hiện bằng cách sử dụng cửa trượt. TRÊN khoảnh khắc này Có hai loại thiết kế có sẵn - xanh và xám. Bạn có thể thêm màu mới các nút bằng cách thêm các khai báo mới vào mã.

jQuery

Trước khi chuyển sang mã nguồn của plugin, trước tiên chúng ta hãy xem xét kỹ hơn một chút. Trong script.js bạn có thể thấy plugin đang chạy.

Script.js

$(document).ready(function())(

$(".item .delete").click(function())(

Var elem = $(this).closest(".item");

$.confirm((
"title" : "Xóa xác nhận",
"message" : "Bạn sắp xóa mục này.
Nó không thể được khôi phục sau đó! Tiếp tục?"
"nút" :(
"Đúng" :(
"lớp" : "xanh",
"hành động": hàm())(
elem.slideUp();
}
},
"KHÔNG" :(
"lớp" : "xám",
"action": function()() // Không có gì để làm trong trường hợp này. Bạn có thể cũng bỏ qua thuộc tính hành động.
}
}
});

Khi nhấp vào div .deleted trong ví dụ của chúng tôi, tập lệnh sẽ thực thi hàm $.confirm do plugin xác định. Sau đây là tiêu đề, mô tả và đối tượng nút của hộp thoại. Mỗi nút có tên lớp CSS cũng như tham số hành động. Một hành động là một chức năng chạy khi một nút được bấm.

Bây giờ chúng ta hãy đến phần thú vị. Trong jquery.confirm.js bạn có thể xem mã nguồn cho hộp thoại của chúng tôi.

Jquery.confirm.js

$.confirm = function(params)(

If($("#confirmOverlay").length)(
// Một xác nhận đã được hiển thị trên trang:
trả về sai;
}

Nút VarHTML = "";

// Tạo đánh dấu cho các nút:

Nếu(!obj.action)(
obj.action = function())(;
}
});

Đánh dấu Var = [
"

",params.title,"",
"

",params.message,"

",
"

",
nútHTML,
"

"
].tham gia("");

$(markup).hide().appendTo("body").fadeIn();

Nút Var = $("#confirmBox .button"),
tôi = 0;

$.each(params.buttons,function(name,obj)(
nút.eq(i++).click(function())(

// Gọi thuộc tính hành động khi
// nhấp chuột xảy ra và ẩn xác nhận.

Obj.action();
$.confirm.hide();
trả về sai;
});
});
}

$.confirm.hide = function())(
$("#confirmOverlay").fadeOut(function())(
$(this).remove();
});
}

Plugin của chúng tôi xác định phương thức $.confirm(). Phương pháp này xử lý dữ liệu bạn đã nhập, xây dựng đánh dấu và sau đó thêm tất cả dữ liệu đó vào trang. Vì div #confirmOverlay có một vị trí cố định thông qua khai báo CSS nên chúng tôi sẽ để quá trình căn giữa nó vào trình duyệt rồi di chuyển nó khi người dùng cuộn trang.

Sau khi thêm đánh dấu, tập lệnh sẽ phân phối đòn bẩy sự kiện cho các sự kiện nhấp vào nút, thực hiện hành động tương ứng với nút được nhấn.

Điều này kết thúc hộp thoại của chúng tôi!

Hãy tóm tắt

Bạn có thể chỉnh sửa vẻ bề ngoài hộp thoại thông qua tệp jquery.confirm.css. Vì thuộc tính thông báo trong hộp thoại sử dụng mã HTML nên bạn có thể thêm hình ảnh hoặc biểu tượng vào đó.

Bạn thậm chí có thể sử dụng plugin để triển khai các hộp thông báo lỗi - bạn chỉ cần thêm một nút duy nhất mà không cần đặt thuộc tính hành động.

Chú ý! Bạn không có quyền xem văn bản ẩn.

Trong bài viết này, chúng ta sẽ tìm hiểu ba phương thức thú vị, đó là các phương thức notification(), confirm() và nhắc(). Tất cả đều được thiết kế để tương tác với người dùng.

Cả ba phương thức này đều thuộc về đối tượng cửa sổ (Cửa sổ trình duyệt). Và chúng có thể được gọi như thế này: window.method_name(); Nhưng JavaScript cho phép chúng ta không chỉ định đối tượng cửa sổ này mà chỉ cần viết tên của phương thức.

Chúng ta sẽ bắt đầu với phương thức Alert(). Phương pháp này hiển thị thông báo được chỉ định trong cửa sổ trình duyệt của người dùng. Cửa sổ này sẽ xuất hiện ở đầu toàn bộ trang và cho đến khi người dùng nhấp vào nút OK, nó sẽ không đóng.

Để minh họa, hãy hiển thị một thông báo bằng phương thức Alert().

Var hôm nay_is = "Thứ Hai"; cảnh báo ("Hôm nay " + hôm nay_is);


Bên trong phương thức, chúng ta có thể chỉ định bất kỳ chuỗi nào, nhưng không cần thẻ html ov. Chúng không được xử lý ở đây nhưng được hiển thị nguyên trạng.

Nếu chuỗi chúng ta muốn chỉ định rất dài và chúng ta muốn chuyển đến dòng mới, thì đây là thẻ html
sẽ không hoạt động. Ở đây bạn cần sử dụng ký tự "\n".

Alert("Loooooooooong \nStringgggggg");


Phương pháp này thường được sử dụng để tìm lỗi trong mã.

Quá trình xử lý mã diễn ra từ trên xuống dưới, vì vậy để phát hiện lỗi, chúng ta chỉ cần viết phương thức Alert() vào vùng dự kiến ​​có lỗi. Và nếu cảnh báo() hoạt động thì sẽ không có lỗi nào cho đến dòng được viết.

Tiếp theo, bạn cần di chuyển nó xuống một hoặc nhiều dòng bên dưới. Chúng tôi lưu các thay đổi, làm mới lại trang trong trình duyệt và xem liệu cảnh báo () có hoạt động hay không, sau đó không có lỗi nào ở dòng nơi nó nằm, nếu không, nếu nó không hoạt động, lỗi nằm ở dòng phía trên dòng nơi nó hiện đang nằm. Đây là cách bạn có thể tìm thấy lỗi trong mã.

phương thức xác nhận()

Phương pháp này được sử dụng để xác nhận câu trả lời cho một câu hỏi. Chỉ có hai phương án trả lời là có (OK) hoặc không (Cancel). Nếu người dùng trả lời có thì phương thức trả về true, nếu không thì trả về false.

Ví dụ: chúng tôi sẽ hiển thị một cửa sổ bằng phương thức confirm(), nơi chúng tôi sẽ hỏi người dùng “Bạn có chắc chắn muốn rời khỏi trang không?” Nếu người dùng trả lời có thì thông qua phương thức Alert() chúng ta sẽ hiển thị thông báo sau “Người dùng muốn rời khỏi trang”, nếu không chúng ta sẽ hiển thị một thông báo khác “Người dùng KHÔNG muốn rời khỏi trang”.

Var user_answer = confirm("Bạn có chắc chắn muốn rời khỏi trang không?"); if(user_answer) notification("Người dùng muốn rời khỏi trang"); else notification("Người dùng KHÔNG muốn \nrời khỏi trang");


Đây là cách phương thức confirm() hoạt động. Nó có thể được sử dụng trong trường hợp khác nhau. Ví dụ: trước khi xóa nội dung nào đó khỏi trang web, theo thông lệ, hãy hỏi người dùng xem anh ta có tự tin vào hành động của mình hay không. Hoặc, trước khi gửi biểu mẫu, bạn cũng có thể hỏi người dùng “Bạn đã điền đúng mọi thứ chưa?” Nếu người dùng trả lời có thì biểu mẫu sẽ được gửi, nếu không nó sẽ không được gửi.

phương thức nhắc()

Phương thức cuối cùng chúng ta sẽ học là phương thức nhắc(). Phương pháp này được sử dụng ít thường xuyên hơn hai phương pháp còn lại. Nó cho phép bạn nhận một số thông tin từ người dùng mà anh ta sẽ nhập vào trường văn bản.

Kết quả là, phương thức nhắc() trả về chuỗi đã nhập nếu người dùng nhấp vào nút OK hoặc trả về null nếu người dùng nhấp vào nút hủy.

Là một tham số, nghĩa là bên trong dấu ngoặc phương pháp này chúng ta có thể viết một dòng hướng dẫn hoặc một câu hỏi để cho người dùng biết những thông tin nào cần nhập.

Ví dụ: hãy yêu cầu người dùng trả lời câu hỏi "Tên bạn là gì?" Tên do người dùng nhập sẽ được hiển thị trên màn hình bằng phương thức Alert().

Tên Var = nhắc ("Tên bạn là gì?"); cảnh báo ("Tên của bạn là" + tên);

Lưu và mở trang trong trình duyệt.


Tất nhiên, bạn có thể nhập bất kỳ thông tin nào vào trường văn bản từ phương thức nhắc(). Thông tin này sẽ được trả về dưới dạng chuỗi, kể cả trong trường hợp là số hoặc các ký tự đặc biệt khác.

Ví dụ: hãy yêu cầu người dùng nhập hai số rồi nhân chúng. Sẽ có một số loại máy tính để nhân các số.

Var x = nhắc("Nhập số đầu tiên:"); var y = nhắc("Nhập số thứ hai:"); //Chuyển đổi các số đã nhập từ kiểu chuỗi sang kiểu số x = Number(x); y = Số(y); document.write(x + " * " + y + " = " + (x * y));

Các số được nhập là chuỗi, vì vậy đối với kết quả đúng nhân, bạn cần chuyển những số này thông qua hàm Number(), hàm này sẽ chuyển đổi chúng từ kiểu chuỗi thành số bình thường.

Vâng đó là tất cả. Bây giờ bạn đã biết thêm ba phương thức: cảnh báo(), xác nhận() và nhắc(). Mà bạn có thể sử dụng một cách an toàn trong thực tế.

Tôi đã nói về “mẫu” cửa sổ phương thức. Những thứ kia. những tệp mà các tệp mẫu riêng biệt được tạo. Và sự phức tạp và phức tạp của những cửa sổ này có thể là vô hạn.

Nhưng thông thường, để giao tiếp với người dùng bạn cần rất đơn giản những hộp thoại- chỉ cần hiển thị một số thông báo bằng một nút “Ok” duy nhất mà anh ta không thể không chú ý hoặc yêu cầu anh ta xác nhận một số hành động.

Các trang web thường sử dụng các chức năng của Hệ thống cho những mục đích như vậy.
Có một số nhóm chức năng được gọi là “hệ thống” trong động cơ. Các tệp chứa các chức năng này được tải ngay từ đầu công cụ, ngay cả trước khi các tệp cấu hình được tải và bản thân các chức năng này không bị ràng buộc với bất kỳ mô-đun nào và có thể được sử dụng ở bất kỳ đâu, trong bất kỳ thành phần nào - trong mô-đun, hành động, trình ánh xạ, v.v." class="term">các chức năng hệ thống cảnh báo() , confirm() và nhắc() , đại loại như thế này:
Xóa mọi thứ!
Điều này hoạt động trong bất kỳ trình duyệt nào, nhưng các cửa sổ được hiển thị bởi các chức năng như vậy trông xấu, thô sơ và phá vỡ mọi vẻ đẹp mà chúng tôi tạo ra trên trang web của mình.

Để giải quyết vấn đề này trong động cơ, bây giờ bạn có thể (tôi muốn nói là cần thiết) sử dụng các chất tương tự:

ls.modal.alert(options) - hiển thị cửa sổ thông tin bằng một nút “OK”
ls.modal.confirm(options) - hiển thị một cửa sổ có các nút “Hủy” và “Xác nhận”
ls.modal.prompt(options) - cửa sổ có trường nhập

Trong tất cả các hàm, tham số tùy chọn có thể là một chuỗi hoặc một đối tượng. Ví dụ:
ls.modal.alert('Xin chào thế giới!');
Mã này hiển thị một cửa sổ phương thức có nội dung "Xin chào, thế giới!" và nút “Ok”. Và quan trọng nhất, cửa sổ này sẽ được thiết kế giống hệt như tất cả các cửa sổ phương thức khác trên trang web của bạn.

Chúng ta cũng có thể viết một trình xử lý nhấn nút:
ls.modal.alert((title: "I say", text: "Xin chào thế giới!", onConfirm: function())( // người dùng đã nhấp vào nút Ok))); Tiêu đề cửa sổ “Tôi nói” được thêm vào đây và khi nhấn nút, hàm được truyền trong tham số onConfirm sẽ được thực thi.

Nhưng đó không phải là tất cả! Chúng tôi có thể hiển thị bất kỳ mã HTML nào trong phần nội dung của cửa sổ:
var htmlCode = " Đây là hình đại diện mới của bạn"; ls.modal.alert((title: "Avatar", html: htmlCode)); Và chúng tôi nhận được một cái gì đó như thế này:

Lưu ý rằng tham số html được sử dụng để hiển thị mã HTML chứ không phải tham số văn bản (nếu bạn truyền cả hai tham số, văn bản sẽ được sử dụng và html sẽ bị bỏ qua).

Các hàm ls.modal.confirm() và ls.modal.Prompt() được sử dụng tương tự. Nhưng trong những chức năng này có thể Tùy chọn bổ sung. Ví dụ: trong các tham số của hàm ls.modal.confirm(), chúng ta có thể truyền không phải một mà là hai trình xử lý - một trình xử lý cho mỗi nút:
ls.modal.confirm((title: "Delete", text: "Delete Everything?", onConfirm: function())( // người dùng đã nhấp vào nút "Xác nhận"), onCancel: function())( // the người dùng đã nhấp vào nút "Hủy" ) )); Hàm ls.modal.prompt() được sử dụng để nhắc người dùng về một số giá trị. Và chúng ta có thể đặt cái này làm mặc định:
ls.modal. nhắc ((tiêu đề: "Nhập số", text: "Nhập số vào đây", giá trị: 123 onConfirm: function(value)( // Giá trị đã nhập vào biến
Sơ đồ tên biến chung như sau: Tiền tố+Tiền tố bổ sung+Tên biến+Hậu tố. Tên biến chứa bức thư chữ hoa và chữ thường và bắt đầu bằng tiền tố chữ thường cho biết kiểu dữ liệu của giá trị biến. Danh sách các tiền tố được khuyến nghị sử dụng được đưa ra dưới đây. Tiền tố bổ sung chỉ định giá trị của biến và được chọn từ danh sách tiền tố bổ sung được đề xuất liệt kê bên dưới. Tên biến bao gồm một hoặc nhiều từ mô tả ý nghĩa ngữ nghĩa của biến này và được viết bằng chữ thường. Vì tiền tố mô tả loại giá trị của một biến nên tên của nó mô tả thể hiện thuộc loại nàyở số ít. Hậu tố bổ sung cho tên biến và xác định ý nghĩa ngữ nghĩa của nó. Danh sách các hậu tố được khuyến nghị sử dụng được đưa ra dưới đây. Cho phép sử dụng số trong tên nhưng không nên sử dụng. Dấu gạch dưới không được sử dụng trong tên.

Tiền tố
Danh sách tiền tố sau đây được khuyến nghị sử dụng:
- a (mảng) - giá trị mảng;
- b(bool) - giá trị logic;
- e (thực thể) - một đối tượng thuộc loại Thực thể và được kế thừa từ nó;
- i (số nguyên) - giá trị số nguyên;
- f (float) - giá trị loại thực;
- m (mapper) - một đối tượng thuộc loại Mapper và được kế thừa từ nó;
- n (số) - giá trị không xác định loại kỹ thuật số, có thể lấy cả số nguyên và
giá trị thực. Yêu cầu kiểm tra giá trị loại khi sử dụng.

- o (đối tượng) - một đối tượng thuộc loại khác với Mapper và Entity;
-s (chuỗi) - Chuỗi giá trị;
- x (miXed) - đối tượng thuộc loại hỗn hợp. Yêu cầu kiểm tra giá trị loại khi sử dụng.

Danh sách tiền tố bổ sung sau đây được khuyến nghị sử dụng:
- Tối thiểu (tối thiểu) - giá trị tối thiểu;
- Max (tối đa) - giá trị tối đa;
- Hiện tại - giá trị hiện tại.

Hậu tố
Không giống như Tiền tố bổ sung, hậu tố xác định ý nghĩa ngữ nghĩa của tên biến chứ không phải tên biến.
nghĩa. Danh sách các hậu tố sau đây được khuyến nghị sử dụng:
- Đầu tiên - giá trị đầu tiên từ Danh sách có sẵn;
- Cuối cùng - giá trị cuối cùng từ danh sách có sẵn;
- Limit - giá trị giới hạn từ danh sách có sẵn;
- Tmp - giá trị tạm thời;
- New - giá trị (đặt) mới;
- Old - giá trị cũ (ghi đè);

Ngoại lệ
Có những tên biến dành cho ứng dụng đặc biệt- ngoại lệ ở trên
khuyến nghị:
- i, j - các vòng lặp cho các vòng lặp nhỏ (một vòng lặp được coi là nhỏ nếu nó vừa khít hoàn toàn với
một màn hình và cho phép bạn xem tất cả các lần xuất hiện của các vòng lặp);
- k, v - các biến vòng lặp foreach ($aData as $k => $v);
- khóa, giá trị - các biến vòng lặp foreach ($aData as $key => $value);
- s - biểu diễn dữ liệu tuần tự;
- dữ liệu - một biến có dữ liệu trong bộ thiết lập thực thể, cũng như dữ liệu được trả về từ các phương thức của trình ánh xạ;
- sql - trong trình ánh xạ, một biến chứa văn bản truy vấn - tiền tố “s” không được sử dụng." class="term">biến "value") )); Ở đây, giá trị do người dùng nhập được chuyển đến trình xử lý và chúng ta có thể sử dụng nó để xác định xem phải làm gì với nó tiếp theo.

Để kết thúc phần này, tôi muốn lưu ý đến một đặc điểm không thể quên: đó là sự khác biệt quan trọng trong hành vi chức năng hệ thống cảnh báo() , confirm() và nhắc() và các chất tương tự của chúng, về cái nào Chúng ta đang nói về- ls.modal.alert(options) , ls.modal.confirm(options) và ls.modal.prompt(options) . Cụ thể - Chức năng hệ thống
Có một số nhóm chức năng được gọi là “hệ thống” trong động cơ. Các tệp chứa các chức năng này được tải ngay từ đầu công cụ, ngay cả trước khi các tệp cấu hình được tải và bản thân các chức năng này không bị ràng buộc với bất kỳ mô-đun nào và có thể được sử dụng ở bất kỳ đâu, trong bất kỳ thành phần nào - trong mô-đun, hành động, trình ánh xạ, v.v." class="term">các chức năng hệ thống dừng thực thi mã javascript và chờ phản ứng của người dùng. Và chỉ sau khi người dùng đã phản ứng thì việc thực thi mã mới tiếp tục. Khi bạn sử dụng các chức năng được mô tả ở đây, toàn bộ mã, bao gồm cả lệnh gọi, sẽ được thực thi trước tiên và chỉ sau đó hộp thoại mới được hiển thị.

Do đó, nếu bạn lấy mã được đưa ra ở đầu bài viết và chỉ cần thay thế lệnh gọi confirm() bằng ls.modal.confirm() và mã sẽ phải được viết lại giống như thế này:
Xóa mọi thứ! $(function())( $("js-delete-all").click(ls.modal.confirm("Bạn có chắc không?", function()( location.href="site.com/delete/all/ "; ));); )); Xin lưu ý rằng hàm xử lý được truyền không phải trong tham số onConfirm mà ở dạng đối số thứ hai của hàm; điều này cũng có thể chấp nhận được.

Vâng, có thêm một chút mã. Nhưng nó thật đẹp! Và vẻ đẹp, như bạn biết, đòi hỏi sự hy sinh.