eletrotupi

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jsTree v.1.0 - languages documentation</title>
	<script type="text/javascript" src="../_lib/jquery.js"></script>
	<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
	<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
	<script type="text/javascript" src="../jquery.jstree.js"></script>

	<link type="text/css" rel="stylesheet" href="syntax/!style.css"/>
	<link type="text/css" rel="stylesheet" href="!style.css"/>
	<script type="text/javascript" src="syntax/!script.js"></script>
</head>
<body>
<div id="container">

<h1 id="dhead">jsTree v.1.0</h1>
<h1>languages plugin</h1>
<h2>Description</h2>
<div id="description">
<p>The <code>languages</code> plugin enables multilanguage trees. This means that each node has a specified number of titles - each in a different "language". Only one language set is visible at any given time. This is useful for maintaining the same structure in many languages (hence the name of the plugin)</p>
</div>

<h2 id="configuration">Configuration</h2>
<div class="panel configuration">
<p>Expects an array of language codes. Each of the items is used as a CSS class name, so make sure you specify only valid CSS class name strings.  The first langauge will be visible onload. For example:</p>
<p><code>[ "en", "de", "bg" ]</code></p>
</div>

<h2 id="demos">Demos</h2>
<div class="panel">
<p>Check your data plugin documentation (<a href="html_data.html">html_data</a>, <a href="xml_data.html">xml_data</a>, <a href="json_data.html">json_data</a>) or take a close look at these examples for information on how to specify multilanguage nodes.</p>

<h3>Using the languages plugin with HTML data</h3>
<input type="button" class="button" value="en" id="en_1" style="float:left;" />
<input type="button" class="button" value="bg" id="bg_1" style="float:left;" />
<input type="button" class="button" value="rename_1" id="rename_1" style="float:left;" />
<input type="button" class="button" value="rename_2" id="rename_2" style="" />
<div id="demo1" class="demo">
	<ul>
		<li id="phtml_1">
			<a href="#" class="en">Root node 1</a>
			<a href="#" class="bg">Корен 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#" class="en">Child node 1</a>
					<a href="#" class="bg">Дете 1</a>
				</li>
				<li id="phtml_3">
					<a href="#" class="en">Child node 2</a>
					<a href="#" class="bg">Дете 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#" class="en">Root node 2</a>
			<a href="#" class="bg">Корен 2</a>
		</li>
	</ul>
</div>
<script type="text/javascript" class="source">
$(function () {
	$("#en_1, #bg_1").click(function () { 
		$("#demo1").jstree("set_lang", this.value);
	});
	$("#rename_1").click(function () { 
		$("#demo1").jstree("rename_node", "#phtml_1", "Rename visible lang");
	});
	$("#rename_2").click(function () { 
		$("#demo1").jstree("rename_node", "#phtml_1", "Rename `bg`", "bg");
	});
	$("#demo1").jstree({ 
		"languages" : [ "en", "bg" ],
		"plugins" : [ "themes", "html_data", "languages","checkbox"]
	});
});
</script>

</div>

<h2 id="api">API</h2>
<div class="panel api">

<h3 id="set_lang">.set_lang ( lang )</h3>
<p>Set the tree's visible language. Triggers an event.</p>
<ul class="arguments">
	<li>
		<code class="tp">string <br />number</code> <strong>lang</strong>
		<p>Either the language code string (as specified in the config) or an index from the config array.</p>
	</li>
</ul>
<h3 id="get_lang">.get_lang ( )</h3>
<p>Returns the name of the currently visible language.</p>

<h3 id="_get_string">._get_string ( node , lang )</h3>
<p>Returns the needed string from the core config object. Overwrites the <a href="core.html#_get_string">get_string function</a> from the core. If the key does not exist in that language, but exists in the root of the object - that is returned, if even that does not exist - the key itself is returned.</p>
<ul class="arguments">
	<li>
		<code class="tp">string</code> <strong>key</strong>
		<p>The name of the string you are looking for. If you want to use the localize option just set the strings core config option to an object like this one: <code>strings : { "lang-code-here" : { "string-key" : "string-value"  ... }, "other-lang" : { ... } }</code>, otherwise _get_strings won't be affected.</p>
	</li>
	<li>
		<code class="tp">string</code> <strong>lang</strong>
		<p>The language code string (as specified in the config) to get the key in. If not specified the currently visible language is used.</p>
	</li>
</ul>

<h3 id="get_text">.get_text ( node , lang )</h3>
<p>Returns the title of a node. Overwrites the <a href="core.html#get_text">get_text function</a> from the core.</p>
<ul class="arguments">
	<li>
		<code class="tp">mixed</code> <strong>node</strong>
		<p>This can be a DOM node, jQuery node or selector pointing to the element whose title you need.</p>
	</li>
	<li>
		<code class="tp">string</code> <strong>lang</strong>
		<p>The language code string (as specified in the config) to get the title in. If you omit this - the currently visible language is used.</p>
	</li>
</ul>

<h3 id="set_text">.set_text ( node , text , lang )</h3>
<p>Sets the title of a node. Overwrites the <a href="core.html#set_text">set_text function</a> from the core. This is used internally - you should use <a href="core.html#rename_node">rename_node</a>. Since <code>rename_node</code> uses <code>set_text</code> internally you can pass a language string as a third parameter to rename_node.</p>
<ul class="arguments">
	<li>
		<code class="tp">mixed</code> <strong>node</strong>
		<p>This can be a DOM node, jQuery node or selector pointing to the element whose title you want to change.</p>
	</li>
	<li>
		<code class="tp">string</code> <strong>text</strong>
		<p>The new title.</p>
	</li>
	<li>
		<code class="tp">string</code> <strong>lang</strong>
		<p>The language code string (as specified in the config) to get the title in. If you omit this - the currently visible language is used.</p>
	</li>
</ul>

<h3 id="_load_css">._load_css ( )</h3>
<p>used only internally to include the CSS necessary for the plugin onload.</p>

<h3 id="create_node">.create_node ( obj , position , js , callback )</h3>
<p>Overwrites the <a href="core.html#create_node">create_node</a> function from the core. To create a node with a few titles use an array for the <code>data</code> property of the <code>js</code> parameter:</p>
<p><code>{ "data" : [ { "title" : "EN title", language : "en" }, { "title" : "BG заглавие", language : "bg" } ] }</code></p>

</div>

</div>
</body>
</html>
cirandas.net
