You had to create pseudo-before frame (frame-like pages, Cssframe), and without a frame style sheets (CSS) and JavaScript library jQuery Here is how to achieve using.
This is a version of its additional functions.
The basic frame using pseudo jQuery is a basic description. Please see from there first.
This official added features are as follows.
- The size of the menu on the left side (width) Added ability to change (resize the menu.)
" jQuery UI resizable "is used. - Disable pseudo-frame, added a feature to activate.
- Pseudo-time frame would be a valid view when printed incorrectly added the ability to output a link to a print-only screen.
The following files and accompanies a brief tutorial.
For more information, please see the comments in the script file.
Download
On the menu resize
Mouse over the right part of menu (when the vertical scroll bar, the left side) is added to the area where you can drag.
$(CSF.resizerId).resizable({
handles: "e",
autoHide: true,
alsoResize : CSF.menuId,
resize: function(){//Content in the resize operation
//get the inside dimension of the browser
CSF.browserWidth = $('body').outerWidth(true);
CSF.browserHeight = $('body').outerHeight(true);
//get the "menu" width when this function is called because it can be resized.
CSF.menuWidth = $(CSF.menuId).outerWidth(true);
//change the width of "main" element, and its left position.
$(CSF.mainId).width(CSF.browserWidth-CSF.menuWidth).css("left",CSF.menuWidth);
}
});
Pseudo-frame for switching
Added ability to switch between the validity of the pseudo-frame.
Adds the given ID to enable or disable the click event.
However, Internet Explorer (IE) is to become an illegal move, rather than switching, dynamic ways to adopt a combination of cookies and re-read screen.
For more information, please see the comments written there with a script file.
"CSF.csfRemoverId" disabled event set in the element with an ID, "CSF.csfStarterId" set in the event ID is set with the elements activated.
$(CSF.csfRemoverId).click(function(){
if($(CSF.targetRisizeBar).size() > 0){
//IE6-8 behaves improperly so in IE this function sets required values to the cookie and figures a screen again.
var exp = new Date();
exp.setMonth(exp.getMonth() + 2);
CSF.setCookie('csf', '0', exp, undefined, undefined);
if(jQuery.support.opacity){
$(CSF.resizerId).resizable('destroy').removeAttr('style');
$(CSF.headerId).removeAttr('style');
$(CSF.mainId).removeAttr('style');
$(CSF.footerId).removeAttr('style');
$(CSF.menuId).removeAttr('style');
$(CSF.targetRisizeBar).remove();
$('body').removeAttr('style');
$('html').removeAttr('style');
if (typeof removeFunc == 'function'){
removeFunc();
}
$(this).unbind();
} else {
location.reload();
}
}
});
$(CSF.csfStarterId).click(function(){
if($(CSF.targetRisizeBar).size() < 1){
var exp = new Date();
exp.setMonth(exp.getMonth() + 2);
CSF.setCookie('csf', '1', exp, undefined, undefined);
CSF.main(restartFunc,removeFunc);
if (typeof restartFunc == 'function'){
restartFunc();
}
}
});
For print-only screen
If you try to print without a frame pseudo-screen collapses.
Printable outputs (rather than outputs a pseudo-frame screen temporarily disabled, but ...) automatically generates links.
"CSF.csfPrintCls" output is set by the element with the class.
For example, "<span class="cframe-print"> Print Page </span>" and so on.
if ($(CSF.csfPrintCls).size() > 0){
var printString = $(CSF.csfPrintCls).html();
if(!(printString)){
printString = 'Print Page';
}
if (location.search){
$(CSF.csfPrintCls).html( '<a href="' + location.pathname + location.search + '&cflame=print" target="_blank">' + printString + '</a>' );
}else{
$(CSF.csfPrintCls).html( '<a href="' + location.pathname + '?cflame=print" target="_blank">' + printString + '</a>' );
}
}
As an example that actually works, the pseudo-sample frame (http://labo.ek-pro.com/exp/2011-05-01/csf-rich/) Please refer to.
Tags: JavaScript
HOME
Category
History