This time I will share jQuery Plugin and tutorial about Beautiful URL Input Plugin With jQuery – Website Input, hope it will help you in programming stack.
Website Input is a tiny jQuery plugin to create a beautiful URL input field that automatically fetches and displays the Favicon (site logo) inside the input based on the website URL you provide.
How to use it:
1. Download the plugin and put the JavaScript file jquery.website-input.js
after jQuery.
2 |
$ npm i jquery-website-input |
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/jquery.website-input.js" ></ script > |
2. Create a normal input field for the website input.
1 |
< input type = "text" class = "website-input" /> |
3. Initialize the plugin and determine the initial website URL.
1 |
$(document).ready( function () { |
2 |
$( '.website-input' ).websiteInput({ |
3 |
initValue: 'jqueryscript.net' |
4. Get the website URL you just typed.
1 |
$(document).ready( function () { |
2 |
$( '.website-input' ).websiteInput({ |
3 |
initValue: 'jqueryscript.net' , |
5. Override the default styles of the website input.
01 |
$websiteInput__wrapper = $(<div class= "wi__wrapper" > ).css({ |
04 |
}).appendTo($( '.container' )) |
05 |
$websiteInput__input = $( this ).css({ |
07 |
border: '1px solid #B0BAC8' , |
08 |
padding: '.5em .75em' , |
13 |
fontFamily: 'Arial, Helvetica, sans-serif' , |
15 |
}).appendTo($websiteInput__wrapper) |
16 |
$websiteInput__website = $(<div class= "wi__website" > ).css({ |
21 |
backgroundColor: '#f4f4f4' , |
24 |
}).appendTo($websiteInput__wrapper) |
25 |
$websiteInput__website_wrapper = $(<div class= "wi__website_wrapper" > ).css({ |
28 |
}).appendTo($websiteInput__website) |
29 |
$websiteInput__website_logo_wrapper = $(<div class= "wi__website_logo_wrapper" > ).css({ |
32 |
borderColor: '#B0BAC8' , |
33 |
backgroundColor: '#fff' , |
35 |
boxShadow: '0 .125rem .25rem rgba(0,0,0,.075)' , |
37 |
transition: 'border .2s ease-out' |
38 |
}).appendTo($websiteInput__website_wrapper) |
39 |
$websiteInput__website_logo = $(<img width= "16" height= "16" src= "" alt= "favicon" > ).appendTo($websiteInput__website_logo_wrapper) |
40 |
$websiteInput__website_edit = $(<svg width= "16" height= "16" viewBox= "0 0 24 24" xmlns= "http://www.w3.org/2000/svg" ><path d= "M8.394 19.75l-5.481 1.308 1.239-5.551L14.758 4.9l4.243 4.243L8.394 19.749v.001zM6.98 15.506l1.414 1.414 7.779-7.778-1.415-1.415-7.778 7.779zM19.708 1.364l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242 2.12-2.122a1 1 0 0 1 1.415 0z" fill= "#4F8DF9" fill-rule= "nonzero" fill-opacity= "1" ></path></svg> ).appendTo($websiteInput__website_logo_wrapper) |
41 |
$websiteInput__website_text = $(<span class= "wi__text" > ).css({ |
45 |
fontFamily: 'Arial, Helvetica, sans-serif' , |
47 |
}).appendTo($websiteInput__website_wrapper) |
48 |
$websiteInput__website_close = $(<div class= "wi__close" ><svg width= "16" height= "16" viewBox= "0 0 24 24" xmlns= "http://www.w3.org/2000/svg" ><path d= "M17.97 6.657a8.003 8.003 0 0 0-11.313 0 8.003 8.003 0 0 0 0 11.314 8.003 8.003 0 0 0 11.314 0 8.003 8.003 0 0 0 0-11.314zm-3.394 9.05l-2.262-2.262-2.263 2.263-1.131-1.132 2.262-2.262L8.92 10.05 10.05 8.92l2.263 2.262 2.262-2.262 1.132 1.131-2.263 2.263 2.263 2.262-1.132 1.132z" fill= "currentColor" fill-rule= "nonzero" ></path></svg></div> ).css({ |
52 |
}).appendTo($websiteInput__website) |