Các vấn đề liên quan tới boostrap 4
Mở bài này ra để lưu trữ những vấn đề liên quan trong boostrap 4:
1. Việt hóa thông báo requied
|
1 2 |
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Họ và tên" required oninvalid="this.setCustomValidity('Vui lòng nhập họ và tên')" oninput="setCustomValidity('')" autocomplete="off" > |
2. Form đơn giản boostrap
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<form class="form-create-site" name="form-create-site" action="" enctype="multipart/form-data" method="post"> <div class="form-group"> <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Họ và tên" required oninvalid="this.setCustomValidity('Vui lòng nhập họ và tên')" oninput="setCustomValidity('')" autocomplete="off" > </div> <div class="form-group"> <input type="text" class="form-control" id="phone" name="phone" placeholder="Điện thoại" oninvalid="this.setCustomValidity('Vui lòng nhập Điện thoại')" oninput="setCustomValidity('')" required autocomplete="off" > </div> <div class="form-group"> <input type="email" class="form-control" id="email" name="email" placeholder="Email" required oninvalid="this.setCustomValidity('Vui lòng nhập email')" oninput="setCustomValidity('')" autocomplete="off" > </div> <div class="form-group"> <input type="text" class="form-control" id="userName" name="userName" placeholder="Tên đăng nhập" required oninvalid="this.setCustomValidity('Vui lòng nhập tên đăng nhập')" oninput="setCustomValidity('')" autocomplete="off" > </div> <div class="form-group"> <input type="password" class="form-control" id="password" name="password" placeholder="Mật khẩu" required oninvalid="this.setCustomValidity('Vui lòng nhập mật khẩu')" oninput="setCustomValidity('')" autocomplete="off" > </div> <div class="form-group"> <input type="password" class="form-control" id="rePassword" name="rePassword" placeholder="Nhập lại mật khẩu" required oninvalid="this.setCustomValidity('Vui lòng nhập lại mật khẩu')" oninput="setCustomValidity('')" autocomplete="off" > </div> <div class="form-group"> <input type="text" class="form-control" id="siteName" name="siteName" placeholder="Tên website" required oninvalid="this.setCustomValidity('Vui lòng nhập tên website')" oninput="setCustomValidity('')" autocomplete="off" > </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="agreeTerms" name="agreeTerms" required oninvalid="this.setCustomValidity('Bạn chưa đồng ý với quy định sử dụng và chính sách bảo mật của chúng tôi')" oninput="setCustomValidity('')" style="margin-top: 8px;" > <label class="form-check-label" for="agreeTerms">Tôi đồng ý với <a class="primary-color" target="_blank" href="#">Quy định sử dụng</a> và <a class="primary-color" target="_blank" href="#">Chính sách bảo mật</a></label> </div> <button type="submit" class="btn btn-primary" id="register-try-usage">Đăng ký</button> </form> |
3. Mở một modal
3.1 Code html modal
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="modal fade mypro-modal mt-5" id="mypro-modal-delete-landingpage" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body m-3"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h3 class="text-danger mb-4">Bạn có chắc xóa không?</h3> <div class="clearfix mb-4"></div> <button class="btn btn-success mr-2 btn-delete-landing-page">Vâng, tôi muốn xóa</button> <button class="btn btn-secondary" data-dismiss="modal">Bỏ qua</button> </div> </div> </div> </div> |
3.2 Để mở một modal
Chúng ta có thể mở bằng cách thêm thuộc tính data-toggle và data-target vào tag a, button
|
1 |
data-toggle="modal" data-target="#mypro-modal-delete-landingpage" |
3.3 Mở modal bằng js
|
1 2 3 |
$(document).on('click','button#mypro-delete-landing-pages',function(e){ $('#mypro-modal-delete-landingpage').modal('show'); }); |
4. Include một modal vào một admin page wordpress
Để include vào chúng ta sử dụng hook action ‘admin_footer’. Sau đây là code ví dụ:
|
1 2 3 4 5 6 7 8 |
function modals(){ //Trước khi include chúng ta cần check để modal include vào đúng page không là nó include tất cả page $page = isset($_GET['page']) ? $_GET['page'] : ''; if("manage-license-with-woocommerce.php" == $page){ include MYPROCORE_MODALS_DIR.'delete-a-license-item.php'; } } add_action('admin_footer', array($this,'modals') ); |
5. Truyền dữ liệu đến modal
Ví dụ một modal để xác nhận việc xóa dữ liệu thì chúng ta cần truyền đi id của record để xóa đúng không nào, sau đây là code
|
1 2 3 4 5 6 |
$(document).on('show.bs.modal','#delete-a-license-item', function (e) { var button = $(e.relatedTarget), id = button.data('id'); modal = $(this); modal.find('.btn-delete-a-license-item').data('id',id); }); |
6. Ẩn modal bằng js
|
1 |
$('#myModal').modal('hide') |
(3 Đánh giá)
Gửi Phản Hồi
0 Bình Luận
có thể bạn cần xem:
- Disable animation trong revolution slider [ 20/09/2022 08:07 ]
- Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
- Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
- Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
- Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
- Fix acf not save iframe [ 23/04/2022 07:44 ]
- Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
- Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
- Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
- Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]
-
Thiết kế theme wordpress phần 8
Nếu bạn chưa xem phần 7 thì xem theo link dưới
-
Thiết kế theme wordpress phần 7
Thiết kế theme wordpress phần 6 Chúng ta tiếp
-
Thiết kế theme wordpress phần 6
Nếu chưa xem phần 5 thì xem theo link dưới nhé
-
Thiết kế theme wordpress phần 5
Nếu bạn chưa xem phần 4 thì xem theo link dưới
-
Thiết kế theme wordpress-phần 4
Đã khá lâu rồi tôi mới viết bài, vì là quá
-
Function xử lý upload to media wordpress
Function xử lý upload to media wordpress: function sau đây mình
-
Function get ip address
Dưới đây là function lấy địa chỉ ip, Để đây anh
-
Thay thế file_get_contents
Thay thế file_get_contents: đôi lúc gặp những hosting function file_get_contents không
-
Code tích hợp acf vào theme và plugin
Xin lưu ý tài liệu này chỉ dành cho anh em
-
Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)
Một số function thường dùng khi làm theme wordpress (some functions
Hotline: 0912 889 416
-
Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net
Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress
