How to Create Unique Custom button for google Transliteration?

by barkkathulla 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>

698
like
0
dislike
0
mail
flag

You must LOGIN to add comments