Single Article

jQuery slider with stars in APEX 3.x

Category APEX and jQuery

Here is a solution on how you can create jQuery slider showing stars in APEX 3.x.
This works also in APEX 4 and you do not need to load separately jQuery libraries.

Load jQuery and jQuery UI library and css in page template header or page HTML header.

Create text field to your page.
Item HTML Table Cell Attributes:

style="padding-left:8px"

Item HTML Form Element Attributes:

style="display:none"

Item Pre Element Text

<div style="padding:4px 0">
<img id="#CURRENT_ITEM_NAME#_IMG" src="#IMAGE_PREFIX#stars&#CURRENT_ITEM_NAME#..gif" alt="" />
</div>

Item Post Element Text

<div id="#CURRENT_ITEM_NAME#_SLIDER" style="width:200px"></div>
<script type="text/javascript">
$(function(){
 $("##CURRENT_ITEM_NAME#_SLIDER").slider({
  range:"min",
  min:1,
  max:5,
  step:1,
  value:$v("#CURRENT_ITEM_NAME#"),
  slide:function(e,u){
   $s("#CURRENT_ITEM_NAME#",u.value);
   $("##CURRENT_ITEM_NAME#_IMG").attr({"src":"#IMAGE_PREFIX#stars"+u.value+".gif"});
  }
 });
});
</script>

And set default value to e.g. 1.

 

See working example.

Comments

No comments yet on this article.

Global Right Column

Search

Archives

Subscribe in a Reader