NEW : add iselect , display a list with options

This commit is contained in:
Dany De Bontridder 2017-12-02 23:20:21 +01:00
parent 0097ba431d
commit 349aa8f856
3 changed files with 220 additions and 3 deletions

View file

@ -562,8 +562,9 @@ div.autocomplete {
margin:0px;
padding:1px;
text-align:left;
position:absolute;
width:375px;
position:relative;
top:-3px;
width:377px;
}
div.autocomplete em {
color:#0000FF;
@ -573,6 +574,7 @@ div.autocomplete ul {
list-style-type:none;
background-color:#FFFFFF;
border:1px solid #888;
width: 375px;
margin:0px;
padding:0px;
}
@ -859,7 +861,7 @@ box-shadow: 10px 10px 5px #888;
div.inner_box {
background-color: #DCE1EF;
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: OpenSansRegular;
font-family: 'OpenSansRegular';
/*! font-family: 'SansationLight'; */
/*! padding:2px; */
margin:0px;
@ -2151,4 +2153,39 @@ div.content a.arrow {
.label_item {
width: 500px;
display:block;
}
/*
* Select box : list of actions
*/
.select_box {
border:solid 0.5px darkblue;
background:white;
width:455px;
max-width:250px;
position:relative;
z-index:3;
padding:3px;
margin:0px;
margin-top:2px;
display:none;
}
div.select_box ul {
list-style:none;
padding:2px;
margin:1px;
width:100%;
}
div.select_box ul li {
padding-top:2px;
padding-bottom:2px;
margin:2px;
}
div.select_box a {
text-decoration:none;
color : darkblue;
display:block;
}
div.select_box a:hover,div.select_box ul li:hover {
background-color : lightgoldenrodyellow;
color:brown;
}

View file

@ -0,0 +1,127 @@
<?php
/*
* This file is part of NOALYSS.
*
* NOALYSS is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* NOALYSS is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with NOALYSS; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
// Copyright Author Dany De Bontridder danydb@aevalys.eu
class Select_Box
{
var $id;
var $item;
private $cnt;
var $default_value;
/**
* Default constructor
* @param type $p_id javascript DOMid
* @param type $value Label to display
*
* @example test-iselect-button.php
*/
function __construct($p_id, $value)
{
$this->id=$p_id;
$this->item=array();
$this->value=$value;
$this->cnt=0;
$this->default_value=-1;
$this->style_box="";
}
function input()
{
$javascript=sprintf('$("%s_bt").onclick=function() {
try {
var newDiv=$("select_box%s");
var pos=$("%s_bt").cumulativeOffset();
newDiv.setStyle({display:"block",position:"absolute",top:pos.top+25+"px",left:pos.left+5+"px"});
} catch(e) {
alert(e.message);
}
}
', $this->id, $this->id, $this->id, $this->id);
// display the button
printf('<input type="button" id="%s_bt" value="%s &#x25BE;">',
$this->id, $this->value);
printf('<input type="hidden" id="%s" name="%s" value="%s">', $this->id,
$this->id, $this->default_value);
printf('<div class="select_box" id="select_box%s" style="%s">',
$this->id, $this->style_box);
// Print the list of possible options
echo "<ul>";
for ($i=0; $i<count($this->item); $i++)
{
if ($this->item[$i]['type']=="url")
{
printf('<li><a href="%s">%s</a></li>', $this->item[$i]['url'],
$this->item[$i]['label']);
}
else // For javascript
if ($this->item[$i]['type']=="javascript")
{
printf('<li><a href="javascript:void(0)" onclick="%s">%s</a></li>',
$this->item[$i]['javascript'], $this->item[$i]['label']);
}
else if ($this->item[$i]['type']=="value")
{
printf('<li><a href="javascript:void(0)" onclick="%s">%s</a></li>',
$this->item[$i]['javascript'], $this->item[$i]['label']);
}
}
echo "</ul>";
echo "</div>";
// javascript : onclick on button
echo "<script>";
echo $javascript;
echo "</script>";
}
function add_url($label, $url)
{
$this->item[$this->cnt]['label']=$label;
$this->item[$this->cnt]['url']=$url;
$this->item[$this->cnt]['type']="url";
$this->cnt++;
}
function add_javascript($label, $javascript)
{
$this->item[$this->cnt]['label']=$label;
$this->item[$this->cnt]['javascript']=$javascript.";$('select_box{$this->id}').hide()";
$this->item[$this->cnt]['type']="javascript";
$this->cnt++;
}
function add_value($label, $value)
{
$this->item[$this->cnt]['label']=$label;
$this->item[$this->cnt]['update']=$value;
$this->item[$this->cnt]['javascript']=sprintf(" $('%s').value='%s';$('%s_bt').value='%s';$('select_box%s').hide()",
$this->id, $value, $this->id, $label, $this->id);
$this->item[$this->cnt]['type']='value';
$this->cnt++;
}
}

View file

@ -0,0 +1,53 @@
<html>
<head>
<script src="prototype.js"></script>
<style>
.select_box {
border:solid 0.5px darkblue;
background:white;
width:455px;
max-width:250px;
position:relative;
z-index:3;
padding:3px;
margin:0px;
display:none;
top:-17px;
}
div.select_box ul {
list-style:none;
padding:2px;
margin:1px;
width:100%;
}
div.select_box ul li {
padding-top:2px;
padding-bottom:2px;
margin:2px;
}
div.select_box a {
text-decoration:none;
color : darkblue;
}
div.select_box a:hover,div.select_box ul li:hover {
background-color : blue;
color:lightgrey;
}
</style>
</head>
<body>
<?php
require NOALYSS_INCLUDE.'/lib/select_box.class.php';
$a=new Select_Box("test","click me !");
$a->add_url("List","?id=5");
$a->add_javascript("Hello","alert('hello')");
$a->add_value("Value = 10",10);
$a->add_value("Value = 1",1);
$a->add_value("Value = 15",15);
echo $a->input();
?>
</body>