Share Script Folder/unfolder Cho Opera Min

[dgtupltn95]

http://hotvl.mobie.in/test.html

Cái này chỉ opera xem được, còn uc thì ko nhé. Xem qua demo chắc ai cũng hiểu chức năng của nó )

Hướng dẫn:

Đầu tiên cần có 1 style

<style>
html { min-width: 120px; max-width: 800px; }
body { font-size: 12px; font-family: "Helvetica", "Arial", "Sans Serif"; margin: 0; background-color: #1A1A1A;}
body a {color:#0e3751; text-decoration:none;}
body a:hover {text-decoration:underline;}
.kvt {width:95%; background-color:#f7f7f7; margin:auto; padding:4px; border: 1px solid #D6D6CF; 
-moz-border-radius:4px;-webkit-border-radius:4px;}
.content { background: #fff;}
.category_list { margin: 0; padding: 0;}
.category_list li { list-style-type: none; margin: 0; padding: 0; text-indent: 0;}
.category_list > li + li, .category_list .category_list > li { background: url("http://img1.appstatic.opera.com/img/opera_mini/bkg_separator_top_red.png") top no-repeat; padding-top: 2px;}
.category_list li a { display: block; padding: 8px 4px 8px 4px; position: relative;}.foldable.category_list li a { display: block; padding: 8px 4px 8px 18px; position: relative;}

Tiếp theo

<div class="kvt">
<div class="content">
<ul class="category_list">
                  <li>
                      <a class="autofocus" href="url">Text 0</a>
          </li>
<li id="id_1" class="unfolded"><a href="fold:ud_*,id_1;ud_1,id_2"><img src="http://img4.appstatic.opera.com/img/opera_mini/arrow_right_16.png"> Text 1</a></li>
<li id="ud_1" class="folded">
<a href="fold:ud_*;id_1">
<img src="http://img1.appstatic.opera.com/img/opera_mini/arrow_down_16.png"> Text 2</a>
<ul class="category_list foldable">
<li><a href="url">List1</a></li>
<li><a href="url">
List2</a></li>
<li><a href="url">
List3</a></li>
</ul>
</li>
<li id="id_2" class="unfolded"><a href="fold:ud_*,id_2;ud_2,id_1"><img src="http://img4.appstatic.opera.com/img/opera_mini/arrow_right_16.png"> Text</a></li>
<li id="ud_2" class="folded">
<a href="fold:ud_*;id_2">
<img src="http://img1.appstatic.opera.com/img/opera_mini/arrow_down_16.png"> Text</a>
<ul class="category_list foldable">
<li><a href="url.a">
text a</a></li>
<li><a href="url.b">
text b</a></li>
</ul>
</li>                            <li>
<a href="url">Text</a>
</li>
</ul>
</div>
</div>

"ud_" với "id_" thực ra ko quan trọng, muốn thay thành gì tùy bạn. Vd: "x_" và "y_"

Và cuối cùng là cái quan trọng nhất đoạn javascript này chèn vào cuối site

<script type="text/javascript">
    if(Object.prototype.toString.call(window.operamini) === "[object OperaMini]") {
      window.addEventListener("DOMContentLoaded", function() {
        var autof = document.querySelectorAll(".autofocus");
        for(var i = 0; i < autof.length; i++) {
          autof[i].setAttribute("mini:focus", "initial");
        }

        var style = document.createElement("style");
        style.innerText = ".folded { -o-mini-fold: folded; } .unfolded { -o-mini-fold: unfolded; }";
        style.type = "text/css";
        document.headt.appendChild(style);
      }, false);
    }
  </script>