Sourceସତର୍କତା
ହାତଗଣତି ଉପଲବ୍ଧ ଏବଂ ନମନୀୟ ଆଲର୍ଟ ବାର୍ତ୍ତା ସହିତ ସାଧାରଣ ଉପଭୋକ୍ତା କାର୍ଯ୍ୟ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ମତାମତ ବାର୍ତ୍ତା ପ୍ରଦାନ କରନ୍ତୁ |
ଉଦାହରଣଗୁଡିକ
ଯେକ any ଣସି ଲମ୍ବା ପାଠ୍ୟ ପାଇଁ ଆଲର୍ଟ ଉପଲବ୍ଧ, ଏବଂ ଏକ ଇଚ୍ଛାଧୀନ ବହିଷ୍କାର ବଟନ୍ | ସଠିକ୍ ଶ yl ଳୀ ପାଇଁ, ଆଠଟି ଆବଶ୍ୟକୀୟ ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ମଧ୍ୟରୁ ଗୋଟିଏ ବ୍ୟବହାର କରନ୍ତୁ (ଯଥା, .alert-success
) | ଇନଲାଇନ୍ ବହିଷ୍କାର ପାଇଁ, ଆଲର୍ଟ jQuery ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରନ୍ତୁ |
ଏକ ସରଳ ପ୍ରାଥମିକ ସତର୍କତା - ଏହାକୁ ଯା check ୍ଚ କର!
ଏକ ସରଳ ସେକେଣ୍ଡାରୀ ଆଲର୍ଟ - ଏହାକୁ ଯାଞ୍ଚ କରନ୍ତୁ!
ଏକ ସରଳ ସଫଳତା ଆଲର୍ଟ - ଏହାକୁ ଯାଞ୍ଚ କରନ୍ତୁ!
ଏକ ସରଳ ବିପଦ ଆଲର୍ଟ - ଏହାକୁ ଯାଞ୍ଚ କରନ୍ତୁ!
ଏକ ସରଳ ଚେତାବନୀ ଆଲର୍ଟ - ଏହାକୁ ଯାଞ୍ଚ କରନ୍ତୁ!
ଏକ ସରଳ ସୂଚନା ଆଲର୍ଟ - ଏହାକୁ ଯାଞ୍ଚ କରନ୍ତୁ!
ଏକ ସରଳ ଆଲୋକ ଆଲର୍ଟ - ଏହାକୁ ଯାଞ୍ଚ କରନ୍ତୁ!
ଏକ ସରଳ ଅନ୍ଧାର ଆଲର୍ଟ - ଏହାକୁ ଯାଞ୍ଚ କରନ୍ତୁ!
ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ ଅର୍ଥ ପହଞ୍ଚାଇବା |
ଅର୍ଥ ଯୋଡିବା ପାଇଁ ରଙ୍ଗ ବ୍ୟବହାର କରିବା କେବଳ ଏକ ଭିଜୁଆଲ୍ ସୂଚକ ପ୍ରଦାନ କରିଥାଏ, ଯାହା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କୁ ପ୍ରଦାନ କରାଯିବ ନାହିଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ | ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ରଙ୍ଗ ଦ୍ୱାରା ସୂଚିତ ସୂଚନା ବିଷୟବସ୍ତୁରୁ ନିଜେ ସ୍ପଷ୍ଟ ହୋଇଛି (ଉଦାହରଣ ସ୍ୱରୂପ ଦୃଶ୍ୟମାନ ପାଠ୍ୟ), କିମ୍ବା ବିକଳ୍ପ ମାଧ୍ୟମ ମାଧ୍ୟମରେ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି, ଯେପରିକି .sr-only
ଶ୍ରେଣୀ ସହିତ ଲୁକ୍କାୟିତ ଅତିରିକ୍ତ ପାଠ୍ୟ |
ଲିଙ୍କ୍ ରଙ୍ଗ |
.alert-link
ଯେକ any ଣସି ଆଲର୍ଟ ମଧ୍ୟରେ ଶୀଘ୍ର ମେଳୁଥିବା ରଙ୍ଗୀନ ଲିଙ୍କ୍ ପ୍ରଦାନ କରିବାକୁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |
ଏକ ଉଦାହରଣ ଲିଙ୍କ୍
ସହିତ ଏକ ସରଳ ଗା dark ଼ ଆଲର୍ଟ
| ଆପଣ ଚାହିଁଲେ ଏହାକୁ କ୍ଲିକ୍ କରନ୍ତୁ |
ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁ |
ଆଲର୍ଟଗୁଡିକ ହେଡିଙ୍ଗ୍, ପାରାଗ୍ରାଫ୍ ଏବଂ ଡିଭାଇଡର୍ ପରି ଅତିରିକ୍ତ HTML ଉପାଦାନ ଧାରଣ କରିପାରେ |
ବହୁତ ବଢିଆ!
ହଁ, ଆପଣ ସଫଳତାର ସହିତ ଏହି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ସତର୍କ ବାର୍ତ୍ତା ପ read ନ୍ତି | ଏହି ଉଦାହରଣ ପାଠ୍ୟ ଟିକିଏ ଅଧିକ ସମୟ ଚାଲିବାକୁ ଯାଉଛି ଯାହା ଦ୍ you ାରା ଆପଣ ଦେଖିପାରିବେ ଯେ ଏହି ପ୍ରକାରର ବିଷୟବସ୍ତୁ ସହିତ ଏକ ଆଲର୍ଟ ମଧ୍ୟରେ ବ୍ୟବଧାନ କିପରି କାର୍ଯ୍ୟ କରେ |
ଯେତେବେଳେ ଆପଣ ଆବଶ୍ୟକ କରନ୍ତି, ଜିନିଷଗୁଡିକ ସୁନ୍ଦର ଏବଂ ପରିଷ୍କାର ରଖିବା ପାଇଁ ମାର୍ଜିନ୍ ୟୁଟିଲିଟି ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
ବରଖାସ୍ତ
ଆଲର୍ଟ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରି ଯେକ any ଣସି ଆଲର୍ଟ ଇନଲାଇନକୁ ବରଖାସ୍ତ କରିବା ସମ୍ଭବ ଅଟେ | ଏଠାରେ କିପରି ଅଛି:
- ନିଶ୍ଚିତ ହୁଅନ୍ତୁ ଯେ ଆପଣ ଆଲର୍ଟ ପ୍ଲଗଇନ୍, କିମ୍ବା ସଙ୍କଳିତ ବୁଟଷ୍ଟ୍ରାପ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ଲୋଡ୍ କରିଛନ୍ତି |
- ଯଦି ଆପଣ ଉତ୍ସରୁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ନିର୍ମାଣ କରୁଛନ୍ତି, ଏହା ଆବଶ୍ୟକ କରେ
util.js
| ସଂକଳିତ ସଂସ୍କରଣ ଏଥିରେ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |
- ଏକ ବର୍ଜନ ବଟନ୍ ଏବଂ
.alert-dismissible
ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ, ଯାହା ଆଲର୍ଟର ଡାହାଣକୁ ଅତିରିକ୍ତ ପ୍ୟାଡିଂ ଯୋଗ କରିଥାଏ ଏବଂ .close
ବଟନ୍ କୁ ସ୍ଥାନିତ କରେ |
- ଖାରଜ ବଟନ୍ ଉପରେ,
data-dismiss="alert"
ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ, ଯାହା ଜାଭାସ୍କ୍ରିପ୍ଟ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର କରିଥାଏ | <button>
ସମସ୍ତ ଡିଭାଇସରେ ସଠିକ୍ ଆଚରଣ ପାଇଁ ଏହା ସହିତ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
.fade
ସେମାନଙ୍କୁ ବରଖାସ୍ତ କରିବା ସମୟରେ ଆଲର୍ଟ ଆନିମେସନ୍ କରିବାକୁ, ଏବଂ .show
କ୍ଲାସ୍ ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
ଆପଣ ଏହାକୁ ଏକ ଲାଇଭ୍ ଡେମୋ ସହିତ କାର୍ଯ୍ୟରେ ଦେଖିପାରିବେ:
ପବିତ୍ର ଗୁଆକାମୋଲ୍! ଆପଣ ନିମ୍ନରେ ସେହି କ୍ଷେତ୍ରଗୁଡିକ ମଧ୍ୟରୁ କିଛି ଯାଞ୍ଚ କରିବା ଉଚିତ୍ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ଆଚରଣ |
ଟ୍ରିଗର୍ସ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଏକ ଆଲର୍ଟ ରଦ୍ଦ କରିବାକୁ ସକ୍ଷମ କରନ୍ତୁ:
କିମ୍ବା ଉପରୋକ୍ତ ପରି ଆଲର୍ଟ ମଧ୍ୟରେ ଥିବାdata
ଏକ ବଟନ୍ ଉପରେ ଗୁଣ ସହିତ :
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରିବା ଏହାକୁ DOM ରୁ ଅପସାରଣ କରିବ |
ପ୍ରଣାଳୀ
ପଦ୍ଧତି |
ବର୍ଣ୍ଣନା |
$().alert() |
ବଂଶଧର ଉପାଦାନଗୁଡ଼ିକ ଉପରେ କ୍ଲିକ୍ ଇଭେଣ୍ଟଗୁଡିକ ପାଇଁ ଏକ ଆଲର୍ଟ ଶୁଣେ ଯାହାର data-dismiss="alert" ଗୁଣ ଅଛି | (ଡାଟା-ଆପିର ଅଟୋ-ପ୍ରାରମ୍ଭିକରଣ ବ୍ୟବହାର କରିବା ସମୟରେ ଆବଶ୍ୟକ ନୁହେଁ |) |
$().alert('close') |
ଏହାକୁ DOM ରୁ ହଟାଇ ଏକ ଆଲର୍ଟ ବନ୍ଦ କରେ | ଯଦି ଉପାଦାନରେ .fade ଏବଂ .show ଶ୍ରେଣୀଗୁଡିକ ଉପସ୍ଥିତ ଥାଏ, ତେବେ ଏହାକୁ ହଟାଇବା ପୂର୍ବରୁ ସତର୍କତା ଦୂର ହୋଇଯିବ | |
$().alert('dispose') |
ଏକ ଉପାଦାନର ସତର୍କତା ନଷ୍ଟ କରେ | |
ଘଟଣା
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଆଲର୍ଟ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣାକୁ ପ୍ରକାଶ କରିଥାଏ |
ଘଟଣା |
ବର୍ଣ୍ଣନା |
close.bs.alert |
close ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | |
closed.bs.alert |
ଆଲର୍ଟ ବନ୍ଦ ହୋଇଗଲେ ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) | |