jQuery slidePanel Plug-In Demos
Options:
Defaults
$.fn.slidePanel.defaults = {
width: '200',
height: '200',
slideWidth: '200',
tabHeight: '15',
tabWidth: '30',
openIndex: '0',
backgroundColor:'#ffffff',
coverSlideBackgroundColor:'#ffffff',
border:'0px none',
padding:'0px',
closeable:false,
zIndexMax: '100'
};
You are able to set defaults directly:
$.fn.slidePanel.defaults.width = '500';
width: Width of the cover slide in pixels (if smaller than slideWidth, you'll need to manaully hide the slide excess)
height: Height of the entire slidePanel in pixels (cover slide & slide panels)
slideWidth: width of the underlying slides in pixels
tabHeight: height of the tabs in pixels
tabWidth: width of the tabs in pixels
openIndex: index of the slide to open by default (0 to close all by default)
backgroundColor: background color of the underlying slides
coverSlideBackgroundColor: background color of the cover slide
border: border for all slides. Normal CSS syntax accepted.
padding: padding for all slides. Normal CSS syntax accepted.
closeable: true or false; let use close slides.
zIndexMax: Largest z-index value for the slidePanel.
Demos:
Basic Demo
$("div#slidePanel-A").slidePanel();
This is the main "cover slide"
Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit.
slidePanel 1 non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit.
slidePanel 2 risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- List item one
- List item two
- List item three
slidePanel 3. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
Formatted Demo
$("#slidePanel-B").slidePanel({
width:'420',
height:'250',
slideWidth:'330',
tabWidth:'25',
tabHeight:'35',
border:'1px solid #dcdcdc',
padding:'10px',
closeable:true
});
JIF Peanut Butter Blossoms Recipe
Ingredients:
- 1/2 cup CRISCO Butter Shortening
- 1/2 cup JIF Creamy Peanut Butter
- 1/2 cup firmly packed brown sugar
- 1/2 cup sugar
- 1 large egg
- 2 tablespoons milk
- 1 teaspoon vanilla
- 1 3/4 cups PILLSBURY BEST All Purpose Flour
- 1 teaspoon baking soda
- 1/2 teaspoon salt
- Sugar
- 48 foil-wrapped milk chocolate pieces, unwrapped
via allrecipes.com
Step 1
- Preheat oven to 375 degrees F.
- Cream together shortening, peanut butter, brown sugar and 1/2 cup sugar. Add egg, milk and vanilla. Beat well.
Step 2
- Sire together flour, baking soda and salt. Add to creamed mixture. Beat on low speed until stiff dough forms.
- Shape into 1-inch balls. Roll in sugar. Place 2 inches apart on ungreased cookie sheet.
Step 3
- Bake for 10 to 12 minutes or until golden brown.
- Top each cookie immediately with an unwrapped chocolate piece, pressing down firmly so that cookie cracks around edge. Remove from cookie sheets to cool.
Polished Example
$("#slidePanel-F").slidePanel({
width:'445',
height:'185',
slideWidth:'430',
tabWidth:'15',
tabHeight:'36',
border:'2px solid #cacaca',
backgroundColor:'#ffffff',
coverSlideBackgroundColor:'#eeeeee',
padding:'12px',
openIndex:'1'
});
Cover Slide
Quam sem mollis nibh, ut lobortis magna elit vel sapien. Vestibulum facilisis varius sodales. Maecenas sit amet orci nisi, eget cursus nisi. Cras non nibh id dui eleifend sodales in at eros. Praesent vel ante non orci posuere aliquet. Aliquam interdum, nibh eget condimentum imperdiet, nisi leo imperdiet tellus, et ultricies orci urna id leo. Nulla sit amet neque eget dui tristique sodales.
Panel 1
Donec consequat posuere turpis, quis sodales erat ullamcorper eu. Fusce massa augue, rutrum ac faucibus vitae, ultrices non nisi. Suspendisse eleifend sodales facilisis. Integer vel urna ac tortor pellentesque dapibus. Nullam in justo lorem. Mauris nisl velit, consequat in faucibus sit amet, tempus ut nisl.
Panel 2
Donec consequat posuere turpis, quis sodales erat ullamcorper eu. Fusce massa augue, rutrum ac faucibus vitae, ultrices non nisi.
Suspendisse eleifend sodales facilisis. Integer vel urna ac tortor pellentesque dapibus. Nullam in justo lorem. Mauris nisl velit, consequat in faucibus sit amet, tempus ut nisl.
Panel 3
Donec consequat posuere turpis, quis sodales erat ullamcorper eu.
- Fusce massa augue
- Rutrum ac faucibus vitae
- Ltrices non nisi
Panel 4
Donec consequat posuere turpis, quis sodales erat ullamcorper eu. Fusce massa augue, rutrum ac faucibus vitae, ultrices non nisi. Suspendisse eleifend sodales facilisis. Integer vel urna ac tortor pellentesque dapibus. Nullam in justo lorem. Mauris nisl velit, consequat in faucibus sit amet, tempus ut nisl.
Pellentesque mauris mi, vehicula non cursus eu, pretium gravida sapien. Pellentesque euismod, erat vel bibendum mattis, est arcu auctor dolor, eget tempus massa elit vitae est.