rss feed
validation is very important to avoid data entry errors. in this article I will give an example using prototype.js form validation.
1. The first call validation.js files, prototype.js, val.css in your html header
2. in the form, call the validation class
3. Here’s the list of classes available to add to your field elements:
* required (not blank)
* validate-number (a valid number)
* validate-digits (digits only)
* validate-alpha (letters only)
* validate-alphanum (only letters and numbers)
* validate-date (a valid date value)
* validate-email (a valid email address)
* validate-url (a valid URL)
* validate-date-au (a date formatted as; dd/mm/yyyy)
* validate-currency-dollar (a valid dollar value)
* validate-selection (first option e.g. ‘Select one…’ is not selected option)
* validate-one-required (At least one textbox/radio element must be selected in a group – see below*)
TinyMCE is a nice WYSIWYG web editor by Moxiecode, giving your users a very convenient way to edit HTML content. And guess what, its very easy to use it in your Cake apps !
you need download tinyMCE code for using it on your program. you can download the code on this link download tinyMCE.
following this instruction:
1. you must copy tinyMCE code to app/webroot/js/.
2. place this code on your page if you need use tinyMCE
<?php
echo $javascript->link(‘tiny_mce/tiny_mce.js’);
?>
<script type=”text/javascript”>
tinyMCE.init({
theme : “advanced”,
mode : “textareas”,
theme_advanced_toolbar_location : “top”,
convert_urls : false
});
</script>
3. if you placed that code, tinyMCE an aoutomatically work on textarea input.
that is very simple. you must try this.
script.aculo.us Opacity Effects
This effect gradually changes an element’s opacity to a given level. You can use this element to show or hide any element.
This effect starts with the element’s current opacity unless the from option is defined and ends with an opacity defined by the to option, defaulting to 1.0.
Syntax:
You can use one of the following two forms to use this effect:
new Effect.Opacity(‘id_of_element’, [options]);
OR
new Effect.Opacity(element, [options]);
Effect Specific Parameters:
This effect does not have any other parameter except common parameters.
Example:
<html>
<head>
<title>script.aculo.us examples</title>
<script type=”text/javascript”
src=”/javascript/prototype.js”></script>
<script type=”text/javascript”
src=”/javascript/scriptaculous.js?load=effects”></script>
<script type=”text/javascript”>
function ShowEffect(element){
new Effect.Opacity(element,
{duration:1, from:0, to:1.0});
}
function HideEffect(element){
new Effect.Opacity(element,
{duration:1, from:1.0, to:0});
}
</script>
</head>
<body>
<div onclick=”ShowEffect(‘hideshow’)”>
Click me to see the line!
</div>
<br />
<div onclick=”HideEffect(‘hideshow’)”>
Click me to hide the line!
</div>
<br />
<div id=”hideshow”>
LINE TO HIDE AND TO SHOW
</div>
</body>
</html>
script.aculo.us Appear Effects
Make an element appear. If the element was previously set to display:none; inside the style attribute of the element, the effect will automatically show the element.
This means that display must be set within the style attribute of an object, and not in the CSS in the head of the document or a linked file. In other words, this Effect will not work if display:none; is set within style tag or linked CSS file.
NOTE: This effect is very similar to Opacity effect but there is a subtle difference. The Appear effect will ensure that the element is part of the document flow before it adjusts the opacity.
So, if you want the element to remain part of the document display while its opacity is changed, use the Opacity effect. To remove and replace the element from the document as part of a fade-out/fade-in sequences, use Appear effect instead of Opacity.
Syntax:
You can use one of the following two forms to use this effect:
new Effect.Appear(‘id_of_element’, [options]);
OR
new Effect.Appear(element, [options]);
Effect Specific Parameters:
This effect does not have any other parameter except common parameters.
Example:
<html>
<head>
<title>script.aculo.us examples</title>
<script type=”text/javascript”
src=”/javascript/prototype.js”></script>
<script type=”text/javascript”
src=”/javascript/scriptaculous.js?load=effects”></script>
<script type=”text/javascript”>
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:0, to:1.0});
}
function HideEffect(element){
new Effect.Appear(element,
{duration:1, from:1.0, to:0});
}
</script>
</head>
<body>
<div onclick=”ShowEffect(‘hideshow’)”>
Click me to see the line!
</div>
<br />
<div onclick=”HideEffect(‘hideshow’)”>
Click me to hide the line!
</div>
<br />
<div id=”hideshow”>
LINE TO HIDE AND TO SHOW
</div>
</body>
</html>
you can download complete scripts on
this link
you can see other script javascript on tutorialspoint
ajax updater adalah fungsi dari prototype.js yang banyak digunakan untuk menampilkan hasil eksekusi algoritma yang di tampilkan dalam sebuah elemen. berikut adalah contoh penggunaan Ajax.Updater pada prototype.js.
Pertama download file prototype.js kemudian simpan pada folder tertentu, misal folder latihan. kemudian buat file latihan.html dalam satu flder latihan tadi. buka file latihan.html dan masukkan script berikut :
<html>
<head>
<title>Prototype examples</title>
<script type="text/javascript"
src="prototype.js">
</script>
<script>
function insertTime()
{
new Ajax.Updater('update', 'update.html', {
method: 'get',
insertion: Insertion.Bottom
});
}
</script>
</head>
<body>
<div id="update"></div>
<br />
<br />
<input type="button" value="Update" onclick="insertTime();"/>
</body>
</html>
simpan script diatas. selanjutnya buat file update.html dalam satu folder yang sama. masukkan text, gambar atau script pada file ini. pada contoh ini saya masukkan text yang bertuliskan “INI ADALAH UPDATEKU “SELAMAT MENCOBA”<BR>”
kemudian jalankan file latihan.php dengan browser. klik tombol update dan lihat apa yang terjadi?. saat kamu mengeklik tombol update script akan mengeksekusi function insertTime(), karena dalam fungsi ini terdapat pemanggilan fungsi Ajax.Updater maka isi dari file update.html ditampilkan dalam elemen <div id=”update”></div>
Selamat mencoba……..DOWNLOAD SCRIPT
More Options ...
Categories
Tag Cloud
Blog RSS
Comments RSS
Void « Default
Life 
Earth 
Wind 
Water 
Fire Light 
Last 50 Posts
Back