Это пример использования функции jQuery.clone (), о которой некоторые из вас, возможно, не слышали. Он довольно прост в использовании и в основном просто копирует указанный вами элемент. В этом примере он создает 2 одинаковые боковые панели, одну слева и одну справа, на которой написано «ПРЕДВАРИТЕЛЬНАЯ ИНФОРМАЦИЯ О WEBPAGE». Что может быть удобно для показа клиентам, что веб-страница является только предварительным просмотром. Изменить CSS с помощью jQuery довольно легко! 🙂
Пример предварительного просмотра веб-страницы
Код
Просто запустите код в Firebug на домашней странице jQuery4u, чтобы увидеть его в действии.
(function ($) { var containerHTML = ' WEBPAGE - PREVIEW '; $('body').prepend(containerHTML); $('.preview').css( { 'background-color': '#DDDDDD','position': 'fixed','font-family': 'times new roman','text-wrap': 'suppress','padding': '10px','font-size': '20px','width': '20px','height': '100%','z-index': '1000','font-weight': 'bold','opacity': '0.7','vertical-align': 'middle','border': '5px solid red' }); /* clone to right */ $('.preview').clone().css({'position': 'fixed', 'right': '0'}).prependTo('body'); })(jQuery);(function ($) { var containerHTML = ' WEBPAGE - PREVIEW '; $('body').prepend(containerHTML); $('.preview').css( { 'background-color': '#DDDDDD','position': 'fixed','font-family': 'times new roman','text-wrap': 'suppress','padding': '10px','font-size': '20px','width': '20px','height': '100%','z-index': '1000','font-weight': 'bold','opacity': '0.7','vertical-align': 'middle','border': '5px solid red' }); /* clone to right */ $('.preview').clone().css({'position': 'fixed', 'right': '0'}).prependTo('body'); })(jQuery);(function ($) { var containerHTML = ' WEBPAGE - PREVIEW '; $('body').prepend(containerHTML); $('.preview').css( { 'background-color': '#DDDDDD','position': 'fixed','font-family': 'times new roman','text-wrap': 'suppress','padding': '10px','font-size': '20px','width': '20px','height': '100%','z-index': '1000','font-weight': 'bold','opacity': '0.7','vertical-align': 'middle','border': '5px solid red' }); /* clone to right */ $('.preview').clone().css({'position': 'fixed', 'right': '0'}).prependTo('body'); })(jQuery);