Giter VIP home page Giter VIP logo

jquery-prompt21's Introduction

jQuery-prompt21

A minimalist jQuery prompt plugin for the 21st Century.

...because prompt() is ugly and sync.

Demo

Available on CDN

This library is available on CDNJS.

Usage

<button class="btn btn-info show-popup">Prompt Popup</button>
<pre class="result">Click the "Prompt Popup" button.</pre>
<div class="popup">
    <form class="form-horizontal">
        <fieldset>

        <!-- Form Name -->
        <legend>Prompt21 Form</legend>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="name.first">First name</label>
          <div class="col-md-6">
          <input id="name.first" name="name.first" type="text" placeholder="" class="form-control input-md" required="" value="Johnny">
          <span class="help-block">Your first name.</span>
          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="name.last">Last name</label>
          <div class="col-md-6">
          <input id="name.last" name="name.last" type="text" placeholder="" class="form-control input-md" value="B.">
          <span class="help-block">Your last name.</span>
          </div>
        </div>

        <!-- Textarea -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="story">Your story</label>
          <div class="col-md-6">
            <textarea class="form-control" id="story" name="story">I'm one of the @jillix developers.</textarea>
          </div>
        </div>

        <!-- Button (Double) -->
        <div class="form-group">
          <label class="col-md-4 control-label" for="cancel"></label>
          <div class="col-md-6">
            <button type="button" id="cancel" class="btn btn-default cancel">Cancel</button>
            <button type="submit" id="save" class="btn btn-success submit">OK</button>
          </div>
        </div>

        </fieldset>
    </form>
</div>
<script src="path/to/jquery.js"></script>
<script src="path/to/jQuery-prompt21.js"></script>
<script>
    var p = $(".popup").prompt21();
    $(".show-popup").on("click", function () {
        p.getData(function (err, data) {
            $(".result").text(JSON.stringify(data, null, 2));
        });
    });
</script>

Documentation

unflattenObject(flat)

Converts a flat object to an unflatten one

Params

  • Object flat: The flat object that should be converted

Return

  • Object Unflatten object

prompt21(opt_options)

Initializes a new instance of Prompt21.

Example:

var p21 = $(".container").prompt21();

Params

  • Object opt_options: The options for Prompt21 instance.
  • cancel (String): The cancel button jQuery selector (default: "button.cancel").
  • showFunc (String): The jQuery function called to show the form (default: "fadeIn").
  • hideFunc (String): The jQuery function called to hide the form (default: "fadeOut").
  • form (String): The form jQuery selector (default: "form").

Return

  • Prompt21 An object containing:
  • getData (Function): The getData function. See below.

getData(callback)

Shows the popup and calls the callback function when the OK button is clicked.

Params

  • Function callback: The callback function.

How to contribute

  1. File an issue in the repository, using the bug tracker, describing the contribution you'd like to make. This will help us to get you started on the right foot.
  2. Fork the project in your account and create a new branch: your-great-feature.
  3. Commit your changes in that branch.
  4. Open a pull request, and reference the initial issue in the pull request message.

License

See the LICENSE file.

jquery-prompt21's People

Contributors

ionicabizau avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.