Javascript-форум - Показать сообщение отдельно

DjDiablo · #19 (**permalink**) 21.09.2013, 22:10

Сообщение от monolithed

Разве сейчас нельзя?

А я разве говорил что сейчас нельзя

Лишний раз пропиарю своеобразные веб компоненты на jQuery, которые работают уже сейчас.
Выглядеть будут так

<demotivator id="t1" title="Узбагойтесь" subtitle="Сделаем вовремя">
      <img src="http://im2-tub-ru.yandex.net/i?id=137949638-61-72&n=21"/>
</demotivator>

А работать так

<!DOCTYPE HTML>
<html>
  <head> 
      <script src="https://code.jquery.com/jquery-2.0.3.min.js"> </script>
  </head>
  <body>    
    <style>
      
      demotivator{
        background-color:black;    
        display:block;   
        color:white;
        width:250px;
        padding:10px;
      }
      
      demotivator img{
        width:100%;        
      }
      
      demotivator h1{
        text-align:center;
        margin:0px;
      }

      demotivator h2{
        text-align:center;
        margin:0px;
      }
      
      .red{
        background-color:red;                      
      }
            
    </style>
    

    
    <script>

      $(function(){   
        //функция шаблонизатор
        function template(data){
          return  "<h1>"+data.title+"</h1>"+                
                  "<h2>"+data.subtitle+"</h2>"
        }

        //конструктор плагина
        var Plugin=function(el){                       
             el.append( 
                template({
                  title:$(el).attr('title')||"",                   
                  subtitle:$(el).attr('subtitle')||""                   
                })
             );                                                 
             this.el=el;
         }

         // прототип плагина
         Plugin.prototype={
           //демонстрационный метод
           red:function(){
             this.el.addClass('red');
           }      
         }
      
         //автоматическое создание
         $('demotivator').each(function(){
              $(this).data('widget', new Plugin( $(this) ) );
         })         
      })
      
      

      //Тест управления виджетом из вне. 
      $(function(){
        $('#btn1').click(function(){            
            $('#t1').data('widget').red();
        })                
      })
      
      
    </script>

    
    
    <demotivator id="t1" title="Узбагойтесь" subtitle="Сделаем вовремя">
      <img src="http://im2-tub-ru.yandex.net/i?id=137949638-61-72&n=21"/>
    </demotivator>
    
    <button id="btn1"> Волшебная кнопка </button>
    
    <demotivator id="t2" class="red" title="Уcпакойтесь" subtitle="Сделаем вовремя">
      <img src="http://im2-tub-ru.yandex.net/i?id=137949638-61-72&n=21"/>
    </demotivator>
    
  </body>
</html>