domingo, 20 de julho de 2014

Uma forma de aplicar Libs Javascript e Styles desacoplada do codigo (Com Bootstrap)

Esta semana penei, mas consegui aplicar o Bootstrap em meus fontes de forma desacoplada. Observem como meu body é limpo. Não precisamos adicionar detalhes de controle de nosso layout. Deixamos isso para o javascript que aplica as classes. styles.html 
<html>
    <head>

        <script src="../jquery-2.1.1.min.js"></script>

        <link rel="stylesheet" href="../bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="../bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="../ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="../bootstrap/3.2.0/js/bootstrap.min.js"></script>

        <style>
            .red
            {
                color: red;
            }
            .green
            {
                color: green;
            }
            .blue
            {
                color: blue;
            }
        </style>

        <script type="text/javascript">

                myFunction = function(e)
                {
                    alert($(e).html())
                }
                
                botao=function(element)
                { 
                    element.attr('class',"btn")      
                }
                
                dmy_reserved_style_name=function(element)
                {
                    element.attr('class',"container")
                }
                
                bmy_reserved_style_name=function(element)
                {
                    element.attr('class',"red")
                }
                
                amy_reserved_style_name=function(element)
                {
                    element.attr('class',"green")
                } 
                
                cmy_reserved_style_name=function(element)
                {
                    element.attr('class',"blue")
                }

                String.prototype.replaceAll=function(find,replace)
                {
                    return this.split(find).
                    join(replace);
                }

                ButtonOpenModal=function(element)
                {
                    var idName=element.attr('id');
                    element.attr('id',element.attr('id')+"__");
                    var str='<button class="btn btn-primary btn-lg" id="'+idName+'" data-toggle="modal" data-target="#'+element.attr("target")+'">';
                    str+=element.html();
                    str+='</button>';
                    element.replaceWith(str);
                }

                GridView=function(element)
                {
                    var idName=element.attr('id');
                    element.attr('id',element.attr('id')+"__");

                    //var rrrr = $(this).attr("metadata")
                    var rrrr=element.attr("metadata").
                    replaceAll("'","\"")
                    var columns=$.parseJSON(rrrr);
                    var thead="";

                    $.each(columns,function(indix,column)
                    {
                        thead+="<th width="+column.width+">"+column.columnName+'</th>';
                    });
                    var tbody=element.children('TBODY').html()
                    var str="<div class='panel panel-default'>"
                    str+='<div class="panel-heading">'+element.attr("title")+'</div>'
                    str+='<table class="table" id="'+idName+'" >'; // id name must be here
                    str+="<thead><tr>"+thead+"</tr></thead>"
                    str+="<tbody>"+tbody+"</tbody>"
                    str+="</table></div>";
                    element.replaceWith(str);
                }
                
                ModalMessage=function(element)
                {
                    var idName=element.attr('id');
                    element.attr('id',element.attr('id')+"__");
                    var str='<div class="modal fade" id="'+idName+'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">'
                    str+='<div class="modal-dialog">'
                    str+='<div class="modal-content">'
                    str+='<div class="modal-header">'
                    str+='<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>'
                    str+='<h4 class="modal-title" id="myModalLabel">'+element.attr('Modal_title')+'</h4>'
                    str+='</div>'
                    str+='<div class="modal-body">'
                    str+=element.html();
                    str+='</div>'
                    str+='<div class="modal-footer">'
                    str+='<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
                    str+='</div>'
                    str+='</div>'
                    str+='</div>'
                    str+='</div>'
                    element.replaceWith(str);
                }
                
                $(document).ready(function()
                {
                    $("*").each(function(index,element)
                    {
                        if($(this).attr("data-type")!=null)
                        {
                            var tempFunction=new Function("Arg1","window."+$(this).attr("data-type")+"(Arg1)");
                            tempFunction($(this));
                        }
                    }); 
                });
        </script>
    </head>
    <body> 
        
        <button data-type="ButtonOpenModal" target="Modal_1">
            Launch demo modal
        </button>

        <div id="Modal_1" data-type="ModalMessage" Modal_Title="Message" > 
            Hello! My name is Luiz. www.codigorapido.com.br (2014)
        </div>

        <div data-type="cmy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="dmy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="bmy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="amy_reserved_style_name">
            The contents of the div
        </div>

        <div data-type="dmy_reserved_style_name">
            The contents of the div
        </div>

        <button data-type="botao" type="button" onclick="myFunction(Modal_1)" > clicar </button>

        <table data-type="GridView" id="tabelaNome" title="titulo" metadata="[{'columnName':'Coluna 1', 'width':300},{'columnName':'Coluna 2', 'width':300}]"  > 
            <TBODY><tr><td>oi</td><td>oi</td></tr><tr><td>oi</td><td>oi</td></tr></TBODY> 
        </table>        

    </body>
</html>
Postado por às
Marcadores:

Nenhum comentário:

Postar um comentário