8
Giả sử tôi có mã như sau:Làm cách nào để sử dụng lại mã html trong mọi trang html?
<!DOCTYPE HTML>
<html>
<head>
<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width())/2,
top: ($(window).width() - $('#overlay_form').width())/7,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
</head>
<body>
<a href="#" id="pop" >PopUp</a>
<br />
<form id="overlay_form" style="display:none">
<h2> Put your contents here..</h2>
<label>Username: </label><input type="text" name="username" /><br /><br />
<label>Password: </label><input type="text" name="password" /><br /><br />
<input type="button" value="Login" />
<a href="#" id="close" >Close</a>
</form>
</body>
</html>
Đây là ví dụ về hộp thoại bật lên. Giả sử tôi muốn sử dụng hộp thoại này trong tất cả các trang web của tôi (a.html, b.html, c.html và v.v.), cách tốt nhất và dễ nhất để làm cho mã ở trên có thể sử dụng lại được là gì? Bởi vì tôi nghĩ rằng để sao chép dán 'overlay_form' vào mỗi trang html là không hợp lý.
Tôi vẫn ở cấp độ bắt đầu bằng Javascript, do đó, để tạo plugin jQuery cho điều này là quá khó đối với tôi. Đó là lý do tại sao tôi muốn tìm cách khác để làm điều đó. Cảm ơn.
Tôi đã nhìn vào tái sử dụng mã và như jQuery tiếp cận tốt nhất, NHƯNG, tôi gặp sự cố khi áp dụng css của tôi cho nội dung đã tải. Cách thích hợp để làm điều này là gì? –
a.html này sẽ được GoogleBot lập chỉ mục như thế nào? – walv