https://github.com/allenan/isearchbar

An iOS7-style searchbar plugin for jQuery
https://github.com/allenan/isearchbar

Last synced: 22 days ago
JSON representation

An iOS7-style searchbar plugin for jQuery

• Host: GitHub
• URL: https://github.com/allenan/isearchbar
• Owner: allenan
• Created: 2013-10-23T14:44:15.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-29T21:26:48.000Z (about 11 years ago)
• Last Synced: 2024-11-08T10:52:00.628Z (3 months ago)
• Language: CSS
• Size: 97.7 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# iSearchbar

iSearchbar is a jQuery plugin designed to turn ordinary inputs into searchbars styled after Apple's iOS7 searchbars. This plugin was created for [ASAPer - Urgent Messenger](https://www.asaper.com) and has been extracted and open-sourced.

![iSearchbar Empty](https://s3.amazonaws.com/isearchbar/isearchbar-empty.png)

![iSearchbar Active](https://s3.amazonaws.com/isearchbar/isearchbar-active.png)

## Getting Started

This plugin requires jQuery `>= 1.7.0`

``

Be sure to link to both the javascript and css files in the dist folder:

``

``

It's also recommended to use [normalize.css](http://necolas.github.io/normalize.css/) or another css reset file to alleviate some cross-browser issues.

``

## Usage Examples

To use iSearchbar, simply add the class "isearchbar" to any inputs you want to turn into searchbars.

```



  



```


Then, call the method `.iSearchbar` on those inputs with jQuery like this:

```

  $(function() {

    $(".isearchbar").iSearchbar();

  });

```

### Options

You can pass the following options to `.iSearchbar` to customize how the plugin looks and works.

```

  $(function() {

    $(".isearchbar").iSearchbar({

    	'placeholderText': 'Search...',

    	'cancelText': 'Cancel',

    	'cancelClass': 'a-custom-class another-custom-class'

    });

  });

```

## Contributing

Before sending a pull request remember to follow [jQuery Core Style Guide](http://contribute.jquery.org/style-guide/js/).

1. Fork it!

2. Create your feature branch: `git checkout -b my-new-feature`

3. Make your changes on the `src` folder, never on the `dist` folder.

4. Commit your changes: `git commit -m 'Add some feature'`

5. Push to the branch: `git push origin my-new-feature`

6. Submit a pull request :D

### Todo:

- [ ] placeholder animation

- cross-browser compatibility

  - [x] Chrome

  - [x] Safari

  - [ ] Firefox

  - [ ] IE (?)

- [ ] testing

## History

* v0.0.1 October 24, 2013

	* initial release