jquery_mb_extruder 1.0.9 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +11 -0
- data/lib/generators/jquery_mb_extruder/templates/views/demo.html.erb +243 -0
- data/lib/generators/jquery_mb_extruder/templates/views/demo_left.html.erb +228 -0
- data/lib/generators/jquery_mb_extruder/templates/views/demo_left_inline.html.erb +190 -0
- data/lib/generators/jquery_mb_extruder/templates/views/demo_top.html.erb +147 -0
- data/lib/generators/jquery_mb_extruder/templates/views/demo_video.html.erb +140 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extr_components.html.erb +30 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extr_creativity.html.erb +41 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extr_mti.html.erb +25 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extr_network.html.erb +25 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extr_tw.html.erb +25 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extruderLeft.html.erb +69 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extruderLeft1.html.erb +45 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extruderRight.html.erb +33 -0
- data/lib/generators/jquery_mb_extruder/templates/views/extruderTop.html.erb +25 -0
- data/lib/generators/jquery_mb_extruder/templates/views/movie.html.erb +29 -0
- data/lib/generators/jquery_mb_extruder/templates/views/parts_controller.rb +48 -0
- data/lib/generators/jquery_mb_extruder/views_generator.rb +42 -0
- data/lib/jquery_mb_extruder/version.rb +1 -1
- metadata +19 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d069be35b45ec3e85912c7f4c2605d6cf52d8aa0
|
|
4
|
+
data.tar.gz: 1fd3d79f51aa3b93e8b8e7d0d68ec564067185cd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: dd9ec6e29f0f808e1650923d91240492a7dc17783a7c6f3ccd621d19189e2a82205922fccdaa12e68312fd727c821476f2e50d16a02068d0ce8b7473ff196568
|
|
7
|
+
data.tar.gz: 64183c2ebdfeed5b7f14f17d432c6c61acfde01b4a62bdabf4547dfe85b25d89cb6b0e083bc37416aa79183eea08b6e49b54305417513bc7112cf9f2471cbcf7
|
data/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
This is a Rails gem that will install the [JQuery MB Extruder](http://pupunzi.com/#mb.components/mb.extruder/extruder.html) in your application.
|
|
4
4
|
|
|
5
|
+
JQuery MB Extruder is a JQuery plugin that will allow you to create tabbed content anywhere and is pretty awesome. It can be hardcoded content or AJAXed pages allowing you to extend views onto the same page. For example a social sidebar or a menu or whatever the heck you want your users to have without going to a separate page(Including video which there is a demo for). Also loading times are freakin excellent!
|
|
6
|
+
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
7
9
|
Add this line to your application's Gemfile:
|
|
@@ -16,6 +18,12 @@ Or install it yourself as:
|
|
|
16
18
|
|
|
17
19
|
$ gem install jquery_mb_extruder
|
|
18
20
|
|
|
21
|
+
__Optionnally__, you can create views as a demo to guide you through your own implementation:
|
|
22
|
+
```shell
|
|
23
|
+
$ rails g jquery_mb_extruder:views
|
|
24
|
+
```
|
|
25
|
+
The files that the views give you are demo files. You will need the parts controller. Each demo file does have inline CSS(I did not create them, they are from JQuery MB, and I don't feel like changing the IDs on each page to make an extruder.sass file for a demo). If you use this, do yourself a favor and put them in an external css/sass file.
|
|
26
|
+
|
|
19
27
|
## Usage
|
|
20
28
|
|
|
21
29
|
# mb.extruder.readme
|
|
@@ -51,6 +59,9 @@ Thanks to the makers of mb.extruder!
|
|
|
51
59
|
|
|
52
60
|
Scy0846
|
|
53
61
|
|
|
62
|
+
#### If you like this...
|
|
63
|
+
|
|
64
|
+
I am considering making more gems of JQuery MBs work. They are all excellent plugins.
|
|
54
65
|
|
|
55
66
|
## Contributing
|
|
56
67
|
|
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
~ /*******************************************************************************
|
|
5
|
+
~ jquery.mb.components
|
|
6
|
+
~ file: demo.html
|
|
7
|
+
~
|
|
8
|
+
~ Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);
|
|
9
|
+
~ Open lab srl, Firenze - Italy
|
|
10
|
+
~ email: matteo@open-lab.com
|
|
11
|
+
~ site: http://pupunzi.com
|
|
12
|
+
~ blog: http://pupunzi.open-lab.com
|
|
13
|
+
~ http://open-lab.com
|
|
14
|
+
~
|
|
15
|
+
~ Licences: MIT, GPL
|
|
16
|
+
~ http://www.opensource.org/licenses/mit-license.php
|
|
17
|
+
~ http://www.gnu.org/licenses/gpl.html
|
|
18
|
+
~
|
|
19
|
+
~ last modified: 08/05/14 19.42
|
|
20
|
+
~ ******************************************************************************/
|
|
21
|
+
-->
|
|
22
|
+
|
|
23
|
+
<html>
|
|
24
|
+
<head>
|
|
25
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
26
|
+
<title>mb.extruder</title>
|
|
27
|
+
<style type="text/css">
|
|
28
|
+
body{
|
|
29
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
30
|
+
margin:10px;
|
|
31
|
+
}
|
|
32
|
+
.wrapper{
|
|
33
|
+
position:relative;
|
|
34
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
35
|
+
padding-top:90px;
|
|
36
|
+
padding-left:50px;
|
|
37
|
+
width:80%;
|
|
38
|
+
margin:auto
|
|
39
|
+
}
|
|
40
|
+
.wrapper .text{
|
|
41
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
42
|
+
padding-top:50px;
|
|
43
|
+
}
|
|
44
|
+
.wrapper h1{
|
|
45
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
46
|
+
font-size:26px;
|
|
47
|
+
}
|
|
48
|
+
.longText{
|
|
49
|
+
margin-top:20px;
|
|
50
|
+
width:600px;
|
|
51
|
+
font:18px/24px Arial, Helvetica, sans-serif;
|
|
52
|
+
color:gray;
|
|
53
|
+
}
|
|
54
|
+
span.btn{
|
|
55
|
+
padding:10px;
|
|
56
|
+
display:inline-block;
|
|
57
|
+
cursor:pointer;
|
|
58
|
+
font:12px/14px Arial, Helvetica, sans-serif;
|
|
59
|
+
color:#aaa;
|
|
60
|
+
background-color:#eee;
|
|
61
|
+
-moz-border-radius:10px;
|
|
62
|
+
-webkit-border-radius:10px;
|
|
63
|
+
-moz-box-shadow:#999 2px 0px 3px;
|
|
64
|
+
-webkit-box-shadow:#999 2px 0px 3px;
|
|
65
|
+
}
|
|
66
|
+
span.btn:hover{
|
|
67
|
+
background-color:#000;
|
|
68
|
+
}
|
|
69
|
+
input{
|
|
70
|
+
padding:10px;
|
|
71
|
+
border:none;
|
|
72
|
+
-moz-box-shadow:#999 2px 0px 3px;
|
|
73
|
+
-webkit-box-shadow:#999 2px 0px 3px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/*custom style for extruder*/
|
|
77
|
+
|
|
78
|
+
.extruder.left.a .flap{
|
|
79
|
+
font-size:18px;
|
|
80
|
+
color:white;
|
|
81
|
+
top:0;
|
|
82
|
+
padding:10px 0 10px 10px;
|
|
83
|
+
background:#772B14;
|
|
84
|
+
width:30px;
|
|
85
|
+
position:absolute;
|
|
86
|
+
right:0;
|
|
87
|
+
-moz-border-radius:0 10px 10px 0;
|
|
88
|
+
-webkit-border-top-right-radius:10px;
|
|
89
|
+
-webkit-border-bottom-right-radius:10px;
|
|
90
|
+
-moz-box-shadow:#666 2px 0px 3px;
|
|
91
|
+
-webkit-box-shadow:#666 2px 0px 3px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.extruder.left.a .content{
|
|
95
|
+
border-right:3px solid #772B14;
|
|
96
|
+
background:rgba(255,255,255,.95);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.extruder.top .optionsPanel .panelVoice a:hover{
|
|
100
|
+
color:#fff;
|
|
101
|
+
background: url("elements/black_op_30.png");
|
|
102
|
+
border-bottom:1px solid #000;
|
|
103
|
+
}
|
|
104
|
+
.extruder.top .optionsPanel .panelVoice a{
|
|
105
|
+
border-bottom:1px solid #000;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.extruder.left.a .flap .flapLabel{
|
|
109
|
+
background:#772B14;
|
|
110
|
+
}
|
|
111
|
+
/*
|
|
112
|
+
|
|
113
|
+
.extruder.top{
|
|
114
|
+
margin-left:-200px!important;
|
|
115
|
+
}
|
|
116
|
+
*/
|
|
117
|
+
</style>
|
|
118
|
+
|
|
119
|
+
<link href="css/mbExtruder.css" media="all" rel="stylesheet" type="text/css">
|
|
120
|
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
|
|
121
|
+
<script type="text/javascript" src="inc/jquery.hoverIntent.min.js"></script>
|
|
122
|
+
<script type="text/javascript" src="inc/jquery.mb.flipText.js"></script>
|
|
123
|
+
<script type="text/javascript" src="inc/mbExtruder.js"></script>
|
|
124
|
+
<script type="text/javascript">
|
|
125
|
+
|
|
126
|
+
$(function(){
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
if (self.location.href == top.location.href){
|
|
130
|
+
$("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
|
|
131
|
+
var logo=$("<a href='http://pupunzi.com'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository' style='display:none;'></a>").css({position:"absolute"});
|
|
132
|
+
$("body").prepend(logo);
|
|
133
|
+
$("#logo").fadeIn();
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
$("#extruderTop").buildMbExtruder({
|
|
137
|
+
positionFixed:false,
|
|
138
|
+
position:"top",
|
|
139
|
+
width: 500,
|
|
140
|
+
extruderOpacity:1,
|
|
141
|
+
autoCloseTime:0,
|
|
142
|
+
autoOpenTime:1000,
|
|
143
|
+
hidePanelsOnClose:false,
|
|
144
|
+
onExtOpen:function(){},
|
|
145
|
+
onExtContentLoad:function(){},
|
|
146
|
+
onExtClose:function(){}
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
$("#extruderBottom").buildMbExtruder({
|
|
150
|
+
position:"bottom",
|
|
151
|
+
width:500,
|
|
152
|
+
extruderOpacity:1,
|
|
153
|
+
onExtOpen:function(){},
|
|
154
|
+
onExtContentLoad:function(){},
|
|
155
|
+
onExtClose:function(){}
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
$("#extruderLeft").buildMbExtruder({
|
|
159
|
+
position:"left",
|
|
160
|
+
width:600,
|
|
161
|
+
extruderOpacity:.8,
|
|
162
|
+
|
|
163
|
+
hidePanelsOnClose:false,
|
|
164
|
+
accordionPanels:false,
|
|
165
|
+
onExtOpen:function(){},
|
|
166
|
+
onExtContentLoad:function(){$("#extruderLeft").openPanel();},
|
|
167
|
+
onExtClose:function(){}
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
$("#extruderLeft2").buildMbExtruder({
|
|
171
|
+
position:"left",
|
|
172
|
+
width:300,
|
|
173
|
+
positionFixed:false,
|
|
174
|
+
top:0,
|
|
175
|
+
extruderOpacity:.8,
|
|
176
|
+
onExtOpen:function(){},
|
|
177
|
+
onExtContentLoad:function(){},
|
|
178
|
+
onExtClose:function(){}
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
$("#extruderRight").buildMbExtruder({
|
|
182
|
+
position:"right",
|
|
183
|
+
width:300,
|
|
184
|
+
extruderOpacity:.8,
|
|
185
|
+
textOrientation:"tb",
|
|
186
|
+
onExtOpen:function(){},
|
|
187
|
+
onExtContentLoad:function(){},
|
|
188
|
+
onExtClose:function(){}
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
$.fn.changeLabel=function(text){
|
|
192
|
+
$(this).find(".flapLabel").html(text);
|
|
193
|
+
$(this).find(".flapLabel").mbFlipText();
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
</script>
|
|
199
|
+
</head>
|
|
200
|
+
<body >
|
|
201
|
+
<div class="wrapper">
|
|
202
|
+
<h1>mb.extruder.demo</h1>
|
|
203
|
+
|
|
204
|
+
<div class="text">
|
|
205
|
+
<h2> Here is the mb.extruder!</h2>
|
|
206
|
+
You can have a direct link, a link with a panel, just a panel or a disabled voice.
|
|
207
|
+
<br>
|
|
208
|
+
It can be set on top or on left of your page; and if you have mor than one extruder (only on left) they are automatically positioned one behind the other.
|
|
209
|
+
<br>
|
|
210
|
+
<br>
|
|
211
|
+
The TOP extruder <b>positionFixed</b> param is set to <b>false</b>, so it scrolls with the page; the LEFT extruders <b>positionFixed</b> param is set to <b>true</b> (the default value), so they kip their position even when page scrolls.
|
|
212
|
+
<br>
|
|
213
|
+
<br>
|
|
214
|
+
You can disable or anable dinamically each voice of your extruder using the <b>$.fn.disableExtruderVoice()</b> or <b>$.fn.enableExtruderVoice()</b> methods.
|
|
215
|
+
<br>
|
|
216
|
+
You can open or close any extrude panel invoking: <b>$.fn.closeMbExtruder()</b> or <b>$.fn.openMbExtruder()</b> methods.
|
|
217
|
+
<br>
|
|
218
|
+
<h3>Try now:</h3>
|
|
219
|
+
<span class="btn" onclick="$('#extruderTop').openMbExtruder(true);setTimeout(function(){$('#top2').disableExtruderVoice();},400);"><a style="color:red">disable</a> second voice of mbExtruder Top</span>
|
|
220
|
+
<span class="btn" onclick="setTimeout(function(){$('#top2').enableExtruderVoice();},400);"><a style="color:green">enable</a> second voice of mbExtruder Top</span>
|
|
221
|
+
<span class="btn" onclick="$('#extruderLeft').openMbExtruder(true);$('#extruderLeft').openPanel()">open "Our network"</span>
|
|
222
|
+
<span class="btn" onclick="$('#extruderLeft').closeMbExtruder();">close "Our network"</span>
|
|
223
|
+
<br><br><input type="text" id="label"> <span class="btn" onclick="$('#extruderLeft').changeLabel($('#label').val()!=''?$('#label').val():'newLabel');">change left label</span>
|
|
224
|
+
<br>
|
|
225
|
+
<br>
|
|
226
|
+
take a look at the documentation to see how simple is the configuration!
|
|
227
|
+
|
|
228
|
+
</div>
|
|
229
|
+
<div class="longText" style="position:relative;padding-left:50px">
|
|
230
|
+
<div id="extruderLeft2" class="{title:'content in place'}" >
|
|
231
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus orci, volutpat ut pulvinar volutpat, convallis in orci. Quisque eget arcu convallis dui lacinia vestibulum non ut odio. Cras fringilla mollis mattis. Cras dictum rutrum ultricies. Donec auctor, risus eu tincidunt auctor, diam ligula facilisis libero, sit amet interdum felis enim ut est. Maecenas nec nulla quis ante convallis volutpat convallis at justo. Pellentesque quam orci, consectetur sit amet interdum a, tempus eget erat. Nam in ante odio. Vivamus nec augue vitae mi molestie pretium sed id elit. Aenean ultrices auctor ipsum eu vestibulum. Phasellus non dolor vel nisi congue egestas in a eros. Phasellus nunc nulla, interdum ut viverra eu, tristique sed sapien.
|
|
232
|
+
</div>
|
|
233
|
+
Phasellus dapibus magna sed nisl interdum ac pellentesque magna sagittis. Maecenas massa leo, condimentum porta consequat in, consequat ac leo. Pellentesque malesuada consequat tortor vel placerat. Suspendisse lorem elit, hendrerit eu blandit at, feugiat id urna. Nunc scelerisque, erat in pharetra cursus, mi eros adipiscing mauris, ac porttitor lacus sem et lectus. Curabitur venenatis adipiscing elementum. Aliquam tristique pulvinar hendrerit. Proin ut tortor dolor. Proin accumsan, libero nec dapibus bibendum, tellus purus molestie est, quis pulvinar est arcu id libero. Morbi vel mauris odio. Integer elementum metus ac eros fringilla congue. Sed est enim, accumsan at malesuada id, bibendum a tortor. Proin id magna eget justo blandit imperdiet sed sit amet neque. Vestibulum luctus, nulla sed vestibulum rutrum, sapien neque laoreet sapien, eget iaculis sem diam quis enim. Aenean sit amet augue neque, sed luctus odio.
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
<div id="extruderTop" class="{title:'extruder top', url:'parts/extruderTop.html'}"></div>
|
|
237
|
+
<div id="extruderLeft" class="a {title:'What\'s new in this part of world', url:'parts/extruderLeft.html'}"></div>
|
|
238
|
+
<div id="extruderRight" class="{title:'Our network on the right ', url:'parts/extruderRight.html'}"></div>
|
|
239
|
+
<div id="extruderBottom" class="{title:'extruder bottom ', url:'parts/extruderTop.html'}"></div>
|
|
240
|
+
|
|
241
|
+
</body>
|
|
242
|
+
|
|
243
|
+
</html>
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
~ /*******************************************************************************
|
|
5
|
+
~ jquery.mb.components
|
|
6
|
+
~ file: demo_left.html
|
|
7
|
+
~
|
|
8
|
+
~ Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);
|
|
9
|
+
~ Open lab srl, Firenze - Italy
|
|
10
|
+
~ email: matteo@open-lab.com
|
|
11
|
+
~ site: http://pupunzi.com
|
|
12
|
+
~ blog: http://pupunzi.open-lab.com
|
|
13
|
+
~ http://open-lab.com
|
|
14
|
+
~
|
|
15
|
+
~ Licences: MIT, GPL
|
|
16
|
+
~ http://www.opensource.org/licenses/mit-license.php
|
|
17
|
+
~ http://www.gnu.org/licenses/gpl.html
|
|
18
|
+
~
|
|
19
|
+
~ last modified: 07/01/14 22.50
|
|
20
|
+
~ ******************************************************************************/
|
|
21
|
+
-->
|
|
22
|
+
|
|
23
|
+
<html>
|
|
24
|
+
<head>
|
|
25
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
26
|
+
<title>mb.extruder</title>
|
|
27
|
+
<style type="text/css">
|
|
28
|
+
body{
|
|
29
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
30
|
+
margin:10px;
|
|
31
|
+
}
|
|
32
|
+
.wrapper{
|
|
33
|
+
position:relative;
|
|
34
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
35
|
+
padding-top:90px;
|
|
36
|
+
padding-left:50px;
|
|
37
|
+
width:80%;
|
|
38
|
+
margin:auto
|
|
39
|
+
}
|
|
40
|
+
.wrapper .text{
|
|
41
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
42
|
+
padding-top:50px;
|
|
43
|
+
}
|
|
44
|
+
.wrapper h1{
|
|
45
|
+
font-family:Arial, Helvetica, sans-serif;
|
|
46
|
+
font-size:26px;
|
|
47
|
+
}
|
|
48
|
+
.longText{
|
|
49
|
+
margin-top:20px;
|
|
50
|
+
width:600px;
|
|
51
|
+
font:18px/24px Arial, Helvetica, sans-serif;
|
|
52
|
+
color:gray;
|
|
53
|
+
}
|
|
54
|
+
span.btn{
|
|
55
|
+
padding:10px;
|
|
56
|
+
display:inline-block;
|
|
57
|
+
cursor:pointer;
|
|
58
|
+
font:12px/14px Arial, Helvetica, sans-serif;
|
|
59
|
+
color:#aaa;
|
|
60
|
+
background-color:#eee;
|
|
61
|
+
-moz-border-radius:10px;
|
|
62
|
+
-webkit-border-radius:10px;
|
|
63
|
+
-moz-box-shadow:#999 2px 0px 3px;
|
|
64
|
+
-webkit-box-shadow:#999 2px 0px 3px;
|
|
65
|
+
}
|
|
66
|
+
span.btn:hover{
|
|
67
|
+
background-color:#000;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/*
|
|
71
|
+
custom style for extruder
|
|
72
|
+
*/
|
|
73
|
+
|
|
74
|
+
.extruder.left.a .flap{
|
|
75
|
+
font-size:18px;
|
|
76
|
+
color:white;
|
|
77
|
+
top:0;
|
|
78
|
+
padding:10px 0 10px 10px;
|
|
79
|
+
background:#772B14;
|
|
80
|
+
width:30px;
|
|
81
|
+
position:absolute;
|
|
82
|
+
right:0;
|
|
83
|
+
-moz-border-radius:0 10px 10px 0;
|
|
84
|
+
-webkit-border-top-right-radius:10px;
|
|
85
|
+
-webkit-border-bottom-right-radius:10px;
|
|
86
|
+
-moz-box-shadow:#666 2px 0px 3px;
|
|
87
|
+
-webkit-box-shadow:#666 2px 0px 3px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.extruder.left.a .content{
|
|
91
|
+
border-right:3px solid #772B14;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.extruder.top .optionsPanel .panelVoice a:hover{
|
|
95
|
+
color:#fff;
|
|
96
|
+
background: url("elements/black_op_30.png");
|
|
97
|
+
border-bottom:1px solid #000;
|
|
98
|
+
}
|
|
99
|
+
.extruder.top .optionsPanel .panelVoice a{
|
|
100
|
+
border-bottom:1px solid #000;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.extruder.left.a .flap .flapLabel{
|
|
104
|
+
background:#772B14;
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
107
|
+
|
|
108
|
+
<link href="css/mbExtruder.css" media="all" rel="stylesheet" type="text/css">
|
|
109
|
+
|
|
110
|
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
|
|
111
|
+
<script type="text/javascript" src="inc/jquery.hoverIntent.min.js"></script>
|
|
112
|
+
<script type="text/javascript" src="inc/jquery.mb.flipText.js"></script>
|
|
113
|
+
<script type="text/javascript" src="inc/mbExtruder.js"></script>
|
|
114
|
+
<script type="text/javascript">
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
$(function(){
|
|
119
|
+
|
|
120
|
+
if (self.location.href == top.location.href){
|
|
121
|
+
$("body").css({font:"normal 13px/16px 'trebuchet MS', verdana, sans-serif"});
|
|
122
|
+
var logo=$("<a href='http://pupunzi.com'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository' style='display:none;'></a>").css({position:"absolute"});
|
|
123
|
+
$("body").prepend(logo);
|
|
124
|
+
$("#logo").fadeIn();
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
$("#extruderLeft").buildMbExtruder({
|
|
128
|
+
position:"left",
|
|
129
|
+
width:300,
|
|
130
|
+
extruderOpacity:.8,
|
|
131
|
+
hidePanelsOnClose:true,
|
|
132
|
+
accordionPanels:true,
|
|
133
|
+
onExtOpen:function(){},
|
|
134
|
+
onExtContentLoad:function(){},
|
|
135
|
+
onExtClose:function(){}
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
/*
|
|
140
|
+
$("#extruderLeft").buildMbExtruder({
|
|
141
|
+
position:"left",
|
|
142
|
+
width:300,
|
|
143
|
+
extruderOpacity:.8,
|
|
144
|
+
hidePanelsOnClose:false,
|
|
145
|
+
accordionPanels:false,
|
|
146
|
+
onExtOpen:function(){},
|
|
147
|
+
onExtContentLoad:function(){$("#extruderLeft").openPanel();},
|
|
148
|
+
onExtClose:function(){}
|
|
149
|
+
});
|
|
150
|
+
*/
|
|
151
|
+
|
|
152
|
+
$("#extruderLeft1").buildMbExtruder({
|
|
153
|
+
position:"left",
|
|
154
|
+
width:300,
|
|
155
|
+
extruderOpacity:.8,
|
|
156
|
+
onExtOpen:function(){},
|
|
157
|
+
onExtContentLoad:function(){},
|
|
158
|
+
onExtClose:function(){}
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
$("#extruderLeft2").buildMbExtruder({
|
|
162
|
+
position:"top",
|
|
163
|
+
width:300,
|
|
164
|
+
positionFixed:false,
|
|
165
|
+
top:0,
|
|
166
|
+
extruderOpacity:.8,
|
|
167
|
+
onExtOpen:function(){},
|
|
168
|
+
onExtContentLoad:function(){},
|
|
169
|
+
onExtClose:function(){}
|
|
170
|
+
});
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
</script>
|
|
174
|
+
</head>
|
|
175
|
+
<body >
|
|
176
|
+
|
|
177
|
+
<div class="wrapper">
|
|
178
|
+
<h1>mb.extruder.demo</h1>
|
|
179
|
+
|
|
180
|
+
<div class="text">
|
|
181
|
+
<h2> Here is the mb.extruder!</h2>
|
|
182
|
+
You can have a direct link, a link with a panel, just a panel or a disabled voice.
|
|
183
|
+
<br>
|
|
184
|
+
It can be set on top or on left of your page; and if you have mor than one extruder (only on left) they are automatically positioned one behind the other.
|
|
185
|
+
<br>
|
|
186
|
+
<br>
|
|
187
|
+
The TOP extruder <b>positionFixed</b> param is set to <b>false</b>, so it scrolls with the page; the LEFT extruders <b>positionFixed</b> param is set to <b>true</b> (the default value), so they kip their position even when page scrolls.
|
|
188
|
+
<br>
|
|
189
|
+
<br>
|
|
190
|
+
You can disable or anable dinamically each voice of your extruder using the <b>$.fn.disableExtruderVoice()</b> or <b>$.fn.enableExtruderVoice()</b> methods.
|
|
191
|
+
<br>
|
|
192
|
+
You can open or close any extrude panel invoking: <b>$.fn.closeMbExtruder()</b> or <b>$.fn.openMbExtruder()</b> methods.
|
|
193
|
+
<br>
|
|
194
|
+
<h3>Try now:</h3>
|
|
195
|
+
<span class="btn" onclick="$('#extruderLeft').openMbExtruder(true);$('#extruderLeft').openPanels()">open "Our network"</span>
|
|
196
|
+
<span class="btn" onclick="$('#extruderLeft').closeMbExtruder();">close "Our network"</span>
|
|
197
|
+
<span class="btn" onclick="$('#extruderLeft').get(0).options.accordionPanels=false;$('#extruderLeft').openPanel();$('#extruderLeft').openMbExtruder();">open "Our network" with all panels opened</span>
|
|
198
|
+
<br>
|
|
199
|
+
<br>
|
|
200
|
+
take a look at the documentation to see how simple is the configuration!
|
|
201
|
+
|
|
202
|
+
</div>
|
|
203
|
+
<div class="longText" style="position:relative;padding-left:50px">
|
|
204
|
+
<div id="extruderLeft2" class="{title:'novità: content in place'}" >
|
|
205
|
+
|
|
206
|
+
<!--<div style="height: 350px">-->
|
|
207
|
+
|
|
208
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus orci, volutpat ut pulvinar volutpat, convallis in orci. Quisque eget arcu convallis dui lacinia vestibulum non ut odio. Cras fringilla mollis mattis. Cras dictum rutrum ultricies. Donec auctor, risus eu tincidunt auctor, diam ligula facilisis libero, sit amet interdum felis enim ut est. Maecenas nec nulla quis ante convallis volutpat convallis at justo. Pellentesque quam orci, consectetur sit amet interdum a, tempus eget erat. Nam in ante odio. Vivamus nec augue vitae mi molestie pretium sed id elit. Aenean ultrices auctor ipsum eu vestibulum. Phasellus non dolor vel nisi congue egestas in a eros. Phasellus nunc nulla, interdum ut viverra eu, tristique sed sapien.
|
|
209
|
+
|
|
210
|
+
Proin vel pulvinar diam. Integer commodo dapibus massa, a faucibus purus imperdiet in. Morbi a purus est. Aliquam lacinia vehicula consequat. Pellentesque gravida dui vitae magna hendrerit varius. Pellentesque ullamcorper purus nec nisi eleifend a pharetra nulla sollicitudin. Maecenas sed gravida sem. Sed molestie luctus interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam viverra, ipsum quis adipiscing dignissim, sapien velit vehicula dolor, vitae dictum leo sem vel ante. Donec sodales augue sit amet velit ullamcorper nec rhoncus ipsum semper. Sed nec sodales sapien. Sed ornare auctor lacus ornare condimentum. Curabitur varius consequat condimentum. Mauris sed libero libero, id mollis nibh.
|
|
211
|
+
|
|
212
|
+
Sed vel metus eu eros semper pellentesque porttitor a purus. Cras ornare lobortis risus id posuere. In velit felis, tempor ac fermentum nec, sodales at felis. Nunc id felis quis tortor semper volutpat a eget eros. Nullam non risus vel quam tincidunt adipiscing. Fusce interdum, dolor at placerat accumsan, magna neque faucibus felis, vel elementum nunc enim at purus. Suspendisse in dolor nec erat vulputate sollicitudin vitae id augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sit amet augue at metus gravida ultrices. Donec risus dui, ultricies consequat feugiat id, sagittis et elit. Curabitur a nisi odio. In hac habitasse platea dictumst. Nullam pulvinar augue ac lacus dictum vestibulum. Aliquam a magna elit, id dictum nibh. Integer sapien sapien, sodales ac vehicula dignissim, hendrerit ac felis. Nunc feugiat nulla et turpis posuere vel malesuada eros hendrerit. Aliquam eget elit sem. Pellentesque sit amet arcu orci. Sed non urna eu arcu placerat malesuada.
|
|
213
|
+
|
|
214
|
+
Phasellus dapibus magna sed nisl interdum ac pellentesque magna sagittis. Maecenas massa leo, condimentum porta consequat in, consequat ac leo. Pellentesque malesuada consequat tortor vel placerat. Suspendisse lorem elit, hendrerit eu blandit at, feugiat id urna. Nunc scelerisque, erat in pharetra cursus, mi eros adipiscing mauris, ac porttitor lacus sem et lectus. Curabitur venenatis adipiscing elementum. Aliquam tristique pulvinar hendrerit. Proin ut tortor dolor. Proin accumsan, libero nec dapibus bibendum, tellus purus molestie est, quis pulvinar est arcu id libero. Morbi vel mauris odio. Integer elementum metus ac eros fringilla congue. Sed est enim, accumsan at malesuada id, bibendum a tortor. Proin id magna eget justo blandit imperdiet sed sit amet neque. Vestibulum luctus, nulla sed vestibulum rutrum, sapien neque laoreet sapien, eget iaculis sem diam quis enim. Aenean sit amet augue neque, sed luctus odio. Curabitur mi nisi, ornare vel adipiscing sed, sodales vitae arcu. Donec enim libero, placerat nec congue eget, adipiscing at lacus. Proin elementum aliquet sagittis. Aenean mauris orci, rhoncus non imperdiet at, imperdiet non arcu. Phasellus laoreet lectus vitae nunc condimentum porta.
|
|
215
|
+
|
|
216
|
+
Aenean adipiscing tempor leo id molestie. Nulla pulvinar turpis neque. Sed gravida, tellus et fermentum rhoncus, est arcu consequat nibh, eget luctus ipsum lorem vel sem. Praesent gravida, arcu sed adipiscing imperdiet, ligula velit vulputate mi, quis congue odio neque sed enim. Ut hendrerit tellus eu lorem commodo scelerisque. Fusce lacinia dignissim ullamcorper. In nec sem id metus convallis dictum. Donec fringilla enim vel justo iaculis vehicula. Aliquam in augue sem, eu malesuada urna. Quisque eleifend dignissim quam at hendrerit. Sed vel vehicula felis. Aenean a risus augue. Sed pellentesque fermentum hendrerit.
|
|
217
|
+
<!--</div>-->
|
|
218
|
+
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div id="extruderLeft" class="{title:'Our network ', url:'parts/extruderLeft.html'}"></div>
|
|
222
|
+
<div id="extruderLeft1" class="a {title:'What\'s new in this part of world', url:'parts/extruderLeft1.html'}"></div>
|
|
223
|
+
Phasellus dapibus magna sed nisl interdum ac pellentesque magna sagittis. Maecenas massa leo, condimentum porta consequat in, consequat ac leo. Pellentesque malesuada consequat tortor vel placerat. Suspendisse lorem elit, hendrerit eu blandit at, feugiat id urna. Nunc scelerisque, erat in pharetra cursus, mi eros adipiscing mauris, ac porttitor lacus sem et lectus. Curabitur venenatis adipiscing elementum. Aliquam tristique pulvinar hendrerit. Proin ut tortor dolor. Proin accumsan, libero nec dapibus bibendum, tellus purus molestie est, quis pulvinar est arcu id libero. Morbi vel mauris odio. Integer elementum metus ac eros fringilla congue. Sed est enim, accumsan at malesuada id, bibendum a tortor. Proin id magna eget justo blandit imperdiet sed sit amet neque. Vestibulum luctus, nulla sed vestibulum rutrum, sapien neque laoreet sapien, eget iaculis sem diam quis enim. Aenean sit amet augue neque, sed luctus odio. Curabitur mi nisi, ornare vel adipiscing sed, sodales vitae arcu. Donec enim libero, placerat nec congue eget, adipiscing at lacus. Proin elementum aliquet sagittis. Aenean mauris orci, rhoncus non imperdiet at, imperdiet non arcu. Phasellus laoreet lectus vitae nunc condimentum porta. Aenean adipiscing tempor leo id molestie. Nulla pulvinar turpis neque. Sed gravida, tellus et fermentum rhoncus, est arcu consequat nibh, eget luctus ipsum lorem vel sem. Praesent gravida, arcu sed adipiscing imperdiet, ligula velit vulputate mi, quis congue odio neque sed enim. Ut hendrerit tellus eu lorem commodo scelerisque. Fusce lacinia dignissim ullamcorper. In nec sem id metus convallis dictum. Donec fringilla enim vel justo iaculis vehicula. Aliquam in augue sem, eu malesuada urna. Quisque eleifend dignissim quam at hendrerit. Sed vel vehicula felis. Aenean a risus augue. Sed pellentesque fermentum hendrerit.
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
</div>
|
|
227
|
+
</body>
|
|
228
|
+
</html>
|