Retrait SimplyButton
This commit is contained in:
Michael RICOIS
parent
4ea89f6770
commit
2b4257be5b
@ -1,226 +0,0 @@
|
||||
/*--------------------------------------------------------------------------------------------------
|
||||
|
||||
Simply Buttons, version 1.0
|
||||
(c) 2007-2009 Kevin Miller
|
||||
|
||||
This script is freely distributable under the terms of an MIT-style license.
|
||||
|
||||
BUTTON DEFINITIONS
|
||||
|
||||
Edit below at your own risk, everything done here is for a reason for cross browser
|
||||
compatibility so that the buttons will appear identical in the tested browsers.
|
||||
|
||||
Tested on: IE6 IE7 FF(PC/MAC) Safari SafariMobile Opera(PC/MAC)
|
||||
|
||||
--------------------------------------------------------------------------------------------------*/
|
||||
|
||||
button,
|
||||
a.button,
|
||||
a.button:link,
|
||||
a.button:visited {
|
||||
/*
|
||||
Strip down the button and link elements to a base we can work with.
|
||||
*/
|
||||
padding: 0 0 0 0;
|
||||
margin: 0 3px 0 3px;
|
||||
border: none;
|
||||
display: block;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
* html a.button,
|
||||
* html a.button:link,
|
||||
* html a.button:visited {
|
||||
/*
|
||||
IE6 fix to make link fit text.
|
||||
*/
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
button, x:-moz-any-link {
|
||||
/*
|
||||
FF fix to make button spacing even across browsers.
|
||||
*/
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
*:first-child+html button {
|
||||
/*
|
||||
Reset IE7 back to what it was for previous fix.
|
||||
*/
|
||||
margin: 0 3px 0 3px;
|
||||
}
|
||||
|
||||
button span,
|
||||
a.button span,
|
||||
a.button:link span,
|
||||
a.button:visited span {
|
||||
/*
|
||||
Set the span tags to display: block, as they will work our background-image magic.
|
||||
*/
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------------------------------------------
|
||||
|
||||
CUSTOMIZATIONS
|
||||
|
||||
Edit below to change the look and feel of the buttons and even add more classes for
|
||||
different looks and feels.
|
||||
|
||||
--------------------------------------------------------------------------------------------------*/
|
||||
|
||||
button,
|
||||
a.button,
|
||||
a.button:link,
|
||||
a.button:visited {
|
||||
/*
|
||||
HEIGHT - Total height of button.
|
||||
*/
|
||||
height: 26px;
|
||||
|
||||
/*
|
||||
NOTE - You must define the font here otherwise your buttons and links could end up diffrent.
|
||||
*/
|
||||
font-family: "Helvetica Neue", Helvetica, clean, sans-serif;
|
||||
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
button.button_active,
|
||||
a.button_active {
|
||||
}
|
||||
|
||||
button span,
|
||||
a.button span,
|
||||
a.button:link span,
|
||||
a.button:visited span {
|
||||
/*
|
||||
Right side padding for button (default).
|
||||
*/
|
||||
padding: 0 14px 0 0;
|
||||
|
||||
/*
|
||||
SPAN HEIGHT - This should be 2px smaller than the height set on the button (see HEIGHT).
|
||||
*/
|
||||
height: 24px;
|
||||
|
||||
/*
|
||||
We define our background top left and use the 'Sliding Doors' Technique for some fast loading buttons.
|
||||
*/
|
||||
background: url(../img/bouton/bg_button_right.gif) top right;
|
||||
}
|
||||
|
||||
button span span,
|
||||
a.button span span,
|
||||
a.button:link span span,
|
||||
a.button:visited span span {
|
||||
/*
|
||||
Left side padding for button (default).
|
||||
*/
|
||||
padding: 0 0 0 13px;
|
||||
|
||||
/*
|
||||
SPAN HEIGHT - This should be 1px smaller than the height set on the button (see HEIGHT).
|
||||
*/
|
||||
height: 24px;
|
||||
|
||||
/*
|
||||
SPAN LINE-HEIGHT - This should be 1px smaller than the height set on the button (see HEIGHT) and will
|
||||
center the text vertcailly.
|
||||
*/
|
||||
line-height: 24px;
|
||||
|
||||
/*
|
||||
We define our background top left and use the 'Sliding Doors' Technique for some fast loading buttons.
|
||||
*/
|
||||
background: url(../img/bouton/bg_button_left.gif) top left;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
a.button:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
button.submit span,
|
||||
a.submit span,
|
||||
a.submit:link span,
|
||||
a.submit:visited span {
|
||||
}
|
||||
|
||||
button.submit span span,
|
||||
a.submit span span,
|
||||
a.submit:link span span,
|
||||
a.submit:visited span span {
|
||||
/*
|
||||
Give some extra space for the icon.
|
||||
*/
|
||||
padding-left: 26px;
|
||||
|
||||
/*
|
||||
Add in a left side piece with an icon.
|
||||
*/
|
||||
background-image: url(../img/bouton/bg_button_left_submit.gif);
|
||||
}
|
||||
|
||||
button.submit:hover,
|
||||
a.submit:hover {
|
||||
}
|
||||
|
||||
button.cancel span,
|
||||
a.cancel span,
|
||||
a.cancel:link span,
|
||||
a.cancel:visited span {
|
||||
}
|
||||
|
||||
button.cancel span span,
|
||||
a.cancel span span,
|
||||
a.cancel:link span span,
|
||||
a.cancel:visited span span {
|
||||
/*
|
||||
Give some extra space for the icon.
|
||||
*/
|
||||
padding-left: 26px;
|
||||
|
||||
/*
|
||||
Add in a left side piece with an icon.
|
||||
*/
|
||||
background-image: url(../img/bouton/bg_button_left_cancel.gif);
|
||||
}
|
||||
|
||||
button.cancel:hover,
|
||||
a.cancel:hover {
|
||||
}
|
||||
|
||||
button:active span,
|
||||
a:active:active span,
|
||||
/*
|
||||
'button_active' is the class used by SimplyButtons.js to create the button states in IE.
|
||||
*/
|
||||
button.button_active span,
|
||||
a.button_active:active span {
|
||||
/*
|
||||
Using the 'Sliding Doors' Technique we 'slide' the new button state into view.
|
||||
*/
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
||||
button:active span span,
|
||||
a:active:active span span,
|
||||
/*
|
||||
'button_active' is the class used by SimplyButtons.js to create the button states in IE.
|
||||
*/
|
||||
button.button_active span span,
|
||||
a.button_active:active span span {
|
||||
/*
|
||||
Using the 'Sliding Doors' Technique we 'slide' the new button state into view.
|
||||
*/
|
||||
background-position: bottom left;
|
||||
}
|
||||
@ -1,191 +0,0 @@
|
||||
// Simply Buttons, version 2.0
|
||||
// (c) 2007-2009 Kevin Miller
|
||||
//
|
||||
// This script is freely distributable under the terms of an MIT-style license.
|
||||
//
|
||||
/*-----------------------------------------------------------------------------------------------*/
|
||||
//
|
||||
// * Adjusts the buttons so that they will not have an outline when they are pressed.
|
||||
// * If the browser is mobile then we replace the buttons with inputs for compatibility.
|
||||
// * Disables the text in the buttons from being selected.
|
||||
// * The default styles here are meant for use with the Sliding Doors technique http://alistapart.com/articles/slidingdoors/
|
||||
// to be used for IE so we can have nice states with a horrid browser too!
|
||||
//
|
||||
/*-----------------------------------------------------------------------------------------------*/
|
||||
|
||||
var SimplyButtons = {
|
||||
|
||||
options : {
|
||||
hyperlinkClass : 'button'
|
||||
,activeButtonClass : 'button_active'
|
||||
,states : {
|
||||
outer : {
|
||||
active : {
|
||||
backgroundPosition : 'bottom left'
|
||||
}
|
||||
,inactive : {
|
||||
backgroundPosition : 'top left'
|
||||
}
|
||||
}
|
||||
,inner : {
|
||||
active : {
|
||||
backgroundPosition : 'bottom right'
|
||||
}
|
||||
,inactive : {
|
||||
backgroundPosition : 'top right'
|
||||
}
|
||||
}
|
||||
}
|
||||
,iphone : {
|
||||
replaceButtons : true
|
||||
}
|
||||
}
|
||||
|
||||
,buttons : []
|
||||
|
||||
,iphone : false
|
||||
|
||||
,init : function(options)
|
||||
{
|
||||
for (var property in options)
|
||||
{
|
||||
this.options[property] = options[property];
|
||||
}
|
||||
|
||||
this.iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i));
|
||||
|
||||
this.process(document.getElementsByTagName('button'), false);
|
||||
this.process(document.getElementsByTagName('a'), true);
|
||||
|
||||
if (this.iphone && this.options.iphone.replaceButtons)
|
||||
{
|
||||
this.remove();
|
||||
}
|
||||
}
|
||||
|
||||
,process : function(elements, links)
|
||||
{
|
||||
var linkTest = new RegExp('\\b' + this.options.hyperlinkClass + '\\b');
|
||||
for (var a = 0; a < elements.length; a++)
|
||||
{
|
||||
if ((links && linkTest.test(elements[a].className)) || !links)
|
||||
{
|
||||
if (this.iphone && !links)
|
||||
{
|
||||
this.mobile(elements[a]);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.disable(elements[a]);
|
||||
this.setup(elements[a]);
|
||||
}
|
||||
|
||||
if (!links)
|
||||
{
|
||||
this.buttons.push(elements[a]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
,mobile : function(element)
|
||||
{
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute('type', element.getAttribute('type') == 'submit' ? 'submit' : 'button');
|
||||
|
||||
var attributes = new Array('id', 'name', 'value', 'class', 'onclick', 'onmouseover', 'onmouseout', 'onpress', 'onfocus', 'onblur', 'onmouseup', 'onmousedown');
|
||||
for (var a = 0; a < attributes.length; a++)
|
||||
{
|
||||
if (element.getAttribute(attributes[a]))
|
||||
{
|
||||
input.setAttribute(attributes[a], element.getAttribute(attributes[a]));
|
||||
}
|
||||
}
|
||||
|
||||
input.style.marginLeft = element.style.marginLeft;
|
||||
input.style.marginRight = element.style.marginRight;
|
||||
|
||||
element.parentNode.insertBefore(input, element);
|
||||
|
||||
}
|
||||
|
||||
,remove : function()
|
||||
{
|
||||
for (var a = 0; a < this.buttons.length; a++)
|
||||
{
|
||||
this.buttons[a].parentNode.removeChild(this.buttons[a]);
|
||||
}
|
||||
}
|
||||
|
||||
,disable : function(element)
|
||||
{
|
||||
element.onselectstart = function() { return false; };
|
||||
element.style.MozUserSelect = 'none';
|
||||
element.style.KhtmlUserSelect = 'none';
|
||||
element.style.UserSelect = 'none';
|
||||
element.style.cursor = 'default';
|
||||
}
|
||||
|
||||
,setup : function(element)
|
||||
{
|
||||
if (document.all)
|
||||
{
|
||||
if (element.tagName == 'BUTTON')
|
||||
{
|
||||
element.attachEvent('onfocus', this.bind(this.toggle, this, element));
|
||||
}
|
||||
else
|
||||
{
|
||||
element.attachEvent('onmousedown', this.bind(this.toggle, this, element));
|
||||
}
|
||||
element.attachEvent('onmouseup', this.bind(this.toggle, this, element));
|
||||
}
|
||||
else
|
||||
{
|
||||
element.onfocus = function() { this.blur(); };
|
||||
}
|
||||
}
|
||||
|
||||
,toggle : function(o, element)
|
||||
{
|
||||
if (element.tagName != 'BUTTON' && element.tagName != 'A')
|
||||
{
|
||||
while (element.tagName != 'A')
|
||||
{
|
||||
element = element.parentNode;
|
||||
}
|
||||
}
|
||||
if (event.type == 'focus' || event.type == 'mousedown')
|
||||
{
|
||||
element.className += ' ' + o.options.activeButtonClass;
|
||||
o.style(element.childNodes[0], o.options.states.inner.active);
|
||||
o.style(element.childNodes[0].childNodes[0], o.options.states.outer.active);
|
||||
element.blur();
|
||||
}
|
||||
else
|
||||
{
|
||||
element.className = element.className.replace(o.options.activeButtonClass, '');
|
||||
o.style(element.childNodes[0], o.options.states.inner.inactive);
|
||||
o.style(element.childNodes[0].childNodes[0], o.options.states.outer.inactive);
|
||||
}
|
||||
}
|
||||
|
||||
,style : function(element, styles)
|
||||
{
|
||||
for (var property in styles)
|
||||
{
|
||||
element.style[property] = styles[property];
|
||||
}
|
||||
}
|
||||
|
||||
,bind : function(func)
|
||||
{
|
||||
var args = [];
|
||||
for (var a = 1; a < arguments.length; a++)
|
||||
{
|
||||
args.push(arguments[a]);
|
||||
}
|
||||
return function() { return func.apply(this, args); };
|
||||
}
|
||||
|
||||
};
|
||||
@ -225,9 +225,6 @@ if(empty($_REQUEST['privileges']['type']))
|
||||
?>
|
||||
#message {margin:10px 0 10px 30px;}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="./css/reset.css" media="screen"/>
|
||||
<link rel="stylesheet" type="text/css" href="./css/SimplyButtons.css" media="screen"/>
|
||||
<script type="text/javascript" src="./js/SimplyButtons.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function()
|
||||
{
|
||||
@ -258,14 +255,6 @@ $(document).ready(function()
|
||||
}
|
||||
});
|
||||
|
||||
$('.kbis').click(function(){
|
||||
$('form[name=kbis]').submit();
|
||||
});
|
||||
|
||||
$('.privileges').click(function(){
|
||||
$('form[name=privileges]').submit();
|
||||
});
|
||||
|
||||
$('form[name=kbis]').submit(function(){
|
||||
var method = $('input[name=method]:checked').val();
|
||||
if(method=='C')
|
||||
@ -378,7 +367,7 @@ if ($_SESSION['tabInfo']['login']<>'testreunica' &&
|
||||
</div>
|
||||
<div class="fieldgrp">
|
||||
<label> </label>
|
||||
<div class="field"><a href="#" class="button kbis"><span><span>Valider</span></span></a></div>
|
||||
<div class="field"><input type="submit" class="button" name="kbis" value="Valider"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -420,7 +409,7 @@ if(isset($_REQUEST['email']) && !empty($_REQUEST['email']) ){
|
||||
</div>
|
||||
<div class="fieldgrp">
|
||||
<label> </label>
|
||||
<div class="field"><a href="#" class="button kbis"><span><span>Valider</span></span></a></div>
|
||||
<div class="field"><input type="submit" class="button" name="kbis" value="Valider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -497,7 +486,7 @@ if(!$disponible)
|
||||
</div>
|
||||
<div class="fieldgrp">
|
||||
<label> </label>
|
||||
<div class="field"><a href="#" class="button privileges"><span><span>Valider</span></span></a></div>
|
||||
<div class="field"><input type="submit" name="privileges" value="Valider" class="button"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user