Вот прежде чем начинать возиться со стилями компонентов и шаблона целиком будет полезно посмотреть, а что у нас в шаблоне за Яваскрипты подключаются...
Собственно там 4 строчки
В принципе немного, но полезно знать что там:
Строчка первая:
Вызов библиотеки JQuery. Почему грузится "jquery.simplemodal.js", а не "jquery.js", который лежит в той же папке я не знаю. Но "jquery.simplemodal.js" весит 3664 байта, а "jquery.js" весит уже 54кб… По вопросам работы этой библиотеки я вас отправлю на соответсвующие сайт, потому как мне лично пришлось покупать книжку чтобы познакомиться с этой библиотекой. Ничего сложного там нету, просто очень удобная библиотека...
Строчка вторая:
содержит всего ничего:
Для тех кто не очень активно лазил по стандартному шаблону поясню: описанные здесь пару функций обрабатывают стили формы для ввода логина и пароля естественно с применением jquery.
Для напоминания еще раз приведу форму для авторизации:
Так что ищите теперь где совпадают слова:"authModal","authform","login"...
Да и посмотрите еще где вызывается форма авторизации:
Третья строчка:
Бибилиотечка, реализующая какой-то хак — обрабатывающий фильтр для png-картинок в ИЕ с применением jquery и каких-то хитрых методов в ИЕ.
Тоже приведу код файла, на всякий случай...
Четвертая строчка:
Собственно вызов функции, использующей описанный в третьей строчке фильтр для обработки картинки с id="logoimg". Картинку эту в стандартном шаблоне думаю найдете сами.
Вставлять ли последние 2 строчки или нет смотрите сами. Возможно здесь реализуется какой-то хитрый дизайнерский ход...
Это то, что качается стандартного шаблона. Остальные яваскрипты еще подключаются компонентами и модулями.
Собственно там 4 строчки
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script> <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script> <script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script> <script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
Строчка первая:
<script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
Строчка вторая:
<script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
function auth(){ $.modal($('#authModal'), {overlay:75}); document.authform.login.focus(); } function hideAuth(){ $('#authModal').close; }
Для напоминания еще раз приведу форму для авторизации:
<div id="authModal" style='display:none'> <form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login"> <div id="authtitle">Авторизация</div> <table cellpadding="2" cellspacing="2" align="center" id="authtable"> <tr> <td id="authtd">Логин:</td> <td id=""><input name="login" type="text" id="authinput" /></td> </tr> <tr> <td id="authtd">Пароль:</td> <td id=""><input name="pass" type="password" id="authinput" /></td> </tr> </table> <div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div> <div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div> </form> </div>
Да и посмотрите еще где вызывается форма авторизации:
<a href="javascript:auth()" id="ht_auth">Авторизация</a>
<script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
Тоже приведу код файла, на всякий случай...
/* * jQuery pngfix plugin * Version 1.6 (05/09/2007) * @requires jQuery v1.1.3 * * Examples at: http://khurshid.com/jquery/iepnghack/ * Copyright (c) 2007 Kush M. * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ /** * * @example * * optional if location of pixel.gif if different to default which is images/pixel.gif * $.pngfix('media/pixel.gif'); * * $('img[@src$=.png], #panel').pngfix(); * * @apply hack to all png images and #panel which icluded png img in its css * * @name pngfix * @type jQuery * @cat Plugins/Image * @return jQuery * @author jQuery Community */ (function($) { /** * helper variables and function */ $.pngfix = function(customPixel) { $.pngfix.pixel = customPixel; }; $.pngfix.getPixel = function() { return $.pngfix.pixel || '/images/pixel.gif'; }; var hack = { ltie7 : $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent), filter : function(src) { return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='"+src+"')"; } }; /** * Applies ie png hack to selected dom elements * * $('img[@src$=.png]').pngfix(); * @desc apply hack to all images with png extensions * * $('#panel, img[@src$=.png]').pngfix(); * @desc apply hack to element #panel and all images with png extensions * * @name pngfix * @type jQuery * @cat Plugins/pngfix */ $.fn.pngfix = hack.ltie7 ? function() { var $$ = $(this); var base = $('base').attr('href'); // need to use this in case you are using rewriting urls if ($$.is('img') || $$.is('input')) { // hack image tags present in dom if ($$.attr('src').match(/.*\.png([?].*)?$/i)) { // make sure it is png image // use source tag value if set var source = (base && $$.attr('src').substring(0,1)!='/') ? base + $$.attr('src') : $$.attr('src'); // apply filter $$.css({filter:hack.filter(source), width:$$.width(), height:$$.height()}) .attr({src:$.pngfix.getPixel()}) .positionFix(); } } else { // hack png css properties present inside css var image = $$.css('backgroundImage'); if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) { image = RegExp.$1; $$.css({backgroundImage:'none', filter:hack.filter(image)}) .positionFix(); } } }); } : function() { return this; }; /** * Removes any png hack that may have been applied previously * * $('img[@src$=.png]').pngunfix(); * @desc revert hack on all images with png extensions * * $('#panel, img[@src$=.png]').iepnghack(); * @desc revert hack on element #panel and all images with png extensions * * @name pngunfix * @type jQuery * @cat Plugins/iepnghack */ $.fn.pngunfix = hack.ltie7 ? function() { var $$ = $(this); var src = $$.css('filter'); if (src.match(/src=["']?(.*\.png([?].*)?)["']?/i)) { // get img source from filter src = RegExp.$1; if ($$.is('img') || $$.is('input')) { $$.attr({src:src}).css({filter:''}); } else { $$.css({filter:'', background:'url('+src+')'}); } } }); } : function() { return this; }; /** * positions selected item relatively */ $.fn.positionFix = function() { return this.each(function() { var $$ = $(this); var position = $$.css('position'); if (position != 'absolute' && position != 'relative') { $$.css({position:'relative'}); } }); }; })(jQuery);
Четвертая строчка:
<script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
Вставлять ли последние 2 строчки или нет смотрите сами. Возможно здесь реализуется какой-то хитрый дизайнерский ход...
Это то, что качается стандартного шаблона. Остальные яваскрипты еще подключаются компонентами и модулями.
Народ был доволен предыдущим постом по поводу стилей, просто я хочу чтобы тексты были последовательные. Из этого потом при желании набор статей можно сделать...
У меня больше времени уходит на то чтобы собраться и сесть разбираться с Инстантом. На само написаниие уходит мало времени. Здесь в основном "copy-paste"...
Но... весь движок раскидан на огромное кол-во составляющих...
даже сесть и разобраться в стандартном шаблоне, чтобы сделать на его основе свой собственный потребуется далеко не пять минут... Очень много здесь просто завязано узлом. Вот и приходится разбираться куда ведет одна ниточка, куда другая...
Я согласен с тем что этот пост не самый информативный, но просто так пройти мимо Яваскриптов шаблоне не мог для так сказать полноты картины...
Возможно потом придется ссылаться на этот пост...
Я действительно не люблю png из-за глюков с прозрачностью в ИЕ.
Я очень давно им не пользуюсь...
При возможности тратить 3 часа в МЕСЯЦ я считаю проблема с png сейчас не самая главная. В конце концов есть другие способы отображать картинки...