Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 17.08.2013, 17:25
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Делал демо angularjs animations with animate.css, слайдер получился

http://nervgh.github.io/pages/angularjs-and-animatecss/
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #32 (permalink)  
Старый 24.08.2013, 02:59
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

запилил простые табы https://github.com/nervgh/angular-tabs. Live demo

UPD: live demo
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 24.08.2013 в 18:05.
Ответить с цитированием
  #33 (permalink)  
Старый 15.05.2014, 22:24
Новичок на форуме
Отправить личное сообщение для kazemir Посмотреть профиль Найти все сообщения от kazemir
 
Регистрация: 15.05.2014
Сообщений: 2

калькулятор для подбора типоразмера шин
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
      function TireController($scope) {        
        //набор 1
        var IVALUE = 25.4;
        var I2VALUE = 0.02;
        $scope.sectionWidthSet1 = 0; 
        $scope.aspectRatioSet1 = 0;
        $scope.rimDiameter_Inch_Set1 = 0;
        //набор 2
        $scope.sectionWidthSet2 = 0;
        $scope.aspectRatioSet2 = 0;
        $scope.rimDiameter_Inch_Set2 = 0;
        //расчетные данные
        $scope.rimHeight_mm_Set1;
        $scope.innDiameterSet1;
        $scope.extDiameterSet1;
        $scope.rimHeight_mm_Set2;
        $scope.innDiameterSet2;
        $scope.extDiameterSet2;
        $scope.roadClearance;
        $scope.computing=function(){  
           // Внутренний диаметр, мм                                
           $scope.innDiameterSet1 = Math.round($scope.rimDiameter_Inch_Set1 * IVALUE);
           $scope.innDiameterSet2 = Math.round($scope.rimDiameter_Inch_Set2 * IVALUE);  
          // Внешний диаметр, мм
          $scope.extDiameterSet1 = Math.round($scope.sectionWidthSet1 * $scope.aspectRatioSet1 * I2VALUE + $scope.innDiameterSet1);
          $scope.extDiameterSet2 = Math.round($scope.sectionWidthSet2 * $scope.aspectRatioSet2 * I2VALUE + $scope.innDiameterSet2);
          //Высота профиля, мм
          $scope.rimHeight_mm_Set1 = Math.round(($scope.extDiameterSet1 - $scope.innDiameterSet1)/2);
          $scope.rimHeight_mm_Set2 = Math.round(($scope.extDiameterSet2 - $scope.innDiameterSet2)/2);
          //Изменение значения клиренса
          $scope.roadClearance = ( $scope.extDiameterSet2 - $scope.extDiameterSet1 )/2;
        }
        //do calculation
        $scope.computing();
      }
    </script>
</head>
<body>
<div ng-controller="TireController">
    <div class="container">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="col-md-5 col-md-offset-1">
                        <b>Старый размер</b>:
                        <select class="form-control" ng-model="sectionWidthSet1" ng-change="computing()">
                            <option value="145">145</option>
                            <option value="155">155</option>
                            <option value="165">165</option>
                            <option selected="selected" value="175">175</option>
                            <option value="185">185</option>
                            <option value="195">195</option>
                            <option value="205">205</option>
                            <option value="215">215</option>
                            <option value="225">225</option>
                            <option value="235">235</option>
                            <option value="245">245</option>
                            <option value="255">255</option>
                            <option value="265">265</option>
                            <option value="275">275</option>
                            <option value="285">285</option>
                            <option value="295">295</option>
                            <option value="305">305</option>
                            <option value="315">315</option>
                            <option value="325">325</option>
                        </select>
                         &nbsp;/
                        <select class="form-control" ng-model="aspectRatioSet1" ng-change="computing()">
                            <option value="0">&mdash;</option>
                            <option value="25">25</option>
                            <option value="30">30</option>
                            <option value="35">35</option>
                            <option value="40">40</option>
                            <option value="45">45</option>
                            <option value="50">50</option>
                            <option value="55">55</option>
                            <option value="60">60</option>
                            <option value="65">65</option>
                            <option selected="selected" value="70">70</option>
                            <option value="75">75</option>
                            <option value="80">80</option>
                            <option value="85">85</option>
                        </select>
                         &nbsp;R
                        <select class="form-control" ng-model="rimDiameter_Inch_Set1" ng-change="computing()">
                            <option value="12">12</option>
                            <option selected="selected" value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                        </select>
                        <br>
                    </div>
                    <div class="col-md-5">
                        <b>Новый размер</b>:
                        <select class="form-control" ng-model="sectionWidthSet2" ng-change="computing()">
                            <option value="145">145</option>
                            <option value="155">155</option>
                            <option value="165">165</option>
                            <option selected="selected" value="175">175</option>
                            <option value="185">185</option>
                            <option value="195">195</option>
                            <option value="205">205</option>
                            <option value="215">215</option>
                            <option value="225">225</option>
                            <option value="235">235</option>
                            <option value="245">245</option>
                            <option value="255">255</option>
                            <option value="265">265</option>
                            <option value="275">275</option>
                            <option value="285">285</option>
                            <option value="295">295</option>
                            <option value="305">305</option>
                            <option value="315">315</option>
                            <option value="325">325</option>
                        </select>
                         &nbsp;/
                        <select class="form-control" ng-model="aspectRatioSet2" ng-change="computing()">
                            <option value="0">&mdash;</option>
                            <option value="25">25</option>
                            <option value="30">30</option>
                            <option value="35">35</option>
                            <option value="40">40</option>
                            <option value="45">45</option>
                            <option value="50">50</option>
                            <option value="55">55</option>
                            <option value="60">60</option>
                            <option value="65">65</option>
                            <option selected="selected" value="70">70</option>
                            <option value="75">75</option>
                            <option value="80">80</option>
                            <option value="85">85</option>
                        </select>
                         &nbsp;R
                        <select class="form-control" ng-model="rimDiameter_Inch_Set2" ng-change="computing()">
                            <option value="12">12</option>
                            <option selected="selected" value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
Ответить с цитированием
  #34 (permalink)  
Старый 15.05.2014, 22:25
Новичок на форуме
Отправить личное сообщение для kazemir Посмотреть профиль Найти все сообщения от kazemir
 
Регистрация: 15.05.2014
Сообщений: 2

часть 2 калькулятора - почему то ограничение на 10000 символов в посте.

    <div class="row">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Расчетные данные</h3>
                </div>
                <div class="panel-body">
                    <div class="col-md-12 clearfix">
                        <p>
                            Клиренс изменится на: <span class="badge badge-info">{{ roadClearance }}</span>
                        </p>
                    </div>
                    <div class="col-md-12 center-block">
                        <table class="table table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>
                                 Размер
                            </th>
                            <th>
                                 Старый вариант
                            </th>
                            <th>
                                 Новый вариант
                            </th>
                            <th>
                                 Разница
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                 Ширина шины, мм (A)
                            </td>
                            <td>
                                 {{ sectionWidthSet1 }}
                            </td>
                            <td>
                                 {{ sectionWidthSet2 }}
                            </td>
                            <td>
                                 {{ sectionWidthSet1 - sectionWidthSet2 }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                 Высота профиля, мм (B)
                            </td>
                            <td>
                                 {{ rimHeight_mm_Set1 }}
                            </td>
                            <td>
                                 {{ rimHeight_mm_Set2 }}
                            </td>
                            <td>
                                 {{ rimHeight_mm_Set1 - rimHeight_mm_Set2 }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                 Внутренний диаметр, мм (C)
                            </td>
                            <td>
                                 {{ innDiameterSet1 }}
                            </td>
                            <td>
                                 {{ innDiameterSet2 }}
                            </td>
                            <td>
                                 {{ innDiameterSet1 - innDiameterSet2 }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                 Внешний диаметр, мм (D)
                            </td>
                            <td>
                                 {{ extDiameterSet1 }}
                            </td>
                            <td>
                                 {{ extDiameterSet2 }}
                            </td>
                            <td>
                                 {{ extDiameterSet1 - extDiameterSet2 }}
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Ответить с цитированием
  #35 (permalink)  
Старый 22.05.2014, 12:08
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Нужно было сделать такую "анимацию": кликаем, стили применяются сразу. Кликаем ещё раз, стили пропадают через время. То бишь, эдакий addClass через таймаут, но без JS-императива.

Всё проклял, пока не понял простую вещь - для определения параметров анимации ангуляр читает стили. нужно читать доки

в общем, вот пример :

элемент станет красным мгновенно, а синим- через время (одну секунду)
<html><head>

  <style>.test {
  color: #00f;
  font-size: 48px;
  -webkit-transition-property: color, font-size;
  transition-property: color, font-size;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: steps(1);
  transition-timing-function: steps(1);
}
.hidden-add {
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
}
.hidden {
  color: #f00;
  font-size: 36px;
}</style>

<style type="text/css"></style></head>

<body>

<div ng-app="app" ng-init="hidden = true" class="ng-scope">
  <button ng-click="hidden = !hidden">Toggle</button>
  <div ng-class="{hidden: hidden}" class="test-animation test hidden">myEl</div>
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><script src="https://code.angularjs.org/1.2.16/angular-animate.min.js"></script>

  <script>
    var app = angular.module('app', ['ngAnimate']);
  </script>



</body></html>


Тут зарыт трюк, поэтому его поясню. Зарыт он в стилях. Префиксы уберу за простотой.
/* Начальные стили - цвет и размер шрифта */
.test {
  color: #00f;
  font-size: 48px;  }

/* конечные стили - другие цвет и размер шрифта */
.hidden {
  color: #f00;
  font-size: 36px;  }

/* Параметры анимации */
.test {
  transition-property: color, font-size; /* Анимируем изменение свойств цвет и размер шрифта */
  transition-duration: 1s; /* длительность прописана чисто для ангуляра */
  transition-timing-function: steps(1); /* смягчение не нужно - нужно, чтобы стили ставились мгновенно. так что сюда подходит лестничная функция с одной ступенькой с конца */
}

/* Анимация добавления класса */
.hidden-add {
  transition-duration: 0s; /* снимаем время анимации, получаем мгновенное применение стилей */
}

Последний раз редактировалось melky, 22.05.2014 в 12:18.
Ответить с цитированием
  #36 (permalink)  
Старый 01.06.2014, 01:06
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 553

Сообщение от melky
Всё проклял, пока не понял простую вещь - для определения параметров анимации ангуляр читает стили
Это есть подключить модуль ngAnimate. Стандартный ничего не читает)
Ответить с цитированием
  #37 (permalink)  
Старый 01.06.2014, 02:28
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Пагинацию запилил
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #38 (permalink)  
Старый 01.06.2014, 22:57
Аватар для l-liava-l
Ленивый фантазер
Отправить личное сообщение для l-liava-l Посмотреть профиль Найти все сообщения от l-liava-l
 
Регистрация: 14.03.2012
Сообщений: 1,808

kazemir,
что это за ад?)
__________________
Научу себя плохому
Ответить с цитированием
  #39 (permalink)  
Старый 02.06.2014, 22:07
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 553

Сообщение от nerv_ Посмотреть сообщение
Пагинацию запилил
Если в кратце, в чем отличие от http://angular-ui.github.io/bootstrap/#/pagination?)
Ответить с цитированием
  #40 (permalink)  
Старый 07.06.2014, 13:11
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Shitbox2
Если в кратце, в чем отличие от
меньше опций, таких как
- direction-links
- previous-text
- next-text
- boundary-links
- first-text
- last-text
которые, по сути, задают отображение в шаблоне.
У меня их просто нет, только сервис. Т.е. шаблон настраивается произвольно, как угодно.
Иными словами, можно легко сделать враппер-директиву с нужной разметкой и использовать.
Или, как у меня в примере, использовать контроллер с подгружаемыми шаблонами,
Или вообще не подгружать шаблоны, а писать его прямо в разметку

Возможность задавать общие опции для всех экземпляров пагинатора (конфигурировать)

Поскольку, сервис - функция, можно расширить ее прототип и доп. методы/свойства будут у всех созданных ею экземпляров.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск