神马文学网jQuery Page Peel Plugin
来源：百度文库 编辑：神马文学网 时间：2024/04/26 09:22:38
jQuery Page Peel 1.2.1 - One step further
Demos
If you haven't seen it by now, check out the upper right corner of this page, or check out the new page peel in the bottom left of this box!
Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one's set up as 500x500). Also, I've set the bottom padding of this box to 105px so I don't cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat.
I guess I should show you a bit of code on how to accomplish this... here it goes.
Adding to Your Website
To add this you'll needjQuery andjQuery.pagePeel.js, then add the following to the head of your document:
The area in bold is the DOM element you want place the page peel inside of. If you want to add it to the body, place it right under the opening '' tag. If you want it added inside a div, place it right after the opening '
Demos
If you haven't seen it by now, check out the upper right corner of this page, or check out the new page peel in the bottom left of this box!
Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one's set up as 500x500). Also, I've set the bottom padding of this box to 105px so I don't cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat.
I guess I should show you a bit of code on how to accomplish this... here it goes.
Adding to Your Website
To add this you'll needjQuery andjQuery.pagePeel.js, then add the following to the head of your document:
The area in bold is the DOM element you want place the page peel inside of. If you want to add it to the body, place it right under the opening '' tag. If you want it added inside a div, place it right after the opening '
' tag. Be sure that div's position is set to relative in you CSS.
Options
options, options, options... That's the main thing I think about when building plugins, and this one is filled with them. They go inside the open/close brackets The ones displayed are the default options.
SET WIDTH / HEIGHT OF SMALL AD
smallWidth: 120
smallHeight: 120
smallBG: 'pp-src/smallBG.png' // if you are not using flash, this is where your small ad image is located
SET WIDTH / HEIGHT OF INTRO
introWidth: 300
introHeight:300
SET WIDTH / HEIGHT OF BIG AD (SAME AS .SWF)
bigWidth: 500
bigHeight: 500
bigBG: 'pp-src/bigBG.png' // if you are not using flash, this is where your large ad image is located
bigAd: 'pp-src/bigAd.jpg' // if you are using flash, this is where your ad image is located
bigSWF: 'pp-src/page-peel-big.swf' // if your flash file is in a different directory
ADD LINK AND TARGET OPTIONS
adLink: 'blank' // this is where you insert a URL (i.e. http://www.smple.com) || if left 'blank' no link will be applied
adLinkTarget: '_blank' // this is where you specify your target (i.e. '_parent' or '_blank')
SET POSITION OF YOUR AD
hPosition: 'right' // can use 'left' or 'right'
vPosition: 'top' // can use 'top' or 'bottom'
CHOOSE WHETHER TO USE FLASH OR NOT
flash: true
note: Only upper-right source .fla's are included for both with or without an intro. There is also a lower-left for demonstration purposes. Feel free to edit the files to suite your needs, but remember to change the file path if you change the file name.
WHETHER TO USE INTRO ANIMATION OR NOT AND WHAT FILE TO USE
introAnim: false
bigSWFIntro: 'pp-src/page-peel-big-intro.swf' // this is the default file location for the intro animation file
note: The intro option is currently set up to only work in the upper-right hand corner, however can be changed if you edit the source .fla.
Other Plugins
Right now I've only got 1 other one, but be assured, the list will grow.
jQuery Link Control: A jQuery plugin designed to give the end user control over whether they want to open a link in a new window or not without having to right click and such.
Fixes
jQuery.pagePeel.1.2.1 - Quick fix, when using an intro animation the holder was set to 300x300 and when moused over, the user couldn't access content behind it. Now when the user mouses over the div magically pops back to the default small size until moused over.
In a nutshell, I'm allowing content behind the intro animation to be clicked.
Options
options, options, options... That's the main thing I think about when building plugins, and this one is filled with them. They go inside the open/close brackets The ones displayed are the default options.
SET WIDTH / HEIGHT OF SMALL AD
smallWidth: 120
smallHeight: 120
smallBG: 'pp-src/smallBG.png' // if you are not using flash, this is where your small ad image is located
SET WIDTH / HEIGHT OF INTRO
introWidth: 300
introHeight:300
SET WIDTH / HEIGHT OF BIG AD (SAME AS .SWF)
bigWidth: 500
bigHeight: 500
bigBG: 'pp-src/bigBG.png' // if you are not using flash, this is where your large ad image is located
bigAd: 'pp-src/bigAd.jpg' // if you are using flash, this is where your ad image is located
bigSWF: 'pp-src/page-peel-big.swf' // if your flash file is in a different directory
ADD LINK AND TARGET OPTIONS
adLink: 'blank' // this is where you insert a URL (i.e. http://www.smple.com) || if left 'blank' no link will be applied
adLinkTarget: '_blank' // this is where you specify your target (i.e. '_parent' or '_blank')
SET POSITION OF YOUR AD
hPosition: 'right' // can use 'left' or 'right'
vPosition: 'top' // can use 'top' or 'bottom'
CHOOSE WHETHER TO USE FLASH OR NOT
flash: true
note: Only upper-right source .fla's are included for both with or without an intro. There is also a lower-left for demonstration purposes. Feel free to edit the files to suite your needs, but remember to change the file path if you change the file name.
WHETHER TO USE INTRO ANIMATION OR NOT AND WHAT FILE TO USE
introAnim: false
bigSWFIntro: 'pp-src/page-peel-big-intro.swf' // this is the default file location for the intro animation file
note: The intro option is currently set up to only work in the upper-right hand corner, however can be changed if you edit the source .fla.
Other Plugins
Right now I've only got 1 other one, but be assured, the list will grow.
jQuery Link Control: A jQuery plugin designed to give the end user control over whether they want to open a link in a new window or not without having to right click and such.
Fixes
jQuery.pagePeel.1.2.1 - Quick fix, when using an intro animation the holder was set to 300x300 and when moused over, the user couldn't access content behind it. Now when the user mouses over the div magically pops back to the default small size until moused over.
In a nutshell, I'm allowing content behind the intro animation to be clicked.
jQuery Page Peel Plugin
Lazy Load Plugin for jQuery
jquery
jQuery选择器
Jquery实例
Jquery基础
Eclipse Plugin Development
XFire - Eclipse Plugin
SVN Eclipse plugin error
Installing the GreenHopper Plugin
vim lookupfile plugin
Main Page
Untitled Page
JSP之plugin的使用
Cusp, An Eclipse Lisp Plugin
Building a Better Plugin Architecture
FindBugs Eclipse plugin update site
Sketchup与Sketchup ESRI plugin
OSGi Pure Plugin Architecture Introduction
An apple peel a day might keep cancer at bay
jQuery技巧总结
10 jQuery Essentials
jQuery Essentials - Round 2
jQuery DOM操作