Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I would like to know how to put watermark on a bandbox. I used c:onBind="jq(this).Watermark('Code', 'gray')" with .js in textbox and worked fine, however, this does not work on the bandbox. Help me :)
When upgrading your version results in compiler errors, there's no way around fixing them manually.
I didn't try your watermark script as I still believe it's obsolete, but I assume you'll understand how the jq selectors work in order to apply it if still needed.
In this updated zkfiddle (which also runs under ZK 5.0.8) I simply set the HTML5 placeholder attribute on the input element in a single line:
<zk xmlns:w="client">
<style>
input::placeholder {
color: gray;
}
</style>
<script>
function initWatermark(wgt, placeholder) {
jq(wgt).find('input').andSelf().attr('placeholder', placeholder);
}
</script>
<vlayout>
<textbox w:onBind="initWatermark(this, 'Name');"/>
<intbox w:onBind="initWatermark(this, 'Age');"/>
<combobox w:onBind="initWatermark(this, 'Gender');">
<comboitem label="Male"/>
<comboitem label="Female"/>
</combobox>
<bandbox w:onBind="initWatermark(this, 'Other');"/>
</vlayout>
</zk>
I think these kind of watermark plugins are no longer necessary (just to display a placeholder text for empty inputs):
Since version 6.5.0 the InputElements support the placeholder property for HTML5 enabled browsers:
Unless you need to work with very old ZK versions and browsers you can just use it like this (runnable zkfiddle):
<bandbox placeholder="Code"/>
If you still need to use the plugin (old versions or special behaviour only provided by the plugin):
Since you didn't provide which jquery plugin you were trying to integrate I can only guess that the plugin requires you to target an HTML-<input>-element. For combowidgets such as combobox/datebox/bandbox (which consist of multiple dom elements) you have to select the input node explicitely by calling InputWidget.getInputNode()
So this should work (still I couldn't read your Watermark API doc so I can't be 100% sure)
c:onBind="jq(this.getInputNode()).Watermark('Code', 'gray')"
I hope the placeholder is already enough, otherwise you need to check the docs of your 3rd party lib. Or give me a link to the docs so I can read the manual and suggest how ZK can provide the information needed.
I'm using the 5.0.8 version of ZK.
GetInputNode () did not work here. I would like to know if there is any way to update ZK without having to change the lines of code of my project, considering that when updating the version of ZK in the project, it gave several errors in the java code.
If the update is not possible, I'd like to know some solution. Here is the JavaScript used to make the watermark:
(function($) {
var map=new Array();
$.Watermark = {
ShowAll:function(){
for (var i=0;i<map.length;i++){
if(map[i].obj.val()==""){
map[i].obj.val(map[i].text);
map[i].obj.css("color",map[i].WatermarkColor);
}else{
map[i].obj.css("color",map[i].DefaultColor);
}
}
},
HideAll:function(){
for (var i=0;i<map.length;i++){
if(map[i].obj.val()==map[i].text)
map[i].obj.val("");
}
}
}
$.fn.Watermark = function(text,color) {
if(!color)
color="#aaa";
return this.each(
function(){
var input=$(this);
var defaultColor=input.css("color");
map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
function clearMessage(){
if(input.val()==text)
input.val("");
input.css("color",defaultColor);
}
function insertMessage(){
if(input.val().length==0 || input.val()==text){
input.val(text);
input.css("color",color);
}else
input.css("color",defaultColor);
}
input.focus(clearMessage);
input.blur(insertMessage);
input.change(insertMessage);
insertMessage();
}
);
};
})(jQuery);
Asked: 2018-12-04 22:44:23 +0800
Seen: 18 times
Last updated: Dec 17 '18