А что у нас за Яваскрипты в стандартном шаблоне???

+1
2.39K
Вот прежде чем начинать возиться со стилями компонентов и шаблона целиком будет полезно посмотреть, а что у нас в шаблоне за Яваскрипты подключаются...
Собственно там 4 строчки
  1.  
  2. <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
  3. <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
  4. <script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
  5. <script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
  6.  
В принципе немного, но полезно знать что там:
Строчка первая:
  1. <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
  2.  
Вызов библиотеки JQuery. Почему грузится "jquery.simplemodal.js", а не "jquery.js", который лежит в той же папке я не знаю. Но "jquery.simplemodal.js" весит 3664 байта, а "jquery.js" весит уже 54кб… По вопросам работы этой библиотеки я вас отправлю на соответсвующие сайт, потому как мне лично пришлось покупать книжку чтобы познакомиться с этой библиотекой. Ничего сложного там нету, просто очень удобная библиотека...

Строчка вторая:
  1. <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
  2.  
содержит всего ничего:
  1.  
  2. function auth(){
  3. $.modal($('#authModal'), {overlay:75});
  4. document.authform.login.focus();
  5. }
  6.  
  7. function hideAuth(){
  8. $('#authModal').close;
  9. }
Для тех кто не очень активно лазил по стандартному шаблону поясню: описанные здесь пару функций обрабатывают стили формы для ввода логина и пароля естественно с применением jquery.
Для напоминания еще раз приведу форму для авторизации:
  1.  
  2. <div id="authModal" style='display:none'>
  3. <form id="authform" target="_self" style="margin: 0px;" name="authform" method="post" action="/login">
  4. <div id="authtitle">Авторизация</div>
  5. <table cellpadding="2" cellspacing="2" align="center" id="authtable">
  6. <tr>
  7. <td id="authtd">Логин:</td>
  8. <td id=""><input name="login" type="text" id="authinput" /></td>
  9. </tr>
  10. <tr>
  11. <td id="authtd">Пароль:</td>
  12. <td id=""><input name="pass" type="password" id="authinput" /></td>
  13. </tr>
  14. </table>
  15. <div id="authoption"><input type="checkbox" value="1" name="remember"/>Запомнить меня | <a href="/0/passremind.html">Забыли пароль?</a></div>
  16. <div id="authbutton"><input name="auth" type="submit" value="Войти" id="authbtn"/></div>
  17. </form>
  18. </div>
  19.  
Так что ищите теперь где совпадают слова:"authModal","authform","login"...

Да и посмотрите еще где вызывается форма авторизации:
  1. <a href="javascript:auth()" id="ht_auth">Авторизация</a>
Третья строчка:
  1. <script type="text/javascript" src="/templates/_default_/jquery.iepnghack.1.6.js"></script>
Бибилиотечка, реализующая какой-то хак — обрабатывающий фильтр для png-картинок в ИЕ с применением jquery и каких-то хитрых методов в ИЕ.
Тоже приведу код файла, на всякий случай...
  1. /*
  2.  * jQuery pngfix plugin
  3.  * Version 1.6 (05/09/2007)
  4.  * @requires jQuery v1.1.3
  5.  *
  6.  * Examples at: http://khurshid.com/jquery/iepnghack/
  7.  * Copyright (c) 2007 Kush M.
  8.  * Dual licensed under the MIT and GPL licenses:
  9.  * http://www.opensource.org/licenses/mit-license.php
  10.  * http://www.gnu.org/licenses/gpl.html
  11.  */
  12. /**
  13.   *
  14.   * @example
  15.   *
  16.   * optional if location of pixel.gif if different to default which is images/pixel.gif
  17.   * $.pngfix('media/pixel.gif');
  18.   *
  19.   * $('img[@src$=.png], #panel').pngfix();
  20.   *
  21.   * @apply hack to all png images and #panel which icluded png img in its css
  22.   *
  23.   * @name pngfix
  24.   * @type jQuery
  25.   * @cat Plugins/Image
  26.   * @return jQuery
  27.   * @author jQuery Community
  28.   */
  29.  
  30. (function($) {
  31.  
  32. /**
  33. * helper variables and function
  34. */
  35. $.pngfix = function(customPixel) {
  36. $.pngfix.pixel = customPixel;
  37. };
  38.  
  39. $.pngfix.getPixel = function() {
  40. return $.pngfix.pixel || '/images/pixel.gif';
  41. };
  42.  
  43. var hack = {
  44. ltie7 : $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent),
  45. filter : function(src) {
  46. return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='"+src+"')";
  47. }
  48. };
  49. /**
  50. * Applies ie png hack to selected dom elements
  51. *
  52. * $('img[@src$=.png]').pngfix();
  53. * @desc apply hack to all images with png extensions
  54. *
  55. * $('#panel, img[@src$=.png]').pngfix();
  56. * @desc apply hack to element #panel and all images with png extensions
  57. *
  58. * @name pngfix
  59. * @type jQuery
  60. * @cat Plugins/pngfix
  61. */
  62. $.fn.pngfix = hack.ltie7 ? function() {
  63. return this.each(function() {
  64. var $$ = $(this);
  65. var base = $('base').attr('href'); // need to use this in case you are using rewriting urls
  66. if ($$.is('img') || $$.is('input')) { // hack image tags present in dom
  67. if ($$.attr('src').match(/.*\.png([?].*)?$/i)) { // make sure it is png image
  68. // use source tag value if set
  69. var source = (base && $$.attr('src').substring(0,1)!='/') ? base + $$.attr('src') : $$.attr('src');
  70. // apply filter
  71. $$.css({filter:hack.filter(source), width:$$.width(), height:$$.height()})
  72. .attr({src:$.pngfix.getPixel()})
  73. .positionFix();
  74. }
  75. } else { // hack png css properties present inside css
  76. var image = $$.css('backgroundImage');
  77. if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
  78. image = RegExp.$1;
  79. $$.css({backgroundImage:'none', filter:hack.filter(image)})
  80. .positionFix();
  81. }
  82. }
  83. });
  84. } : function() { return this; };
  85. /**
  86. * Removes any png hack that may have been applied previously
  87. *
  88. * $('img[@src$=.png]').pngunfix();
  89. * @desc revert hack on all images with png extensions
  90. *
  91. * $('#panel, img[@src$=.png]').iepnghack();
  92. * @desc revert hack on element #panel and all images with png extensions
  93. *
  94. * @name pngunfix
  95. * @type jQuery
  96. * @cat Plugins/iepnghack
  97. */
  98. $.fn.pngunfix = hack.ltie7 ? function() {
  99. return this.each(function() {
  100. var $$ = $(this);
  101. var src = $$.css('filter');
  102. if (src.match(/src=["']?(.*\.png([?].*)?)["']?/i)) { // get img source from filter
  103. src = RegExp.$1;
  104. if ($$.is('img') || $$.is('input')) {
  105. $$.attr({src:src}).css({filter:''});
  106. } else {
  107. $$.css({filter:'', background:'url('+src+')'});
  108. }
  109. }
  110. });
  111. } : function() { return this; };
  112. /**
  113. * positions selected item relatively
  114. */
  115. $.fn.positionFix = function() {
  116. return this.each(function() {
  117. var $$ = $(this);
  118. var position = $$.css('position');
  119. if (position != 'absolute' && position != 'relative') {
  120. $$.css({position:'relative'});
  121. }
  122. });
  123. };
  124.  
  125. })(jQuery);
  126.  

Четвертая строчка:
  1. <script type="text/javascript">$(function(){ $("#logoimg").pngfix(); })</script>
Собственно вызов функции, использующей описанный в третьей строчке фильтр для обработки картинки с id="logoimg". Картинку эту в стандартном шаблоне думаю найдете сами.

Вставлять ли последние 2 строчки или нет смотрите сами. Возможно здесь реализуется какой-то хитрый дизайнерский ход...

Это то, что качается стандартного шаблона. Остальные яваскрипты еще подключаются компонентами и модулями.
0
14 лет назад #
А можно узнать для чего вообще это запись? мысли в слух или просто так убить время? просто не совсем понятно! для кого данная запись и на какую аудиторию рассчитано! просто со стороны это как механику говорить как менять колесо, а с другой для блондинки мануал о том же. laugh
-1
Львенок Львенок 14 лет назад #
С одной стороны мысли в слух в продолжение процесса знакомства с инстантом, с другой стороны начинающим иногда не хватает "толчка" чтобы понять с какого конца к движку подходить, каких-то комментариев, мыслей.
Народ был доволен предыдущим постом по поводу стилей, просто я хочу чтобы тексты были последовательные. Из этого потом при желании набор статей можно сделать...
У меня больше времени уходит на то чтобы собраться и сесть разбираться с Инстантом. На само написаниие уходит мало времени. Здесь в основном "copy-paste"...
0
14 лет назад #
боюсь ваш предложенный толчек подведет их к концу! если учесть что тех кого можно подталкнуть на проекте порядка 5%, тех кому эта информация будет понятно только в части знакомых букв, причем только там где пишите Вы составит 85%, и остальные 10% - те которым данная информация и так известна или они могут получить ее самостоятельно.
-1
Львенок Львенок 14 лет назад #
Чисто теоретически любой человек может копаясь в инстанте получить любую информацию о движке...
Но... весь движок раскидан на огромное кол-во составляющих...
даже сесть и разобраться в стандартном шаблоне, чтобы сделать на его основе свой собственный потребуется далеко не пять минут... Очень много здесь просто завязано узлом. Вот и приходится разбираться куда ведет одна ниточка, куда другая...
Я согласен с тем что этот пост не самый информативный, но просто так пройти мимо Яваскриптов шаблоне не мог для так сказать полноты картины...
Возможно потом придется ссылаться на этот пост...
0
14 лет назад #
Поставлю +1 может быть родиться мануал по инстант из всего этого!
0
14 лет назад #
Особенно поражает тот копипаст фикса PNG картинок для IE. если бы Вы комментировали каждую строку! вот это был бы реально толчек.
-1
Львенок Львенок 14 лет назад #
на мой взгляд для разработки собственных шаблонов этот скрипт существенной роли не играет...
0
14 лет назад #
ну если вам безразличны пользователи IE и вы не используете PNG то да!
-1
Львенок Львенок 14 лет назад #
У меня сейчас стоит задача научиться делать работающие шаблоны самостоятельно.
Я действительно не люблю png из-за глюков с прозрачностью в ИЕ.
Я очень давно им не пользуюсь...
При возможности тратить 3 часа в МЕСЯЦ я считаю проблема с png сейчас не самая главная. В конце концов есть другие способы отображать картинки...
0
14 лет назад #
не согласен! но это дело каждого!
0
Олег с клещами Олег с клещами 14 лет назад #
Полезное чтиво. Для джумлы, например, есть подробный мануал по созданию шаблонов. Наверняка такой нужен и для инстанта.
0
Бергал Бергал 14 лет назад #
по доброму завидоваю всем челам, которые могут разложить каждую строку по полочкам и рассказать чекаво. тока блин, лузерам типа меня или еще десятка-другого, которые не хотят умные слова знать и не хотят знать какой кривошип крутится в движке какой-нибудь тойоты, наверное это все не по мозгам :))). но это так к слову. ничего личного. и вообще зря я сюдой заглянул :)))
0
Дима Дима 14 лет назад #
Спасибо

Еще от автора

Шаблоны и Стили. Что InstantCMS нам выдает...
Зайдите на страничку вашего сайта InstantCMS. Через контекстное меню откройте код HTML страницы... Понятно что-нибудь?? Сомневаюсь...
Шаблоны и стили. Пролог
Снова предварительный пост. Мы будем разбираться в задачах, с которыми мы будем сталкиваться при работе с шаблонами, и которые нам придется решать.
Быстро создаем себе структуру своего шаблона с нуля
Для тех, кто знает и немного работал с HTML и CSS, но пугается огромного объема информации, находящегося в "/templates/_default_/template.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.