This repository has been archived by the owner on Aug 21, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (161 loc) · 9.04 KB
/
index.html
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
153
154
155
156
157
158
159
160
161
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>js-core JavaScript framework • примеры использования</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="preview/style.css" />
<script type="text/javascript">
(function() {
if(window.opera && window.opera.version() > 9.5) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "preview/opera.css";
document.getElementsByTagName("head")[0].appendChild(link);
}
})();
</script>
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="preview/ie.css" /><![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.js-core.ru/">js-core JavaScript framework</a></h1>
<span>Версия 2.8.1</span>
<ul>
<li class="web-site"><a href="http://www.js-core.ru/" title="Веб-сайт проекта js-core.ru" tabindex="1">Веб-сайт</a></li>
<li class="downloads"><a href="http://code.google.com/p/js-core/downloads/list" title="Различные версии и сборки js-core, расширения и модули, документация" tabindex="2">Скачать</a></li>
<li class="documentation"><a href="doc/index.html" title="Подробное описание методов, изменения последней версии" tabindex="3">Документация</a></li>
<li class="svn"><a href="http://code.google.com/p/js-core/source/browse/" title="Subversion — централизованная система управления версиями" tabindex="4">SVN</a></li>
</ul>
</div>
<div id="content">
<div class="example">
<h2>Поиск первого дочернего элемента</h2>
<button tabindex="5">Старт</button>
<div class="dom">
<label>DOM</label>
<code class="tag"><span><div id="test"></span><code class="tag"><span><span></span><code class="text"><span>Текст</span></code></code><code class="tag"><span><span></span><code class="text"><span>Текст</span></code></code></code> </div>
<div class="code">
<label>JavaScript</label>
<pre><code>$("test")</code>.<code>first("span")</code>.<code>text("Пример")</code>;</pre>
</div>
<ol>
<li>Поиск элемента с идентификатором «test»</li>
<li>Поиск первого дочернего <span></li>
<li>Изменение текста</li>
</ol>
</div>
<div class="example">
<h2>Поиск дочерних элементов</h2>
<button tabindex="6">Старт</button>
<div class="dom">
<label>DOM</label>
<code class="tag"><span><ul id="list"></span><code class="tag"><span><li></span><code class="text">Текст</code></code><code class="tag"><span><li></span><code class="text">Текст</code></code></code> </div>
<div class="code">
<label>JavaScript</label>
<pre><code>$("list")</code>.<code>child()</code>.<code>each("addClass", "some")</code>;</pre>
</div>
<ol>
<li>Поиск элемента с идентификатором «list»</li>
<li>Поиск всех дочерних элементов</li>
<li>Добавление CSS-классса «some» найденным элементам</li>
</ol>
</div>
<div class="example">
<h2>Поиск в глубину</h2>
<button tabindex="7">Старт</button>
<div class="dom">
<label>DOM</label>
<code class="tag"><span><fieldset id="some"></span><code class="tag"><form><code class="tag"><div><code class="tag"><span><span></span><code class="text">Текст</code></code></code><code class="tag"><div><code class="tag"><span><span></span><code class="text">Текст</code></code></code></code></code> </div>
<div class="code">
<label>JavaScript</label>
<pre><code>$("some")</code>.<code>children("span")</code>.<code>get(1)</code>;</pre>
</div>
<ol>
<li>Поиск элемента с идентификатором «some»</li>
<li>Поиск в глубину всех дочерних <span></li>
<li>Получение второго в коллекции <span></li>
</ol>
</div>
<div class="example">
<h2>Изменение атрибутов</h2>
<button tabindex="8">Старт</button>
<div class="dom">
<label>DOM</label>
<code class="tag"><span><p id="addr"></span><code class="tag"><span><span></span><code class="text"><span>Текст</span></code></code><code class="tag"><span><span></span><code class="text"><span>Текст</span></code></code></code> </div>
<div class="code">
<label>JavaScript</label>
<pre><code>$("addr")</code>.<code>last()</code>.<code>attr("title", "Подсказка")</code>;</pre>
</div>
<ol>
<li>Поиск элемента с идентификатором «addr»</li>
<li>Поиск последнего дочернего элемента</li>
<li>Изменение атрибута «title»</li>
</ol>
</div>
<div class="example">
<h2>Изменение стилей</h2>
<button tabindex="9">Старт</button>
<div class="dom">
<label>DOM</label>
<code class="tag"><span><fieldset></span><code class="tag"><span><div></span><code class="text"><span>Текст</span></code></code><code class="tag"><span><div id="tooltip"></span><code class="text"><span>Текст</span></code></code></code> </div>
<div class="code">
<label>JavaScript</label>
<pre><code>$("tooltip")</code>.<code>prev("div")</code>.<code>css("color", "#f00")</code>;</pre>
</div>
<ol>
<li>Поиск элемента с идентификатором «tooltip»</li>
<li>Поиск предыдущего <div></li>
<li>Изменение цвета текста</li>
</ol>
</div>
<div class="example">
<h2>Создание элементов</h2>
<button tabindex="10">Старт</button>
<div class="dom">
<label>DOM</label>
<code class="tag"><span><body></span><code class="tag"><span><div></span><code class="text"><span>Текст</span></code></code></code> </div>
<div class="code">
<label>JavaScript</label>
<pre><code>$(document.body)</code>.<code>prepend("h1")</code>.<code>text("Пример")</code>;</pre>
</div>
<ol>
<li>Создание обёртки для «document.body»</li>
<li>Добавление нового узла <h1></li>
<li>Добавление текста «Пример»</li>
</ol>
</div>
<div class="example">
<h2>Использование AJAX</h2>
<button tabindex="11">Старт</button>
<div class="dom">
<label>DOM</label>
<code class="tag"><span><pre id="license"></span><code class="text"><span>Текст</span></code></code> </div>
<div class="code">
<label>JavaScript</label>
<pre><code>$("license")</code>
.<code>text("Загрузка…")</code>
.<code>load({url: "MIT-LICENSE.txt"})</code>;</pre>
</div>
<ol>
<li>Поиск элемента с идентификатором «license»</li>
<li>Изменение «Текст» на «Загрузка…»</li>
<li>Загрузка текста лицензии из файла с помощью AJAX-запроса</li>
</ol>
<div class="result">
<label>Результат</label>
<pre><code>Текст</code></pre>
</div>
</div>
<p><span>Об остальных возможностях и методах JavaScript фреймворка «<a href="http://www.js-core.ru/" title="Веб-сайт проекта">js-core</a>» и способах работы с ними можно узнать из <a href="doc/index.html">документации</a>.</span></p>
</div>
<div id="footer"><span class="vcard">© <a class="url fn n" href="http://www.designwizard.ru/" title="Перейти на сайт автора"><span class="given-name">Дмитрий</span> <span class="family-name">Коробкин</span></a>, 2009</span></div>
</div>
<script type="text/javascript" src="framework/js-core.min.js"></script>
<script type="text/javascript" src="modules/ajax/js-core.ajax.min.js"></script>
<script type="text/javascript" src="preview/application.js"></script>
</body>
</html>