Hi there,
I've been struggling with how to insert a slider control into the lightbox. The slider happens to be the slider offered on this website so I figured there shouldn't be too much problems with compatibility. So, knowing this control isn't in the default list of controls, I decided to create my own personalized control using the tips shown in the custom_editor sample.
Here’s the code I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script src="js/scheduler/codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scheduler/codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
<script src="js/scheduler/codebase/ext/dhtmlxscheduler_multiselect.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/slider/dhtmlxSlider/codebase/dhtmlxslider.css">
<script src="js/slider/dhtmlxSlider/codebase/dhtmlxcommon.js"></script>
<script src="js/slider/dhtmlxSlider/codebase/dhtmlxslider.js"></script>
<script src="js/slider/dhtmlxSlider/codebase/ext/dhtmlxslider_start.js"></script>
<!-- <script src="js/scheduler/codebase/ext/dhtmlxscheduler_collision.js" type="text/javascript" charset="utf-8"></script> -->
<link rel="stylesheet" href="js/scheduler/codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
var sections = scheduler.serverList("listeEmployes");
/*
var sld = new dhtmlxSlider("dhx_slider", {
size:80,
skin: "ball",
vertical:false,
step:1,
min:1,
max:100,
value:50
});
sld.init();*/
scheduler.form_blocks["slider"] = {
render:function(sns){
return "<div class='dhx_slider' style='height:100px;'>" +
"<script type='text\/javascript'>window.dhx_globalImgPath='js\/slider\/dhtmlxSlider\/codebase\/imgs\/';<\/script>" +
"<input class='dhtmlxSlider' id='slider' name='slider' skin='ball' style='width:200px' " +
"min='1' max='200' step='1' value='10'>" +
//"<script>" +
//"var sld = new dhtmlxSlider(null, 100);" +
//"sld.linkTo('slider');" +
//"sld.init();" +
//"<\/script>" +
"</div>";
},
set_value:function(node,value,ev){
node.childNodes[0].value = value||"";
//node.childNodes[1].value=value||"";
//node.childNodes[4].value=ev.details||"";
},
get_value:function(node,ev){
//ev.location = node.childNodes[4].value;
return node.childNodes[0].value;
},
focus:function(node){
//var a=node.childNodes[1]; a.select(); a.focus();
}
}
scheduler.locale.labels.employe_tab = "Employés";
scheduler.locale.labels.day_tab = "Jour";
scheduler.locale.labels.week_tab = "Semaine";
scheduler.locale.labels.month_tab = "Mois";
scheduler.locale.labels.today_button = "Aujourd'hui";
scheduler.locale.labels.section_empDest="À";
scheduler.locale.labels.section_empOrigine="De";
scheduler.locale.labels.section_empCC="CC";
scheduler.locale.labels.section_Client="Client";
scheduler.locale.labels.section_Division="Division";
scheduler.locale.labels.section_time="Durée";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.config.first_hour=8;
//scheduler.locale.labels.section_type = "Personne";
//
scheduler.config.lightbox.sections=[
{name:"description", height:72, map_to:"Description", type:"textarea" , focus:true},
{name:"pourcentSlider", height:72, map_to:"PrcComplete", type:"slider"},
//{name:"etiquette", height:43, type:"textarea", map_to:"Etiquette"},
{name:"empDest", height:21, type:"select", map_to:"ANoPersonne", options:scheduler.serverList("listeEmployes")},
{name:"empOrigine", height:21, type:"select", map_to:"DeNoPersonne", options:scheduler.serverList("listeEmployes")},
{name:"empCC", height:72, type:"multiselect", map_to:"NoPersonne", options:scheduler.serverList("listeCC"), script_url:"calendrierConnecteur.php", vertical:"false"},
{name:"Client", height:21, type:"select", map_to:"NoClient", options:scheduler.serverList("listeClients")},
{name:"Division", height:21, type:"select", map_to:"NoDivision", options:scheduler.serverList("listeDivisions")},
{name:"time", height:72, type:"time", map_to:"auto"}
]
scheduler.createUnitsView({
name:"employe",
property:"ANoPersonne",
list:sections
});
//scheduler.locale.labels.section_personne="Personne";
//scheduler.locale.labels.section_etiquette="Titre";
//scheduler.config.details_on_create=true;
//scheduler.config.details_on_dblclick=true;
scheduler.config.multi_day = true;
scheduler.init('scheduler_here',new Date(2010,09,27),"employe");
//scheduler.setLoadMode("month")
scheduler.load("calendrierConnecteur.php");
var dp = new dataProcessor("calendrierConnecteur.php");
dp.enableUTFencoding(false);
dp.init(scheduler);
}
</script>
</head>
<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button" name="today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="employe_tab" style="right:280px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
</html>However, the only thing I see happens to be a textbox with the field’s value in it. This means the binding, at least, works correctly (which is still a start I guess). I also tried to copy the render code in a blank test page set in the same directory with the same includes and the slider appears without any problems. What exactly am I doing wrong here?
Thanks in advance
