How to Create Unique Custom button for google Transliteration?
by barkkathulla[ Edit ] 2013-11-30 18:49:00
Create Unique Custom button for google Transliteration
1.Needed script source
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
2.HTML file(index.php)
<form method="post" action = "">
<table>
<tr>
<td align="center">
<div align="center" class="clsTrans"><?php include 'insert.php';?></div>
<textarea id="maincomment"></textarea>
</td>
</tr>
</table>
</form>
3.you can give style - here each style shuld have a button image(css)
.book_ico {}
.note_ico {}
4.Custom button display text(insert.php)
<div><p>ஆங்கிலம் மற்றும் தமிழ் இடையே மாறுவதற்கு CTRL + G அழுத்தவும் அல்லது இங்கே சொடுக்கவும்
<span class="book_ico" id="checkboxId" onclick="javascript:checkboxClickHandler()"></span></p></div>
5.Google API
<script>
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
control =
new google.elements.transliteration.TransliterationControl(options);
// 'transliterateTextarea'.
var allTextAreas = $("textarea").toArray();
control.makeTransliteratable(allTextAreas);
document.getElementById('checkboxId').checked =
control.isTransliterationEnabled();
}
6.You can have unique button(javascript)
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
document.getElementById('checkboxId').checked = e.transliterationEnabled;
}
// the transliteration state.
function checkboxClickHandler() {
if ($('.book_ico').length) {
document.getElementById("checkboxId").className = "note_ico";
}
else if ($('.note_ico').length) {
document.getElementById("checkboxId").className = "book_ico";
}
control.toggleTransliteration();
}
google.setOnLoadCallback(onLoad);
</script>
