{"id":16609835,"url":"https://github.com/nikku/jquery-bootstrap-scripting","last_synced_at":"2025-10-29T17:30:37.871Z","repository":{"id":58222274,"uuid":"2322510","full_name":"nikku/jquery-bootstrap-scripting","owner":"nikku","description":"A number of jQuery plugins to ease scripting of bootstrap featured pages.","archived":true,"fork":false,"pushed_at":"2024-01-12T21:40:42.000Z","size":197,"stargazers_count":278,"open_issues_count":10,"forks_count":49,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-02-11T19:36:24.005Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://nikku.github.com/jquery-bootstrap-scripting","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nikku.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-09-04T09:26:54.000Z","updated_at":"2024-03-29T03:31:22.000Z","dependencies_parsed_at":"2022-08-31T02:51:55.207Z","dependency_job_id":null,"html_url":"https://github.com/nikku/jquery-bootstrap-scripting","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fjquery-bootstrap-scripting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fjquery-bootstrap-scripting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fjquery-bootstrap-scripting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikku%2Fjquery-bootstrap-scripting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikku","download_url":"https://codeload.github.com/nikku/jquery-bootstrap-scripting/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238856037,"owners_count":19542131,"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":[],"created_at":"2024-10-12T01:29:17.839Z","updated_at":"2025-10-29T17:30:32.516Z","avatar_url":"https://github.com/nikku.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Contains some nice [jQuery](http://jquery.com) plugins to make working with the facilities provided by the \n[bootstrap](http://twitter.github.com/bootstrap) CSS framework more fun.\n\n# Dialog Two, a jQuery dialog plugin based on the bootstrap modal dialog\n\n`jquery.dialog2.js` uses the modal dialog provided by bootstrap and provides a controlable dialog functionality for web pages as a [jQuery](http://jquery.com) plugin. \n\n## Features\n\n* Ajax content\n* Ajax links and form submission in the dialog\n* Loading indicator\n* Localization\n* No dependencies to jQuery.UI\n* Control via [`html` markup](#let-the-markup-rule) possible\n\n## Dependencies\n\n* [jQuery.form](http://jquery.malsup.com/form/) plugin \u003e= 2.8 for ajax form submit \n* [jQuery.controls](https://github.com/Nikku/jquery-controls) plugin  \u003e= 0.9 for ajax link binding support\n* [Bootstrap styles](http://twitter.github.com/bootstrap) 2.x to look nice\n\n## Migrating from earlier versions\n* Migration from 1.x:\n    * You will need bootstrap 2.x on your page\n    * Change your css markup for forms according to the bootstrap 2.0 (buttons always require `.btn`, `.primary` to `.btn-primary`, `.actions` to `.form-actions` and so forth. \n\n## Controlling a dialog with JavaScript\n\n* `$(selector | element | text).dialog2(options)` creates a dialog with the given `options` from an element or selector. If the selected element exists, it will be turned into the body of the newly created dialog.\n* `$(\".selector\").dialog2(\"method\", argument1, argument2, ...)` executes an API method (see below)\n\n### Options\n\nThe `dialog2()` method accepts an *options object*:\n\n```javascript\n{\n  id: \"my-dialog\", // id which (if specified) will be added to the dialog to make it accessible later \n  autoOpen: true | false, // Should the dialog be automatically opened?\n  title: \"Title of the dialog\", \n  buttons: {\n    button1Label: callback | object, \n    button2Label: callback, \n    ...\n  }, \n  closeOnOverlayClick: true | false, // Should the dialog be closed on overlay click?\n  closeOnEscape: true | false, // Should the dialog be closed if [ESCAPE] key is pressed?\n  removeOnClose: true | false, // Should the dialog be removed from the document when it is closed?\n  showCloseHandle: true | false, // Should a close handle be shown?\n  initialLoadText: \"\" // Text to be displayed when the dialogs contents are loaded\n}\n```\n\nWhen adding buttons to a dialog, a *button options object* can be passed to it instead of a callback:\n\n```javascript\n{\n  click: function() { }, // callback to execute on button click (has this bound to the dialog)\n  primary: true | false, // if this button is the primary button (will be styled accordingly)\n  type: \"info\" // basically additional classes to be attached to the button\n}\n```\n\n### API\n\n* `open()`: Opens the dialog (essentially shows it if it is still hidden)\n* `close()`: Closes the dialog and removes it from the document (if configured)\n* `options(options)`: Applies the given options to the dialog\n* `addButton(label, options)`: Adds a button with the given `label` to the dialog. If `options` is a function binds the click or \"enter\" action of the button to it. Accepts a *button options object* too to customize the look and feel of the button.\n* `removeButton(label)`: Removes the button with the specified `label` from the list of buttons\n\n## Let the markup rule\n\nThe dialog has some distinct features which make it totally controllable via `html` markup. \n\n* When the [jquery-controls](https://github.com/Nikku/jquery-controls) plugin is added to a website, `a.open-dialog` links will open a dialog which shows in page or ajax content.\n* If the dialog content updates, a dialog will change its title to the contents of the first `h1` element found in it. Additionally its buttons are updated based on the buttons found inside the `.actions` element of the dialog content. \n* `.ajax` forms will be submitted asynchronously and the result will be displayed in the dialog.\n\n## Changing the UI\n\n### Dialog width\n\nOverride the boostrap styles for `.modal` which are (as of version 1.3)\n\n```css\n.modal {\n    ...\n    width: 560px;\n    top: 50%;\n    margin: -250px 0 0 -250px;\n}\n````\n\nwith your new styles for wide dialogs \n\n```css\n.wide-modal {\n    ...\n    top: 20%;\n    width: 800px;\n    margin: 0 0 0 -400px; /* -1 * (width / 2) */ \n}\n```\n\nand add the class `wide-modal` to big dialogs. \n\n## Extending the dialog\n\nA user may plug into the dialog behaviour by listening to events, namely \n\n```\ndialog2.ajax-start: fired right before an ajax request is started, \ndialog2.ajax-complete: fired when an ajax request was executed successfully, \ndialog2.content-update: when the dialogs contents are updated (after ajax-complete)\n```\n\nThe preferred way to register handlers on these events is [$().delegate](http://api.jquery.com/delegate/). \nThe code snipped shown below illustrates how this behaviour can be used to implement a *auto-close* ability for a dialog (see issue #19).\n\n```javascript\n\n// If a a.auto-close is contained in the dialogs content, \n// the dialog will close itself automatically and (optionally)\n// redirect to a new page\n$(document).delegate(\".modal\", \"dialog2.content-update\", function() { \n     // got the dialog as this object. Do something with it!\n     \n    var e = $(this);\n    \n    var autoclose = e.find(\"a.auto-close\");\n    if (autoclose.length \u003e 0) {\n        e.dialog(\"close\");\n        \n        var href = autoclose.attr('href');\n        if (href) {\n            window.location.href = href;\n        }\n    }\n});\n\n```\n\n## Check out some examples\n\nGo to [the plugins web page](http://nikku.github.com/jquery-bootstrap-scripting/) to check out a number of examples on usage.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikku%2Fjquery-bootstrap-scripting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikku%2Fjquery-bootstrap-scripting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikku%2Fjquery-bootstrap-scripting/lists"}