diff --git a/bin/copy-dependencies b/bin/copy-dependencies new file mode 100755 index 0000000..c3ec444 --- /dev/null +++ b/bin/copy-dependencies @@ -0,0 +1,9 @@ +# JS +cp node_modules/jquery/dist/jquery.min.js demo/js +cp node_modules/validaty/lib/jquery.validaty.js demo/js +cp node_modules/validaty/lib/jquery.validaty.validators.js demo/js +cp lib/jquery.stepy.js demo/js + +# CSS +cp lib/jquery.stepy.css demo/css +cp node_modules/validaty/lib/jquery.validaty.css demo/css diff --git a/demo/css/common.css b/demo/css/common.css index e9c89a7..06fe0a8 100755 --- a/demo/css/common.css +++ b/demo/css/common.css @@ -4,9 +4,9 @@ a:hover { color: #48A5D4 } body { background-color: #E7E7E7; font: normal 10px/1.6 'Helvetica Neue', 'Lucida Grande', Helvetica, Arial, sans-serif } -footer { font-size: 1.3em; margin: 0 auto; overflow: auto; padding-bottom: 15px; padding-top: 10px; text-align: center; width: 1100px } +footer { font-size: 1.3em; margin: 0 auto; overflow: auto; padding-bottom: 15px; padding-top: 10px; text-align: center; width: 100% } -h2 { border-bottom: 1px solid #DEDEDE; clear: right; color: #444; font-size: 2.6em; letter-spacing: .5px; line-height: 1.3em; padding-bottom: 3px } +h2 { background-color: #dedede; border-left: 5px solid; clear: right; color: #444; font-size: 2.6em; letter-spacing: .5px; line-height: 1; margin: 40px 0 0; padding: 20px 0 20px 10px } h2 a { color: #444 } h3 { color: #777; font-size: 1.8em; letter-spacing: .4px; margin-bottom: 0 } @@ -34,7 +34,9 @@ pre { background-color: #F8F8F8; border: 1px solid #EAEAEA; border-radius: 3px; .function p { color: #444; font-size: 1.2em; letter-spacing: .4px; margin-left: 3px; margin-top: -8px; text-align: left } -.demo { margin-bottom: 10px } +.demo { max-width: 700px; margin: 0 auto 20px auto } +.demo:after, +.demo form:after { content: ' '; clear: both; display: block } .highlight { clear: both } diff --git a/demo/css/jquery.stepy.css b/demo/css/jquery.stepy.css new file mode 100755 index 0000000..2206397 --- /dev/null +++ b/demo/css/jquery.stepy.css @@ -0,0 +1,15 @@ +.stepy-step { + display: none; +} + +.stepy-step.stepy-active { + display: block; +} + +.stepy-back, .stepy-next, .stepy-finish { + visibility: hidden; +} + +.stepy-back.stepy-active, .stepy-next.stepy-active, .stepy-finish.stepy-active { + visibility: visible; +} diff --git a/demo/css/jquery.validaty.css b/demo/css/jquery.validaty.css new file mode 100644 index 0000000..3a86e21 --- /dev/null +++ b/demo/css/jquery.validaty.css @@ -0,0 +1,59 @@ +@charset "utf-8"; + +.validaty-balloon { + cursor: help; + opacity: 0; + position: absolute; +} + +.validaty-balloon div { + border-right: 15px solid transparent; + border-top: 10px solid #444; + margin-left: 10px; + opacity: .8; + width: 0; +} + +.validaty-balloon li { + color: white; + font-size: 1.2em; + font-weight: bold; + letter-spacing: .5px; + line-height: 1.6em; +} + +.validaty-balloon ul { + background-color: #444; + border-radius: 5px; + list-style: none; + margin: 0; + opacity: .8; + padding: 4px 10px; +} + +.validaty .invalid { + border: 1px solid #c00; +} + +.validaty-message { + cursor: help; + opacity: 0 +} + +.validaty-message li { + color: #c00; + font-size: 1.1em; + line-height: 1.3em; + letter-spacing: .5px +} + +.validaty-message ul { + opacity: .8; + list-style: none; + margin: 0; + padding: 4px 10px +} + +.validaty .valid { + border: 1px solid #0c0; +} diff --git a/demo/css/stepy.demo.css b/demo/css/stepy.demo.css index 470d1c2..02864a2 100644 --- a/demo/css/stepy.demo.css +++ b/demo/css/stepy.demo.css @@ -1,4 +1,5 @@ -.stepy-header { list-style: none; padding: 0; width: 724px } +.stepy-header { list-style: none; padding: 0; width: 100% } + .stepy-header:after { content: ' '; display: block; clear: both } .stepy-header li { cursor: pointer; float: left; padding: 10px } .stepy-header li.stepy-error { background: url('../demo/img/error.png') no-repeat right top } .stepy-header li div { color: #ccc; font: bold 2.8em verdana; text-shadow: 1px 1px #f8f8f8 } @@ -6,12 +7,13 @@ .stepy-header li span { color: #ccc; font: 1.4em verdana } .stepy-header li.stepy-active span { color: #bbb } -.stepy-step { border: 1px solid #bbb; clear: left; padding: 15px 20px; width: 600px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } +.stepy-step { background-color: #f1f0f0; border: 1px solid #bbb; clear: left; padding: 15px 30px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 20px; } + .stepy-step label { color: #222; display: block; font: bold 1.5em arial; letter-spacing: .7px; margin: 10px 0 3px 1px } .stepy-step input, .stepy-step textarea, - .stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 1.4em; height: 27px; margin-bottom: 12px; padding: 3px; width: 90% } + .stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 1.4em; height: 27px; margin-bottom: 12px; padding: 3px; width: 100% } .stepy-step select { height: 34px; padding-top: 5px } @@ -26,29 +28,47 @@ -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; + background-color: #369; border-radius: 3px; - border: 1px solid #ccc; - color: #7f0055; + border: 1px solid #405b75; + color: #fff; cursor: pointer; font: 1.2em verdana; padding: 7px 15px 8px; text-decoration: none; + transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s; } -.stepy-back:hover, .stepy-next:hover { - border-color: #bbb; - color: #b07; -} - -.stepy-finish { - background-color: transparent; +input[type="submit"].stepy-finish { + background-color: #369; border-radius: 3px !important; - border: 1px solid #ccc !important; + border: 1px solid #405b75 !important; + color: #fff; + cursor: pointer; float: right; + font: 1.2em verdana; height: 33px !important; width: 80px !important; } +.stepy-finish, +.stepy-back, +.stepy-next { + display: none; +} + +.stepy-active { + display: inline-block; +} + +.stepy-finish:hover, +.stepy-back:hover, +.stepy-next:hover { + color: #fff; + box-shadow: 1px 1px 4px 0px rgba(0,0,0,.3); + transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s; +} + .stepy-legend { color: #4080bf; font: bold 1.8em arial; @@ -59,3 +79,8 @@ .stepy-next { float: right } + +.highlight .demo-title { + font-size: 13px; + padding-top: 20px; +} diff --git a/demo/index.html b/demo/index.html index 665ed23..648518a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,48 +12,51 @@ - + + - - - - - + + + +
-A Wizard Plugin
-A Wizard Plugin
+
- You need a form with the right markup as following.
- Each .stepy-step
will became a step.
- The title
of the .stepy-step
will be the headers titles.
- And the .stepy-legend
will be the header title description.
- Inside the .stepy-step
you put your stuffs.
-
+ You need a form with the right markup as following.
+ Each .stepy-step
will became a step.
+ The title
of the .stepy-step
will be the headers titles.
+ And the .stepy-legend
will be the header title description.
+ Inside the .stepy-step
you put your stuffs.
+
<form>
<fieldset title="Step 1" class="stepy-step">
@@ -79,99 +82,102 @@
<input type="submit" class="stepy-finish" />
</form>
-Using the default options.
+Using the default options.
-
$('form').stepy();
@@ -271,6 +277,9 @@
$('.form').stepy({ titleClick: true });
@@ -371,6 +380,9 @@
$('form').stepy({ description: false });
@@ -470,6 +482,9 @@
$('form').stepy({ enter: true });
@@ -568,6 +583,9 @@
$('form').stepy({ finishButton: false });
@@ -667,6 +685,9 @@
$('form').stepy({
finish: function() {
@@ -771,6 +792,9 @@
$('form').stepy({ legend: false });
@@ -870,6 +894,9 @@
$('form').stepy({
next: function(index, totalSteps) {
@@ -972,6 +999,9 @@
$('form').stepy({
back: function(index, totalSteps) {
@@ -1075,6 +1105,9 @@
$('form').stepy({
select: function(index, totalSteps) {
@@ -1179,8 +1212,11 @@
-$('form').stepy({ titleClick: true });
+$('form').stepy({ titleTarget: '#target' });
$('form').stepy({
duration : 400,
@@ -1293,7 +1332,7 @@
-If you don't want a header, you can just change header
to false
and it won't be created.
+ If you don't want a header, you can just change header
to false
and it won't be created.
@@ -1371,6 +1410,9 @@
+
+ Sample:
+
$('form').stepy({ header: false });
@@ -1383,90 +1425,93 @@
-The class to find the back button inside each step.
+ The class to find the back button inside each step.
-
-
-
+
+
-
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
+
+
+
+
- back
- next
-
+ back
+ next
+
-
-
+
+
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
- back
- next
+ back
+ next
-
-
-
+
+
+
+
+ Sample:
+
$('form').stepy({ backButton: '.stepy-back' });
@@ -1484,85 +1529,88 @@
-
-
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
- back
- next
-
+ back
+ next
+
-
-
+
+
-
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
+
+
+
+
- back
- next
-
+ back
+ next
+
-
-
+
+
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
- back
- next
+ back
+ next
-
-
-
+
+
+
+
+ Sample:
+
$('form').stepy({ nextButton: '.stepy-next' });
@@ -1579,80 +1627,83 @@
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
- back
- next
+ back
+ next
-
-
+
+
+
+ Sample:
+
$('form').stepy({ nextButton: '.stepy-next' });
@@ -1669,80 +1720,83 @@
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
- back
- next
+ back
+ next
-
-
+
+
+
+ Sample:
+
$('form').stepy({ nextButton: '.stepy-next' });
@@ -1759,80 +1813,83 @@
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
- back
- next
+ back
+ next
-
-
+
+
+
+ Sample:
+
$('form').stepy({ nextButton: '.stepy-next' });
@@ -1841,7 +1898,7 @@
- Options:
+ Options
@@ -1930,7 +1987,7 @@
- Changing the settings globally:
+ Changing the settings globally
@@ -1938,6 +1995,9 @@
+
+ Sample:
+
$.fn.stepy.defaults.validate = true;
$.fn.stepy.defaults.titleClick = true;
@@ -1947,27 +2007,33 @@
- Functions:
+ Functions
-
+
+
+ Sample:
+
$('form').stepy('step');
- Goes to the given step.
+Goes to the given step.
-
+
+
+ Sample:
+
$('form').stepy('destroy');
- Destroy the Stepy's bind and gives you the raw element before it.
+Destroy the Stepy's bind and gives you the raw element before it.