Гость
Войти | Профиль | Очистить
Действия ...
Форумы / Oracle APEX [игнор отключен] [закрыт для гостей] / [JQuery] по разному рендерится страница. / 9 сообщений из 9, страница 1 из 1
03.09.2009, 11:52
    #36176394
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
Рендериться в плане последовательности отрисовки элементов страницы а не рендеринг в апексе имеется ввиду.
Использую следующий элемент:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
//Стили в хеадере
<style type="text/css">
.portlet { margin:  0  1em 1em  0 ; }
.portlet-header { margin:  0 .3em; padding-bottom: 4px; padding-left:  0 .2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding:  0 .4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
</style>

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
//Сам слой в Region Header
<div class="portlet">
<div class="portlet-header">Помощь (Нажмите на "+")</div>
<div class="portlet-content">
<span style="color:#6495ED;font-weight:bold;font-size:14;">
Сам контент
</span>
</div>
</div>

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
// в хеадере
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content");

$(".portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});

По умолчанию он открыт(а надо закрытый), закрыл его вставив в том же Region Header:
Код: plaintext
1.
2.
3.
//Программно нажимам плюсик что бы по умолчанию справка была закрыта
// $(".portlet-header").toggleClass("ui-icon-minusthick");
// $(".portlet-header").parents(".portlet:first").find(".portlet-content").toggle();
В FF все отлично, а в ИЭ не хочет(уже не первый раз подводит). Окружил данный код алертами и получилось что в FF при первом алерте страница уже была полностью отображена поэтому данный код сработал а в ИЭ при первом alert пустое окно то есть элемента то еще нет изменять этим кодом нечего.
Можно ли поменять ситуацию не меняя браузер?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 13:20
    #36176649
suPPLer
suPPLer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
kasik,

0. По-моему, это больше вопрос форума по HTML, CSS, JS . Ну да ладно...
1. В очередной раз - пожалуйста, указывайте версии браузеров.
2. автор
Код: plaintext
1.
2.
$(".portlet-header").toggleClass("ui-icon-minusthick");
 $(".portlet-header").parents(".portlet:first").find(".portlet-content").toggle();

Пользуйтесь кешированием и next-функцией.
Код: plaintext
1.
$(".portlet-header").toggleClass("ui-icon-minusthick")
.next(".portlet-content").toggle();
3. Почему Вы сразу не закроете этот .portlet-content?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 14:08
    #36176792
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
suPPLer,

0. ну не совсем тут же вопрос в разрезе апекс куда вставить код при апексовом рендеринге.

1. ИЭ6

2. чем это лучше?

3. как это сделать я не допер, а так бы сделал.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 15:20
    #36177040
suPPLer
suPPLer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
kasik,

2. Я немного не разобрался сразу с тем, вызов идёт от span-элемента, потому нужно добавить .parent() к .next().

Это быстрее, потому лучше. Да и понятнее, по-моему. Просто берём следующий DOM-элемент, подходящий под селектор, в Вашем случае - div с содержимым портлета. А то поиск первого родителя, потом поиск элементов с нужным классом... Если интересно - погуглите jQuery profiling, ещё советую прочитать http://mabp.kiev.ua/2009/08/10/presentation-from-coffee-n-code/]доклад Старого Мавра с пруфлинками.

3. Банально:
Код: plaintext
<div class="portlet-content" style="display:none">

Но если охота программно, то в HTML Header:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
$(document).ready(function(){
	$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
	.children(".portlet-header")
	.addClass("ui-widget-header ui-corner-all")
	.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
	.children(".ui-icon")
	.click(function(){
	  $(this).toggleClass("ui-icon-minusthick")
	  .parent().next(".portlet-content").toggle();	
	})
	.toggleClass("ui-icon-minusthick")
	.parent().next(".portlet-content").toggle();
});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 15:24
    #36177051
suPPLer
suPPLer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
Мысль в том, что если уж мы добрались до нужного места селектором и знаем структуру, то вместо вызовов новых общих селекторов быстрее топать туда-сюда по родителям-детям-следующим-предыдущим.
-------------------------------------------------------
When I say "RTFM" or "STFF" or "STFW",
the third letter means "Following" or "Fine"...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 15:52
    #36177125
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
suPPLer,

Сделал все оказалось проще:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
// в хеадере
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
.end()
.find(".portlet-content")
[quote автор][color=red].toggleClass("ui-icon-minusthick")
.toggle();[/color][/quote]

$(".portlet-header .ui-icon").click(function() {
$(this).toggleClass("ui-icon-minusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 15:54
    #36177133
kvad
kvad
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
а в контексте вопроса главная здесь мысль - это, конечно, $(document).ready(function(){});
документ должен быть готов к манипуляциям, ready здесь - гарант готовности.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 15:57
    #36177152
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
kvad,

то есть он не отработает пока документ не будет полностью показан?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2009, 16:04
    #36177180
kvad
kvad
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[JQuery] по разному рендерится страница.
скажем так, не всегда и везде это гарантируется, где-то может отработать, где-то нет.
особенно если имеем дело с капризным ие6.
пруфлинки не приведу - погуглите, если есть интерес.
$(document).ready(function(){}) - здесь стандартный (для jquery) способ избежать связанного с этим геморроя и исполнить манипуляции в гарантированно готовой среде.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / Oracle APEX [игнор отключен] [закрыт для гостей] / [JQuery] по разному рендерится страница. / 9 сообщений из 9, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 404ms
Закрыть
start [/forum/topic.php?fid=50&tablet=1&tid=1877278]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 41ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 45ms
get tp. blocked users:
 2ms
others: 275ms
total:  404ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]