Ticket #6088: test.txt

File test.txt, 8.6 KB (added by fabiome, 12 years ago)

the code page

Line 
1<style type="text/css">
2        .arvore_pastas{
3                padding-left: 20px;
4                list-style-type: none;
5                cursor: pointer;
6        }
7        /*
8        .sub_pasta{
9                display: none;
10        }
11        */
12        .pasta div{
13                display: table;
14        }
15       
16        li.pasta div span{
17                float: left;
18        }
19        .pasta_conteudo, .arquivo_conteudo{
20                cursor: pointer;
21        }
22               
23        .icone_pasta{
24                width: 20px;
25                height: 20px;
26                background-image: url("images/pastas.png");
27                display: inline;
28                text-indent: -99999px;
29                overflow: hidden;
30                background-repeat: no-repeat;
31        }
32       
33        .icone_pasta_aberta{
34                background-position: -20px 0px;
35        }
36       
37        .icone_pasta_fechada{
38                background-position: 0px 0px;
39        }
40       
41        .icone_pasta_ctrl_aberta{
42                background-position: 0px -20px;
43        }
44       
45        .icone_pasta_ctrl_fechada{
46                background-position: -20px -20px;
47        }
48       
49        .hover{background-color: red}
50       
51        .pasta_selecionada{
52                background-color: yellow;
53        }
54       
55</style>
56
57<script type="text/javascript">
58        $(document).ready(function(){
59               
60                var pasta_ativa = 0;
61
62                $("#div_arvore ul").addClass("arvore_pastas");
63               
64                $(".pasta").draggable({
65                        handle: ".helper",
66                        revert: "invalid",
67                        zIndex: 9999
68                });
69
70                $(".pasta_conteudo").draggable({
71                        revert: "invalid"
72                });
73
74                $(".arquivo_conteudo").draggable({
75                        revert: "invalid"
76                });
77               
78                $(".pasta .helper").droppable({
79                        hoverClass: "hover",
80                        tolerance: "pointer",
81                        drop: function(event, ui){
82                                alert("Mover "+ui.draggable.attr("id")+" para "+$(this).attr("id"));
83                                $("#"+ui.draggable.attr("id")).remove();
84                        }
85                });
86               
87                $(".pasta_conteudo").droppable({
88                        tolerance: "pointer",
89                        drop: function(event, ui){
90                                alert("Mover "+ui.draggable.attr("id")+" para "+$(this).attr("id"));
91                                $("#"+ui.draggable.attr("id")).remove();
92                        }
93                });
94
95                $(".ctrl").each(function(){
96                        $(this).click(function(){
97                               
98                                if ($(this).attr("status") == 2){
99                                       
100                                        $(this).css("background-position","0px -20px");
101                                        $(this).next().children().css("background-position","-20px 0px");
102                                        $(this).attr("status","1");
103                                        $("#sub_"+$(this).next().attr("id")).show("fast");
104                                }else{
105                                       
106                                        $(this).css("background-position","-20px -20px");
107                                        $(this).next().children().css("background-position","0px 0px");
108                                        $(this).attr("status","2");
109                                        $("#sub_"+$(this).next().attr("id")).hide("fast");
110                                }
111
112                        });
113                });
114
115                $(".pasta .helper").each(function(){
116                        $(this).click(function(){
117                                pasta_ativa = $(this).attr("id");
118                                $("#pasta_ativa").html(pasta_ativa);
119                               
120                                $(".pasta .helper").removeClass("pasta_selecionada");
121                                $(this).addClass("pasta_selecionada");
122                        });
123                });
124        });
125</script>
126
127
128<div id="div_arvore" style="border: 3px ridge gray; width: 200px; height: 400px; float: left">
129        <ul>
130                <li class="pasta" id="p1">
131                        <div> <span status="2" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p1" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 1 </span> </span> </div>
132                </li>
133                <li class="pasta" id="p2">
134                        <div> <span status="2" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p2" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 2 </span> </span> </div>
135                </li>
136               
137                <li class="pasta" id="p3">
138                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p3" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 3 </span> </span> </div>
139                        <ul id="sub_p3" class="sub_pasta">
140                                <li class="pasta" id="p31">
141                                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p31" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 3-1 </span> </span> </div>
142                                </li>
143                                <li class="pasta" id="p32">
144                                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p32" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 3-2 </span> </span> </div>
145                                </li>
146                                <li class="pasta" id="p33">
147                                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p33" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 3-3 </span> </span> </div>
148                                </li>
149                        </ul>
150                </li>
151               
152                <li class="pasta" id="p4">
153                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p4" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 4 </span> </span> </div>
154                        <ul id="sub_p4" class="sub_pasta">
155                                <li class="pasta" id="p41">
156                                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p41" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 4-1 </span> </span> </div>
157                                </li>
158                                <li class="pasta" id="p42">
159                                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p42" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 4-2 </span> </span> </div>
160                                </li>
161                                <li class="pasta" id="p43">
162                                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p43" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 4-3 </span> </span> </div>
163                                </li>
164                        </ul>
165                </li>
166               
167                <li class="pasta" id="p5">
168                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p5" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 5 </span> </span> </div>
169                </li>
170                <li class="pasta" id="p6">
171                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p6" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 6 </span> </span> </div>
172                </li>
173                <li class="pasta" id="p7">
174                        <div> <span status="7" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p7" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 7 </span> </span> </div>
175                </li>
176                <li class="pasta" id="p8">
177                        <div> <span status="1" class="ctrl icone_pasta icone_pasta_ctrl_fechada"></span> <span id="p8" class="helper"> <span class="icone_pasta icone_pasta_fechada"></span> <span> Pasta 8 </span> </span> </div>
178                </li>
179        </ul>
180</div>
181
182<div id="div_arquivos" style="border: 3px ridge gray; width: 600px; height: 400px; float: left">
183        Pasta: <span id="pasta_ativa"> </span>
184        <table id="tb_lista_conteudo">
185                <tr>
186                        <th width="200"> Nome </th> <th width="200"> Tipo </th> <th width="50"> Tamanho </th> <th width="100"> Data Cria&ccedil;&atilde;o </th> <th width="100"> Data Upload </th>
187                </tr>
188                <tr id="pc1"> <td> <div class="pasta_conteudo" id="pc1"> <span class="icone_pasta icone_pasta_ctrl_fechada"></span> <img src="image/folder.jpg">  Pasta 1 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
189                <tr id="pc2"> <td> <div class="pasta_conteudo" id="pc2"> <img src="image/folder.jpg">  Pasta 2 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
190                <tr id="pc3"> <td> <div class="pasta_conteudo" id="pc3"> <img src="image/folder.jpg">  Pasta 3 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
191                <tr id="ac1"> <td> <div class="arquivo_conteudo" id="ac1"> <img src="image/icon-mini-file-pdf.gif">  Arquivo 1 </div> </td> <td> Documento do Word </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
192                <tr id="ac2"> <td> <div class="arquivo_conteudo" id="ac2"> <img src="image/icon-mini-file-pdf.gif">  Arquivo 2 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
193                <tr id="ac3"> <td> <div class="arquivo_conteudo" id="ac3"> <img src="image/icon-mini-file-pdf.gif">  Arquivo 3 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
194                <tr id="ac4"> <td> <div class="arquivo_conteudo" id="ac4"> <img src="image/icon-mini-file-pdf.gif">  Arquivo 4 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
195                <tr id="ac5"> <td> <div class="arquivo_conteudo" id="ac5"> <img src="image/icon-mini-file-pdf.gif">  Arquivo 5 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
196                <tr id="ac6"> <td> <div class="arquivo_conteudo" id="ac6"> <img src="image/icon-mini-file-pdf.gif">  Arquivo 6 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
197                <tr id="ac7"> <td> <div class="arquivo_conteudo" id="ac7"> <img src="image/icon-mini-file-pdf.gif">  Arquivo 7 </div> </td> <td> Pasta de Arquivos </td> <td> &nbsp; </td> <td> 20/10/2010 </td> <td> &nbsp; </td> </tr>
198        </table>
199</div>