{"id":22487095,"url":"https://github.com/peachananr/label_better","last_synced_at":"2025-08-02T19:33:55.130Z","repository":{"id":12009578,"uuid":"14590413","full_name":"peachananr/label_better","owner":"peachananr","description":"Label your form input like a boss with beautiful animation and without taking up space","archived":false,"fork":false,"pushed_at":"2020-05-08T01:23:28.000Z","size":18,"stargazers_count":517,"open_issues_count":8,"forks_count":104,"subscribers_count":35,"default_branch":"master","last_synced_at":"2024-04-06T01:52:45.823Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://peachananr.github.io/label_better/demo/demo.html","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/peachananr.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":"2013-11-21T14:55:09.000Z","updated_at":"2024-02-05T18:42:36.000Z","dependencies_parsed_at":"2022-08-30T17:20:46.388Z","dependency_job_id":null,"html_url":"https://github.com/peachananr/label_better","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Flabel_better","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Flabel_better/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Flabel_better/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peachananr%2Flabel_better/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peachananr","download_url":"https://codeload.github.com/peachananr/label_better/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500212,"owners_count":17930009,"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-12-06T17:15:52.743Z","updated_at":"2024-12-06T17:16:27.025Z","avatar_url":"https://github.com/peachananr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","10. 表单处理"],"sub_categories":["10.1 表单验证(Form Validator)/表单提示"],"readme":"#Label Better by Pete R.\nLabel your form input like a boss with beautiful animation and without taking up space\nCreated by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com)\n\nLicense: [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/deed.en_US)\n\n\n## Demo\n[View demo](http://peachananr.github.io/label_better/demo/demo.html)\n\n## Compatibility\nModern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.\n\n## Basic Usage\njQuery Label Better will let you create a beautiful unobtrusive label for your form's input fields. The uniqueness about this plugin is that all you have to do is add a placeholder text, and we will show the label only when the user needs it. \n\nTo add this to your website, simply include the latest jQuery library together with `jquery.label_better.js` into your document's `\u003chead\u003e`, and simply call the function like this:\n\n````javascript\n  $(\"input.label_better\").label_better({\n    position: \"top\", // This will let you define the position where the label will appear when the user clicked on the input fields. Acceptable options are \"top\", \"bottom\", \"left\" and \"right\". Default value is \"top\".\n    animationTime: 500, // This will let you control the animation speed when the label appear. This option accepts value in milliseconds. The default value is 500.\n    easing: \"ease-in-out\", // This option will let you define the CSS easing you would like to see animating the label. The option accepts all default CSS easing such as \"linear\", \"ease\" etc. Another extra option is you can use is \"bounce\". The default value is \"ease-in-out\".\n    offset: 20, // You can add more spacing between the input and the label. This option accepts value in pixels (without the unit). The default value is 20.\n    hidePlaceholderOnFocus: true // The default placeholder text will hide on focus\n  });\n````\n## Markups\n\nWith this plugin, you can use a markup to override the global options defined in the function above. Here are all the markups you can use to customize your experience to your liking:\n\n### data-position\nThis markup will let you define the position of each input field individually.\n\n````html\n\u003cinput type=\"text\" class=\"label_better\" data-position=\"top\" placeholder=\"Username\"\u003e\n\u003cinput type=\"text\" class=\"label_better\" data-position=\"right\" placeholder=\"Email Address\"\u003e\n````\n\n### data-new-placeholder\nThere may be times when you want your placeholder text to be different from the label text. You can do that by defining the new placeholder text as follows and this value will be shown as the label instead.\n\n````html\n\u003cinput type=\"text\" class=\"label_better\" data-new-placeholder=\"Type your username\" placeholder=\"Username\"\u003e\n\u003cinput type=\"text\" class=\"label_better\" data-new-placeholder=\"Type your email address\" placeholder=\"Email Address\"\u003e\n````\n\nAnd that's all for Label Better plugin. Stay tuned for more updates.\n\nIf you want to see more of my plugins, visit [The Pete Design](http://www.thepetedesign.com/#design), or follow me on [Twitter](http://www.twitter.com/peachananr) and [Github](http://www.github.com/peachananr).\n\n## Other Resources\n- [Tutorial](http://www.onextrapixel.com/2014/01/07/label-your-input-fields-like-a-boss-with-label_better-js/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeachananr%2Flabel_better","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeachananr%2Flabel_better","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeachananr%2Flabel_better/lists"}