Created
January 4, 2013 16:13
-
-
Save anonymous/4453774 to your computer and use it in GitHub Desktop.
Prototype of editable label and link in HTML.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="./jquery183.js" type="text/javascript"></script> | |
| <style type="text/css"> | |
| input.editable.passive { | |
| border: 1px solid transparent; | |
| border-bottom: 1px solid transparent; | |
| /* Override the default style for disabled=true. */ | |
| font-style: normal; | |
| background: none; | |
| } | |
| input.editable.active { | |
| border: 1px solid silver; | |
| } | |
| input.editable.link.passive { | |
| color: blue; | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| input.editable.link.active { | |
| color: black; | |
| text-decoration: none; | |
| } | |
| input.editable.label.passive { | |
| border-bottom: 1px dashed #6ABE01; | |
| } | |
| input.editable.active { | |
| background: #ffffff; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| window.$ = jQuery; | |
| function validateURL(val){ | |
| return val.substring(0, 7) === "http://" | |
| || val.substring(0, 8) === "https://" | |
| || val.substring(0, 6) === "ftp://"; | |
| } | |
| // this.disabled == true blocks any event (at least triggered by onclick=... etc. | |
| // TBD: Bind by addEventListener() ? | |
| var EditableLink = { | |
| activate: function(){ | |
| $(this).removeClass('passive').addClass('active').focus(); | |
| this.active = true; | |
| this.readOnly = false; | |
| //this.disabled = false; | |
| //alert('activ'); | |
| this.focus(); | |
| //alert(this); | |
| }, | |
| passivate: function(){ | |
| $(this).removeClass('active').addClass('passive'); | |
| this.active = false; | |
| this.readOnly = true; | |
| //this.disabled = true; | |
| //alert('pasiv'); | |
| }, | |
| onclick: function(){ | |
| if( this.active ) return; | |
| if(validateURL(this.value)) | |
| window.open(this.value, '', 'modal=true,alwaysRaised=yes'); | |
| }, | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <h2>Editable label - icon is a link</h2> | |
| <div> | |
| <img src="./icoExternalLink.png" width="16" height="16" alt="Edit the link" | |
| onclick="var url = $(this).parent().children('input.editable.label').first().get(0).value; | |
| if(validateURL(url)) window.open(url, '', 'modal=true,alwaysRaised=yes');" | |
| style="cursor: pointer;" | |
| /> | |
| <input type="text" class="editable label passive" | |
| onfocus="$(this).removeClass('passive').addClass('active');" | |
| onblur ="$(this).removeClass('active').addClass('passive');" | |
| value="http://jboss.org/" | |
| /> | |
| </div> | |
| <h2>Editable link - icon enables edit mode</h2> | |
| <div id="myLink" class="editable link" style="cursor: pointer"> | |
| <img src="./icoEdit.png" width="16" height="16" alt="Edit the link" | |
| onclick="EditableLink.activate.apply( | |
| $(this).parent().children('input.editable.link').first().get(0) | |
| );" | |
| /> | |
| <input type="text" class="editable link passive" | |
| xonfocus="$(this).removeClass('passive').addClass('active');" | |
| onblur ="EditableLink.passivate.apply(this);" | |
| onclick="if(validateURL(this.value) && (!this.active) ){ | |
| window.open(this.value, '', 'modal=true,alwaysRaised=yes'); }" | |
| onselectstart="return this.active;" | |
| value="http://redhat.com/" | |
| /> | |
| </div> | |
| <!-- disabled="<anything>" causes this.disabled == true, and blocks any event! --> | |
| <div onclick="alert('div clicked');"> | |
| <input type="text" onclick="" | |
| value="http://redhat.com/" | |
| /> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment