{"id":18828428,"url":"https://github.com/dealfonso/jq-wizard","last_synced_at":"2026-05-10T06:38:16.342Z","repository":{"id":38280798,"uuid":"299229091","full_name":"dealfonso/jq-wizard","owner":"dealfonso","description":"Easily create self-managed wizards using jquery (and bootstrap)","archived":false,"fork":false,"pushed_at":"2020-09-30T08:23:36.000Z","size":25,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-30T06:11:54.582Z","etag":null,"topics":["bootstrap","javascript","jquery","self-managed","wizard","wizard-steps"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dealfonso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-28T07:43:19.000Z","updated_at":"2022-06-23T04:20:27.000Z","dependencies_parsed_at":"2022-08-18T17:10:40.438Z","dependency_job_id":null,"html_url":"https://github.com/dealfonso/jq-wizard","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjq-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjq-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjq-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dealfonso%2Fjq-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dealfonso","download_url":"https://codeload.github.com/dealfonso/jq-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239763648,"owners_count":19692812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","javascript","jquery","self-managed","wizard","wizard-steps"],"created_at":"2024-11-08T01:25:08.065Z","updated_at":"2026-01-22T18:30:14.849Z","avatar_url":"https://github.com/dealfonso.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Wizard (jq-wizard)\n\nThis is a component to create seld-managed wizards, using jQuery.\n\nIt is easy to use in your projects, as you just need to define each of your steps inside a div with a class, add the \"next\" and \"previous\" buttons, and call the `wizard()` function:\n```html\n\u003cdiv id='mywizard'\u003e\n    \u003cdiv class='wizard-tab' stepname='step1'\u003e\n        \u003ch1\u003eThis is the first step\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv class='wizard-tab' stepname='step2'\u003e\n        \u003ch1\u003eThis is the second step\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv class='wizard-tab' stepname='step3'\u003e\n        \u003ch1\u003eThis is the last step\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        \u003cbutton class='btn btn-primary btn-prev'\u003ePrev\u003c/button\u003e\n        \u003cbutton class='btn btn-primary btn-next'\u003eNext\u003c/button\u003e\n    \u003c/div\u003e\n\u003c/div\u003e      \n\u003cscript\u003e\n$(function() {\n    $('#mywizard').wizard();\n})\n\u003c/script\u003e\n```\n\n## Examples\n\nYou have several examples in this folder (some of them use bootstrap):\n- *simple.html* that contains a div-based example ([See it in action at codepen](https://codepen.io/dealfonso/pen/PoNgjKW)).\n- *modal.html* that contains a simple wizard inside a bootstrap modal ([See it in action at codepen](https://codepen.io/dealfonso/pen/XWdQgzO)).\n- *modalconditional.html* contains an example with a multiple workflow for the wizard ([See it in action at codepen](https://codepen.io/dealfonso/pen/VwaOXEY)).\n- *modalform.html* that contains a full wizard example with tab validation and other features, inside a form that can be submitted to your server ([See it in action at codepen](https://codepen.io/dealfonso/pen/eYZoRVQ)).\n\n## Using\n\nYou need to include `jq-wizard.js` either from your cloned repo, or from a CDN, after jQuery. e.g.:\n\n```html\n    \u003cscript src=\"https://code.jquery.com/jquery-3.4.1.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/dealfonso/jq-wizard@1.0/jq-wizard.js\"\u003e\u003c/script\u003e\n```\n\n## Customization\n\njq-wizard is highly customizable. You just need to pass an object to the \"wizard\" function, that overrides the default values:\n\n```javascript\n    $('#mywizard').wizard({\n        onnext: function(stepname, steppos) { return true },\n        ...\n    })\n```\n\nThe meaning of the values and default values are the next:\n\n   - *onnext*: Function called *before* passing to the next step (will go to next in case that returns true).\n        - Default: `function(stepname, steppos) { return true }`\n   - *onprev*: Function called *before* passing to the prev step (will go to next in case that returns true).\n        - Default: `function(stepname, steppos) { return true }`\n   - *onstep*: Function called when showing a step (if arrived clicking on \"next\" button, will be called *AFTER* onnext or onprev)\n        - Default: `function(stepname, steppos) { return true }`\n   - *onend*: Function called *before* accepting the end click (will execute the default behaviour of the command in case that returns true).\n        - Default: `function(stepname, steppos) { return true }`\n   - *onbegin*: Function called whenever the script \"begin\" is called.\n        - Default: `function() { return true }`\n   - *hidefnc*: Method called when an object has to be hidden (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); maybe you want to set a custom class, instead.\n        - Default: `function($obj) { $obj.hide() }`\n   - *showfnc*: Method called when an object has to be shown (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); maybe you want to set a custom class, instead.\n        - Default: `function($obj) { $obj.show() }`\n   - *stepobject*: Selector to select the step indicators\n        - Default: `.step`\n   - *stepactiveclass*: Class used to mark those steps that have already been done\n        - Default: `active`\n   - *tabselector*: Selector for each tab.\n        - Default: `div.wizard-tab`\n   - *stepnameattr*: Attribute used to provide the name of the step\n        - Default: `stepname`\n   - *autohidenext*: If true, hides \"next\" button if disabled\n        - Default: `true`\n   - *autohideprev*: If true, hides \"prev\" button if disabled\n        - Default: `false`\n   - *autohideend*: If true, hides \"end\" button if disabled\n        - Default: `true`\n   - *autofocus*: If true, automatically sets the focus on the first input INSIDE the tab, when shown.\n        - Default: `true`\n\n## Events\n\nThe wizard also triggers two events, and you can subscribe to them:\n\n   - *jq-wizard.begin*: Called whenever the \"begin\" function is called (it is also triggered when the wizard is created). \n     - Handler: `begin(obj, stepname, steppos)`\n\n   - *jq-wizard.update*: Called whenever the interface is updated (i.e. when the step is shown). It is also triggered when the wizard is created.\n     - Handler: `update(obj, stepname, steppos)`\n\nIn case that you want to receive the events during the creation, you must subscribe to the events before creating the wizard. E.g.:\n\n```javascript\n     $('#mywizard').on('jq-wizard.update', function(obj, stepname, steppos) {\n          console.log(\"interface just updated in step: \", stepname);\n     }).wizard();\n```\n   ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fjq-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdealfonso%2Fjq-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdealfonso%2Fjq-wizard/lists"}