Project

General

Profile

Feature #306

add a method by which you can add a class identifier to an element

Added by Wouter Moerdijk almost 13 years ago. Updated almost 13 years ago.

Status:
Closed
Priority:
Normal
Assignee:
-
Start date:
05/23/2011
Due date:
% Done:

0%

Estimated time:
Browser (if web client):

Description

It would be great if you can add a class identifier as a sting value to an element. This would allow for clientside scripts to target a group of elements that have the same classname. As an example we could have something like:


plugins.WebClientUtils.setClassIdentifier(elements.yourElement, 'classname string');

which would turn a tag like:

<div id="sv_79E3F5AB_96ED_4AD2_8CD4_14BBADBB0AE2" class="tabpanel" tabindex="-1" style="...">

into:

<div id="sv_79E3F5AB_96ED_4AD2_8CD4_14BBADBB0AE2" class="tabpanel myclassname1" tabindex="-1" style="...">

The user-set 'myclassname1' can then be used to target all elements with that classname. -> e.g. "make all elements with class 'myclassname1' 80 pixels wide" = $('.myclassname1').css('width','80px');

History

#1

Updated by P Bakker almost 13 years ago

If this gets added to the plugin, it's vital to point out that the classnames that users add with it need to be properly made unique, in order to prevent clashes with current and future styleclassnames used by Servoy.

P.

#2

Updated by Wouter Moerdijk almost 13 years ago

This does not have to be a problem because the class would only be used to target the element. If - even in the future - Servoy uses the same classname, you can still target it in the same way.

If Servoy on the other hand is worried about this your could also create your own attribute. This might even be better since you can have an attribute-type reperesent what you want to do.

For example:

plugins.WebClientUtils.setAttribute(elements.yourElement, 'solutionID','12345');
plugins.WebClientUtils.setAttribute(elements.yourElement, 'solutionClass','myClassName1');

Would generate:

<div id="sv_79E3F5AB_96ED_4AD2_8CD4_14BBADBB0AE2" class="tabpanel" solutionID="12345" solutionClass="myClassName1" tabindex="-1" style="...">

and can be targeted like:

$("[solutionID=12345]").css('width','80px');

This way you do not touch either the 'id' or the 'class' attribute.

#3

Updated by Patrick Talbot almost 13 years ago

Beware that when you create 'special' attributes like this, then your HTML will not validate.

#4

Updated by Wouter Moerdijk almost 13 years ago

It does not validate because W3C might come up with a new attribute and that might break your code. That said html5 is going to provide a data attribute type for legal custom attributes (like data-myattr="foo") so maybe we could using that now and be safe from future name collisions. Other than that I do not see the problem with the validation.

#5

Updated by Patrick Talbot almost 13 years ago

Validation is especially important for SEO, so it will clearly be an issue for some.
As a general rule, inventing new HTML attribute is a very bad idea.

#6

Updated by Wouter Moerdijk almost 13 years ago

Ok, so taking both considerations into account (unique futureproof classnames + strict validation) you would end-up with a function to add a custom classname AND prefixes it by default with a string that will make it unique for any future Servoy versions. So

plugins.WebClientUtils.setClassIdentifier(elements.yourElement, 'myClassName1'); (my initial example)

can be transformed into

<div id="..." class="field WebClientUtils_myClassName1"></div>

#7

Updated by Patrick Talbot almost 13 years ago

  • Status changed from New to Closed

setExtraCssClass() and removeCssClass() methods added to v1.1.3

Also available in: Atom PDF