Các dạng Layout - cấu trúc đăng bài viết blogspot bằng Code Html, Css & Javascript

Hôm nay Gia Bảo Blog tổng hợp danh sách bài viết hướng dẫn code đăng bài blogspot sử dụng bằng html, css, javascript sưu tầm trên mạng giúp các bạn làm đẹp nội dung , tạo hiệu ứng, bổ sung tính năng trên trang blogspot của mình.     

Tổng hợp Layot code dùng đăng bài viết bằng Html, Css & Javascript trên trang Blogspot : 

  • https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css
  • [ Ví Dụ mẫu Sticky Sidebar 😎 ] https://abouolia.github.io/sticky-sidebar/#examples
  • https://www.solodev.com/blog/web-design/adding-a-sticky-nav-menu-to-your-website.stml
  • https://wpforthewin.com/sticky-sidebar-wordpress/amp
  • https://demo.web3canvas.com/jquery/jquery-sticky-for-long-sidebar
  • https://w3codepen.com/html-css-fixed-sticky-sidebar-menu

Tham khảo Chèn Bài viết liên quan  ( quảng cáo đầu bài viết , trái phải & giữa bài đăng blogspot ) :

  • https://www.taoanhdep.com/2016/06/bai-viet-lien-quan-ep-cho-blogspot.html
  • https://www.thichnet.com/2018/05/chen-tien-ich-bai-viet-lien-quan-vao-giua-bai-viet-blogspot.html
  • https://haitaynamkg.blogspot.com/2016/04/box-bai-viet-lien-quan-duoi-tieu-e-bai.html
  • https://tinhkplus.blogspot.com/2017/08/them-hop-bai-viet-lien-quan-ep-cho.html
  • https://tranphucminh.blogspot.com/2011/04/chen-1-box-nho-hien-thi-cac-bai-lien.html
  • https://forum.vietdesigner.net/threads/them-box-thong-tin-bai-viet-dep-cho-blogspot.39597/

Cấu trúc đăng bài dạng Sidebar trên link : https://www.jqueryscript.net/tags.php?/sticky%20sidebar

  • [ Cấu trúc bài viết sidebar bên phải ] : https://www.jqueryscript.net/other/fix-sidebar-bottom-sticksy.html
  • https://www.jqueryscript.net/other/pin-element-top-sticky.html
  • [ Cấu trúc bài viết sidebar bên trái ] : https://www.jqueryscript.net/layout/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin.html
  • [ Cấu trúc bài viết sidebar link neo chuyển tới nội dung trên bài viết ] :  https://www.jqueryscript.net/other/jQuery-Plugin-For-Sticky-Sidebar-Widgets-scrollsWith.html
  • [ Sidebar phải ẩn hiện nội dung bên phải ] : https://www.jqueryscript.net/other/Minimal-Drawer-Sidebar-Plugin-with-jQuery-Sidebar-js.html
  • [ Cấu trúc bài viết sidebar link neo bên trái chuyển hướng đến nội dung trên trang ] : https://www.jqueryscript.net/layout/jQuery-Plugin-for-Tree-Widget-jqTree.html

Cấu trúc đăng bài dạng Layout trên trang https://www.jqueryscript.net/layout :

  • [ Tổng hợp code Layout sử dụng jQuery ] : https://www.jqueryscript.net/layout/jQuery-Plugin-For-Sortable-Filterable-Grid-of-Items-Shuffle.html
  • https://www.jqueryscript.net/layout/jQuery-Plugin-For-Creating-One-Page-Multi-Scrolling-Website-multiScroll-js.html
  • https://www.jqueryscript.net/layout/jQuery-Plugin-For-One-Page-Navigation-Plugin-Page-Scroll-To-ID.html
  • https://vue-grid-generator.netlify.app

Cấu trúc tạo code đăng bài Blogspot  trên các trang "CSS Layout Generator" :

  • https://www.cssportal.com/layout-generator/
  • https://www.cssscript.com/sticky-footnote-generator/
  • https://m.habr.com/ru/post/436182/
  • https://maurice-web.de/halb-feststehende-bereiche-mit-position-sticky/

Cấu trúc đăng bài Sticky trái phải trên Blogspot :

  • https://vietblogdao.com/chia-se-code-sticky-sidebar-widget-scroll-jquery-chay-on-dinh-de-cai-dat-va-tuy-chinh/

Cấu trúc đăng bài General Css Sticky :

  • https://scotch.io/tutorials/build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4/%7B%7Burl%7Đ%7
  • https://ourcodeworld.com/articles/read/619/top-7-best-table-sorter-javascript-and-jquery-plugins
  • https://codepen.io/ncerminara/pen/VdLpzd
  • https://www.lambdatest.com/blog/css-position-sticky-tutorial/
  • [ Các dạng sticky ] : https://css-tricks.com/how-to-get-sticky-and-full-bleed-elements-to-play-well-together/
  • [ Code Bottom Sticky ] : https://www.bennadel.com/blog/3932-using-a-top-of-1px-to-observe-position-sticky-intersection-changes-in-angular-11-0-3.htm
  • https://mihune-web.com/sticky/
  • https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html
  • https://coliss.com/articles/build-websites/operation/javascript/fixed-sticky-for-position-sticky-polyfill.html

Cấu trúc đăng bài General Css Float :

  • https://css-tricks.com/almanac/properties/f/float

Code chỉnh sửa Vị trí hiển thị tiện ích trên trang bài đăng blogspot :

  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element
  • https://flaviocopes.com/css-centering
  • How to center a div inside a div with html and css
  • http://www.corelangs.com/css/box/divindiv.html
  • https://www.w3docs.com/tools/code-editor/1306
  • [ Canh giữa các đối tượng tạo khung link liên kết nằm giữa khung ] : https://codepen.io/alexandredees/pen/ojaFr
  • https://apiumhub.com/tech-blog-barcelona/css-grid
  • https://www.geeksforgeeks.org/how-to-center-a-div-within-another-div
  • https://jsfiddle.net/hashem/VsakD/8/
  • https://blog.logrocket.com/13-ways-to-vertical-center
  • [ Canh giữa <div> trong một <div> khác ] : https://www.w3docs.com/snippets/css/how-to-horizontally-center-a-div-in-another-div.html
  • https://vanseodesign.com/css/vertical-centering

Tham khảo Code Wrap text  :

  • https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
  • https://stackoverflow.com/questions/33663263/how-can-i-wrap-text-around-an-object-on-three-sides-like-thí
  • https://stackoverflow.com/questions/23866200/wrap-text-around-both-sides-of-div
  • https://www.w3.org/TR/css-shapes/
  • wrap text div around another div.
  • https://stackoverflow.com/questions/5798243/text-wraps-around-floating-div-but-borders-and-hr-s-do-not/6763463
  • https://flaviocopes.com/css-floating-clearing/
  • https://what.thedailywtf.com/topic/11144/floating-a-div-so-divs-flow-around-it
  • http://www.avajava.com/tutorials/lessons/how-do-i-wrap-text-around-an-image.html?page=2


 

Trang Mẫu bố cục - tiện ích đẹp  :

  • https://www.123itvn.com/2016/12/share-code-va-su-dung-sticky-sidebar-cho-website.html

Từ khóa gợi ý : Generator Sticky Css | General Css Float

Một số code tùy chỉnh dành cho trang đăng bài viết blogspot từ các link hướng dẫn trên : 

Code Quảng cáo - 2 cột - cột trái Div quảng cáo, cột phải Div bài viết gần đây theo nhãn   :

<!--Code Chèn Quảng Cáo - Bài Viết Gần Đây Theo Nhãn -->  
<style>
@media (max-width: 600px) {
    .post-ads {
        width: 100%;
    }
    .post-right {
        margin-left: 0 !important;
        width: 100%;
        float: left;
    }
}.post-right {
    margin: 0 0 0 310px;
    padding: 0 0 10px
}
.post-ads {
    float: left;
    margin: 0 10px 10px 0;
    position: relative
}
p.post-excerpt {
    margin: 0;
    padding: 10px;
    background-color: #ECF0F1;
    font-size: 17px;
    line-height: 1.5em;
    color: #09f

#related-postsBox {
    margin: 10px 0

#related-postsBox ul li {
    list-style-type: none;
    color: #2980C1;
    font-size: 16px;
    line-height: 22px;
    max-height: 22px;
    overflow: hidden
}
#related-postsBox ul li a {
    color: #09f
}
#related-postsBox ul li a:hover {
    color: #F90053
}
#related-postsBox h4 {
    color: #f90053;
    border-bottom: 1px dashed #f90053;
    padding: 5px 0;
    font-size: 18px;
    margin-bottom: 5px
}
#related-postsBox ul {
    margin-left: 0;
padding: 0
}
#related-postsBox .fa {
    margin-right: 5px
}
#related-postsBox ul li a:before {
    content: "\f046";
    font-family: 'FontAwesome';
    color: #f90053;
    padding-right: 5px
}
#related-posts1Box ul li:before {
    display: none;
}
 
</style>
 
<!-- Div qc-header-post-->
<div class='qc-header-post'>
 
<!--Div post-ads-->  
<div class='post-ads'>
<!--Div nội dung bên trái -->
<ul>
 
<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Báo Giá Gỗ ghép / ván ghép / Plywood 
</a> 
</li>

<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Ván gỗ phủ veneer</a> 
</li>

<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Ván gỗ phủ keo bóng</a> 
</li>
 
<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Ván gỗ phủ melamine trắng</a> 
</li>

<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Gỗ Sồi
</a> 
</li>  
<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Gỗ muồng
</a> 
</li>  
<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Gỗ cao su, gỗ tràm xẻ sấy
</a> 
</li>  
<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Sấy Thuê Gỗ
</a> 
</li>  
 
<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Thớt gỗ
</a> 
</li>  

<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Mặt Bàn Ghế Học Sinh, Mặt Bàn Ghế Cafe, Mặt Bàn ghế phòng ăn
</a> 
</li>  

<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Bán Ký Gửi Phụ Kiện, Vật Tư Ngành Gỗ
</a> 
</li>  

<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Bán Ký Gửi Sàn Gỗ Kỹ Thuật
</a> 
</li>  

<li style="text-align: justify;font-size: 16px;"> 
<a href=""> 
Xưởng May Rèm Cửa 
</a> 
</li>  
 
 
</ul> 
</div>
<!--End Div post-ads--> 
 
<!--Div post-right-->   
<div class='post-right'>
<p class='post-excerpt' style="text-align: justify">
<!--Tiêu đề nội dung bên phải. -->
<b>
  Liên hệ mua gỗ ghép cao su, gia công ghép gỗ sồi, gỗ óc chó, gỗ muồng, gỗ xoài, báo giá gỗ công nghiệp mdf, plywood    : 0960 970 650 
</b>
</p>
 
<!--Div related-postsBox-->   
<div id='related-postsBox'>
<h4>
<i class='fa fa-bullhorn'/>
Mục Lục
</h4>
<!--Nội dung phía dưới phần mục lục-->
 
<!--Div recentpostarea-->   
<div class="recentpostarea">

<style type="text/css"> .recentpostarea {list-style-type: none;counter-reset: countposts;} .recentpostarea a {text-decoration: none; color: #000000;} .recentpostarea a:hover {color: #000;} .recentpostarea li:before {background: #000000;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;} li.r-p-title { padding: 5px 0px;} .r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;} .recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 12px;} </style>
<script type = "text/JavaScript"> function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }} </script>
<script> var posts_number = 3; var posts_date = true; var post_summary = true; var summary_chars = 60; </script>
<script type="text/javascript">
    quotes2recentpostsStyle2 = new Array()
    quotes2recentpostsStyle2[0] = "GoogleAds"
    quotes2recentpostsStyle2[1] = "SeoTop"
    quotes2recentpostsStyle2[2] = "Kho ván gỗ ghép"
    randomquote2recentpostsStyle2 = Math.random() * (quotes2recentpostsStyle2.length)
    randomquote2recentpostsStyle2 = Math.floor(randomquote2recentpostsStyle2)
    var randLabel = quotes2recentpostsStyle2[randomquote2recentpostsStyle2];
document.write('<script src="'+"https://www.digitalnomad.vn/feeds/posts/default/-/"+randLabel+"?orderby=published&amp;alt=json-in-script"+'&amp;callback=showrecentposts"><\/script>')
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</div>   
<!--End Div recentpostarea-->   
</div>
<!--Div related-postsBox-->   
</div>
<!--Div post-right-->     
</div>
<!-- Div qc-header-post-->
<!--End Code Chèn Quảng Cáo - Bài Viết Gần Đây Theo Nhãn -->

Box Float Right - Hộp Quảng Cáo bên tay phải :

Lưu ý nếu muốn QC bên tay trái bạn đổi  
float:right;
Thành :
float:left;

<!--Box Float Right --> 
<style>
#rp-pre {
float:right;
width:300px;
padding-left:10px;
}
#rp-content {
border:1px solid #bbb;
background:#eee;
}
#rp-title {
text-align: center;
background:#bbb;
font-weight:bold;
color:#F95107;
margin:3px;
padding-bottom:2px;
}
#rp-posts {
position:relative;
left:-20px;
}
#rp-posts a {
background: url(http://2.bp.blogspot.com/-I4fN2fTtnOQ/UQ4vcRfCi_I/AAAAAAAAHlU/0J_6K9zXNTc/s1600/icon-related-post-namkna-blogspot-com.gif) no-repeat left;
padding-left:13px;
}

#rp-posts ul li {
list-style :none;

  </style> 

<!-- Div rp-pre --> 
<div id='rp-pre'> 
 
<!-- Div rp-content --> 
<div id='rp-content'>
 
<div id='rp-title'>Tiêu Đề Box</div>
<div id='rp-posts'/></div>
<!--Nội dung -->
<ul>
 
<li style="text-align: justify;font-size: 16px;">
<a href="">
Báo Giá Gỗ ghép / ván ghép / Plywood
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ veneer</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ keo bóng</a>
</li>
 
<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ melamine trắng</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ Sồi
</a>
</li> 
<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ muồng
</a>
</li> 
<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ cao su, gỗ tràm xẻ sấy
</a>
</li> 
<li style="text-align: justify;font-size: 16px;">
<a href="">
Sấy Thuê Gỗ
</a>
</li> 
 
<li style="text-align: justify;font-size: 16px;">
<a href="">
Thớt gỗ
</a>
</li> 

<li style="text-align: justify;font-size: 16px;">
<a href="">
Mặt Bàn Ghế Học Sinh, Mặt Bàn Ghế Cafe, Mặt Bàn ghế phòng ăn
</a>
</li> 

<li style="text-align: justify;font-size: 16px;">
<a href="">
Bán Ký Gửi Phụ Kiện, Vật Tư Ngành Gỗ
</a>
</li> 

<li style="text-align: justify;font-size: 16px;">
<a href="">
Bán Ký Gửi Sàn Gỗ Kỹ Thuật
</a>
</li> 

<li style="text-align: justify;font-size: 16px;">
<a href="">
Xưởng May Rèm Cửa
</a>
</li> 
 
 
</ul>   
 
</div>
<!-- End Div rp-content --> 
</div>
<!-- End Div rp-pre -->
<!--End Box Float Right --> 

Code Div Wrap 3 cột - Div Cột Giữa - Div Cột Trái - Div Cột Phải :

<!-- Wrap 3 cot - Cot giua - cot Trai - Cot Phai --> 
<style>
#wrap {
    width:250px;
    height: 250px;
    background: yellow;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
}
#l {
    float: left;
}
#r {
    float: right;
}
#l, #r {
    width: 49%;
}
#l:before, #r:before {
    content:"";
    width: 125px;
    height: 250px;
}
#l:before {
    float: right;
}
#r:before {
    float: left;

  </style> 
 
<div>
 
<div id="wrap">     
 Nội dung cột giữa    
</div>
 
<div id="l">
<p>
 Nội dung cột trái          
</p>
</div> 
 
    <div id="r">
      <p>
Nội dung cột phải       
      </p>
</div>
 
</div>
<!-- End Wrap 3 cot - Cot giua - cot Trai - Cot Phai --> 
 
 
 
 
Code Sidebar ẩn hiện nội dung :

<link href="https://www.jqueryscript.net/demo/Minimal-Drawer-Sidebar-Plugin-with-jQuery-Sidebar-js/css/sidebar.css" rel="stylesheet"/>   
<div id="sidebar" data-position="right">

<!--icons--> 
        <div class="icons">
             
                <div class="icon" data-content="beispiel1">
                    <img src="https://www.jqueryscript.net/demo/Minimal-Drawer-Sidebar-Plugin-with-jQuery-Sidebar-js/img/icon.png"/>
                </div>
                <div class="icon" data-content="beispiel2">
                    <img src="https://www.jqueryscript.net/demo/Minimal-Drawer-Sidebar-Plugin-with-jQuery-Sidebar-js/img/icon.png"/>
                </div>
             
            </div>
<!--End icons-->
 
 
<div class="contents">
 
                <div class="content hide" data-content="beispiel1">
                    <h3>Mục Lục Nội Dung Bài Viết</h3>
<ul>                  
<li style="text-align: justify"> 
Tổng hợp Layot code dùng đăng bài viết bằng Html, Css & Javascript trên trang Blogspot
</li>
<li style="text-align: justify"> 
  Cấu trúc đăng bài dạng Sidebar trên link : https://www.jqueryscript.net/tags.php?/sticky%20sidebar                 
</li>
 
</ul>                     
                </div>
             
<div class="content hide" data-content="beispiel2">
<h3>Link bài viết liên quan Sidebar </h3>
<ul>                  
<li style="text-align: justify"> 
Tổng hợp Layot code dùng đăng bài viết bằng Html, Css & Javascript trên trang Blogspot
</li>
<li style="text-align: justify"> 
Cấu trúc đăng bài dạng Sidebar trên link : https://www.jqueryscript.net/tags.php?/sticky%20sidebar                
</li>
<li style="text-align: justify"> 
[ Cấu trúc bài viết sidebar bên phải ] : https://www.jqueryscript.net/other/fix-sidebar-bottom-sticksy.html
</li>
<li style="text-align: justify"> 
https://www.jqueryscript.net/other/pin-element-top-sticky.html
</li>
<li style="text-align: justify"> 
[Cấu trúc bài viết sidebar bên trái ] : https://www.jqueryscript.net/layout/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin.html
</li>
<li style="text-align: justify"> 
[Cấu trúc bài viết sidebar link neo chuyển tới nội dung trên bài viết ] :  https://www.jqueryscript.net/other/jQuery-Plugin-For-Sticky-Sidebar-Widgets-scrollsWith.html
</li>
<li style="text-align: justify"> 
[Sidebar phải ẩn hiện nội dung bên phải ] : https://www.jqueryscript.net/other/Minimal-Drawer-Sidebar-Plugin-with-jQuery-Sidebar-js.html
</li>
<li style="text-align: justify"> 
[Cấu trúc bài viết sidebar link neo bên trái chuyển hướng đến nội dung trên trang ] : https://www.jqueryscript.net/layout/jQuery-Plugin-for-Tree-Widget-jqTree.html
</li>                         
</ul> 

  </div>
 
 
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Minimal-Drawer-Sidebar-Plugin-with-jQuery-Sidebar-js/js/sidebar.js"></script>

Code SideBar bên trái bài viết :

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<!--style-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
<link href="https://www.jqueryscript.net/demo/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin/css/style.css" rel="stylesheet" />
<!--header-->
<!--<header>-->
<div class="jquery-script-center">
<ul>
<li><a href="https://www.jqueryscript.net/layout/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin.html">Download This Plugin</a></li>
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads">
Code googe Ads
</div>
<div class="jquery-script-clear"></div>
</div>
<!--</header>-->
<!--end header-->

<!--navigation-->
<nav>
<ul>
<li class="active"><a href="/">Sidebar - mẫu 1</a></li>
<li><a href="#">Sidebar Mẫu 2</a></li>
<li><a href="#">Sidebar Mẫu 3</a></li>
</ul>
</nav>
<!--end navigation-->
<!--main-->
<main class="clearfix">
<!--sidebar-->
<aside id="sidebar">
<div class="inside">
<h2>Tiêu đề Sidebar 1</h2>
<p>Nội dung tiêu đề Sidebar 1</p>
<h2>Tiêu đề Sidebar 2</h2>
<p>Nội dung tiêu đề Sidebar 1</p>
</div>
</aside>
<!--end sidebar-->
<!--Nội Dung Chính Bên Phải-->
<div class="main_content" id="content">
<h1>Tiêu đề H1 nội dung bên phải Sidebar trên trang bài viết </h1>
<p>Nội dung H2</p>
  <h2>Tiêu đề H2</h2>
<p>Nội dung H2</p>
<h3>Tiêu đề H3.1</h3>
<p>Nội dung H3.1</p>
<h3>Tiêu đề H3.2</h3>
<p>Nội dung H3.2</p>
<h3>Tiêu đề H3.3</h3>
<p>Nội dung H3.3</p>
<h3>Tiêu đề H3.4</h3>
<p>Nội dung H3.4</p>
<h3>Tiêu đề H3.5</h3>
<p>Nội dung H3.5</p>
</div>
<!--end main content-->
</main>
<!--end main-->
<!--footer-->
<footer> Chân Trang </footer>
<!--end footer-->

<!--js-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin/js/stickySidebar.js"></script>
<script>
        $(document).ready(function() {   
            $('#sidebar').stickySidebar({
                sidebarTopMargin: 20,
                footerThreshold: 100
            });
        });
        </script>

Code Sidebar bên phải bài viết :

    <style>
        *, *::after { box-sizing: border-box; }

        body {
            font-family: "Open Sans", Helvetica, sans-serif;
            color:#222;
            margin: 10px 20px;
            font-size: 18px;
            min-height: 250vh;
            background: linear-gradient(135deg, rgb(191, 233, 193) 0%, rgb(191, 233, 193) 1%,rgb(194, 206, 183) 1%, rgb(194, 206, 183) 56%,rgb(197, 180, 173) 56%, rgb(197, 180, 173) 75%,rgb(201, 153, 163) 75%, rgb(201, 153, 163) 80%,rgb(204, 126, 152) 80%, rgb(204, 126, 152) 87%,rgb(207, 100, 142) 87%, rgb(207, 100, 142) 97%,rgb(210, 73, 132) 97%, rgb(210, 73, 132) 100%);
        }

        .container {
            max-width: 728px;
            margin: 0 auto;
        }

        .wrapper { display: flex; }

        header, footer {
            font-size: 2em;
            background-color:#e5e5e5;
            padding: 15px;
            text-align:center;
        }

        main {
            flex: 1;
            padding:0 20px;
            line-height: 1.5em;
        }

        aside {
            width:30%;
            min-width: 150px;
            max-width: 300px;
        }

        aside .widget {
            padding:15px;
            margin:7px 0;
            text-align:center;
            background-color:#e5e5e5;
        }

        @media (max-width: 1000px){
            body { font-size: 16px; }
            aside {
                max-width: 200px;
            }
        }
    </style>
 
<div class="container">
<header>Sticksy.js jQuery Example</header>
<div class="jquery-script-ads" style="margin:30px auto">     
Google Ads         
 </div>
    <div class="wrapper">
        <main>
                 
             <h2>Tiêu Đề H2 nội dung bên trái sideBar</h2>
            <p>
Luận án này tham gia vào một cuộc trò chuyện sôi nổi trong giới khoa học xã hội về bản chất đầy thách thức của lao động chăm sóc cũng như các cuộc thảo luận về nữ quyền về vai trò của con gái trong văn hóa Victoria.
            </p>
            <p>
Nó khám phá sự hiện diện văn học của cô con gái quản lý tầng lớp trung lưu trong ngôi nhà thời Victoria. Nói chung, các tiểu thuyết trong nghiên cứu này nêu rõ những lo lắng của xã hội về vai trò không rõ ràng và không ổn định của con gái trong gia đình, công việc đầy thử thách về thể chất và tinh thần mà họ và tất cả phụ nữ phải làm, và cuộc đấu tranh để con gái tìm được vị trí trong hệ thống phân cấp gia đình thường được cấu trúc không phải bằng nỗ lực hay tình cảm, mà bởi những vai trò truyền thống bị quy định, vốn không dễ dàng thích nghi với việc quản lý con gái, ngay cả khi họ là người cùng nhau nắm giữ gia đình.
            </p>
            <p>
Con gái quản lý là một vấn đề không được tính đến trong bất kỳ cấu trúc hoặc hệ tư tưởng thông thường nào trong gia đình, vì vậy không có vai trò, không có trách nhiệm rõ ràng và không có ranh giới nào có thể, và được cho là nên xác định nghĩa vụ của cô ấy, cho cô ấy cơ hội trao quyền hoặc đặt ra những điều cần thiết giới hạn về nhiệm vụ văn hóa rộng lớn mà cô ấy có để an ủi và chăm sóc người khác.
            </p>
            <p>
Những thái cực mà cô thường bị đẩy để bộc lộ những căng thẳng và xung đột tiềm ẩn vì quyền lực và quyền tự chủ vốn có trong lao động giúp việc gia đình mà không có biểu tượng thiên thần trong gia đình hùng biện vốn thường che đậy những khó khăn trong cuộc sống gia đình của phụ nữ. Cô ấy không giành được quyền lực hoặc sự ổn định cho dù cô ấy yêu thương hay thậm chí cần thiết đến mức nào đối với một gia đình bởi vì đơn giản là cô ấy không có vị trí nào trong cấu trúc gia đình của cha mẹ. Do đó, cô con gái quản lý đã bộc lộ một vết nứt sâu sắc trong cấu trúc của gia đình truyền thống thời Victoria bằng cách cho thấy rằng nó thường không thể chứa đựng, bảo vệ hoặc xác nhận một thành viên gia đình phi truyền thống yêu thương vì nó coi trọng thứ bậc truyền thống hơn tình cảm hoặc nỗ lực. Tuy nhiên, khi làm như vậy, nó cũng gợi ý rằng nếu vị trí không phải là đam mê mới là vấn đề quan trọng, thì chỉ cần một người phụ nữ đảm nhận vị trí phù hợp trong gia đình thì mối liên hệ tình cảm sâu sắc với người khác là không cần thiết để cô ấy quan tâm đến người khác một cách thành thạo

            </p>
            <p>
Luận án này tham gia vào một cuộc trò chuyện sôi nổi trong giới khoa học xã hội về bản chất đầy thách thức của lao động chăm sóc cũng như các cuộc thảo luận về nữ quyền về vai trò của con gái trong văn hóa Victoria.


          </p>
            <p>
Nó khám phá sự hiện diện văn học của cô con gái quản lý tầng lớp trung lưu trong ngôi nhà thời Victoria. Nói chung, các tiểu thuyết trong nghiên cứu này nêu rõ những lo lắng của xã hội về vai trò không rõ ràng và không ổn định của con gái trong gia đình, công việc đầy thử thách về thể chất và tinh thần mà họ và tất cả phụ nữ phải làm, và cuộc đấu tranh để con gái tìm được vị trí trong hệ thống phân cấp gia đình thường được cấu trúc không phải bằng nỗ lực hay tình cảm, mà bởi những vai trò truyền thống bị quy định, vốn không dễ dàng thích nghi với việc quản lý con gái, ngay cả khi họ là người cùng nhau nắm giữ gia đình.

            </p>
             
        </main>
        <aside class="sidebar">
            <div class="widget is-sticky">
                <h2>Ad</h2>
                <p>Nội dung Ads</p>
            </div>
            <div class="widget">
                <h2>Article 1</h2>
                <p>Nội dung Article 1</p>
            </div>
            <div class="widget">
                <h2>Article 2</h2>
                <p>Nội dung Article 2</p>
            </div>
        </aside>
    </div>
    <footer>Chân Trang</footer>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://www.jqueryscript.net/demo/fix-sidebar-bottom-sticksy/sticksy.js"></script>
<script>
    // $('.widget.is-sticky').sticksy()
    new Sticksy(document.querySelector('.is-sticky'))
</script>

Code Sidebar Mục lục cố định bên phải nội dung bài viết :

<!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
    html { min-height:100%}
    body {background: linear-gradient(45deg, #83776a, #0f547f); color:#fff; font-family:'Roboto'; line-height:1.7;}
    h1 { color:#222;}
        .sidebar {
            padding: 10px;
            background-color: #ECE9F2;
            color: #222;
            border-radius:3px;
        }
        .container { max-width:768px;}
    </style>
  
<div class="jumbotron">
            <div class="container">  
                <h1>jQuery scrollsWith plugin</h1>
                <div class="jquery-script-ads">                 
Code Google Ads                 
              </div>
            </div>
        </div>
      <div class="container">
          <div class="row">
              <div class="col-xs-6 col-sm-8 col-md-9">  
                  <div id="text1">
                      <h2>Ví Dụ vị trí Text 1</h2>
Tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum.
                    Bài tập về nhà hoặc đến Văn phòng dolor sit amet, một nhiếp ảnh kỹ thuật số, hoặc cho bất kỳ magna At vero và các kết hợp chỉ cho phép nội dung có thể hiện trạng thái bình tĩnh không tồi tệ dolore magna nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Đó là lý do tại sao, trong những năm tất cả tôi sẽ đến, ai sẽ không nghiên cứu kỹ hơn về lợi thế của công thức này. Bài tập về nhà hoặc đến Văn phòng dolor sit amet, một nhiếp ảnh kỹ thuật số, hoặc cho bất kỳ magna At vero và các kết hợp chỉ cho phép nội dung có thể hiện trạng thái bình tĩnh không tồi tệ dolore magna nulla.

                   </div>
                 
                  <div id="text2">
                    <h2>Ví dụ vị Trí Text 2</h2>
Nam liber tempor họ độc lập ở mazim.Không thường chúng tôi mới có thể đầu tư để làm rang. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Đó là lý do tại sao, trong những năm tất cả tôi sẽ đến, ai sẽ không nghiên cứu kỹ hơn về lợi thế của công thức này.
                    Duis autem vel eum ipsum dolor in hendrerit in vulputate velit esse moltieequat, vel illum dolore eu feugiat nulla secureisis.
                    Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, Nhưng cảm giác của hai nỗi buồn đau, sed diam diam labore magna chúng cho cái ác, và anh ta, và mỗi tháng, và hàng chục cuộc chạy dài trơn tru lao động của nó, và Duis autem vel amet, dolor không có để xem trước. tuy đắt cũng như ngồi biển Thánh. Củ cà rốt ipsum lorem. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, nhưng trong quá trình lao động và đau đớn để trở nên thú vị nhất trong đường kính đã chạy ổn định nhịp độ Eirmod mỗi tháng.

                  </div>
                  <div id="text3">
                      <h2>Ví Dụ vị trí Text 3</h2>
Consetetur sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri.
                    Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum.

                    </div>
                  <div data-sidebar-bottom="sidebar2"></div>
              </div>
              <div class="col-xs-6 col-sm-4 col-md-3">
                  <div data-sidebar-dummy="sidebar2"></div>
                  <div id="sidebar2" class="sidebar">
                      <ul class="nav nav-pills nav-stacked">
                        <li role="presentation"><a href="#text1">Ví dụ vị trí Text 1</a></li>
                        <li role="presentation"><a href="#text2">Ví dụ vị trí Text 2</a></li>
                        <li role="presentation"><a href="#text3">Ví dụ vị trí Text 3</a></li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>
     
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Sticky-Sidebar-Widgets-scrollsWith/scrollsWith.js"></script>

    <script type="text/javascript">
       
        $("#sidebar2").scrollsWith({
            margin_top: 30
        });
    </script>
   
    <script type="text/javascript">
        /*SMOOTH SCROLL*/
        $(function() {
            $('a[href*="#"]:not([href="#"])').click(function() {
              if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                  $('html, body').animate({
                    scrollTop: target.offset().top
                  }, 1000);
                  return false;
                }
              }
            });
      });
     
      /*Anchor active*/
      $(window).on("scroll", function(){
            var scrollTop = $( window ).scrollTop();
            $('#sidebar1 a').each(function () {
                var currLink = $(this);
                var refElement = $(currLink.attr("href"));
                if (refElement && refElement.offset().top <= scrollTop && refElement.offset().top + refElement.height() > scrollTop) {
                    $('#sidebar1 li').removeClass("active");
                    currLink.parent("li").addClass("active");
                }
                else{
                    currLink.parent("li").removeClass("active");
                }
            }); 
           
            $('#sidebar2 a').each(function () {
                var currLink = $(this);
                var refElement = $(currLink.attr("href"));
                if (refElement && refElement.offset().top <= scrollTop && refElement.offset().top + refElement.height() > scrollTop) {
                    $('#sidebar2 li').removeClass("active");
                    currLink.parent("li").addClass("active");
                }
                else{
                    currLink.parent("li").removeClass("active");
                }
            }); 
      })

    </script>

Code Sticky Sidebar mục lục - menu bên trái nội dung bài viết :

    <link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Plugin-for-Tree-Widget-jqTree/extra/css/gridless.css">
    <link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Plugin-for-Tree-Widget-jqTree/extra/prism/prism.css">
    <link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Plugin-for-Tree-Widget-jqTree/jqtree.css">
    <link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Plugin-for-Tree-Widget-jqTree/extra/css/documentation.css">
    <link href="https://fonts.googleapis.com/css?family=Corben:bold&amp;v1" rel='stylesheet' type='text/css'>
    <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-for-Tree-Widget-jqTree/extra/js/jquery-1.9.1.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-for-Tree-Widget-jqTree/extra/prism/prism.js"></script>
    <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-for-Tree-Widget-jqTree/tree.jquery.js"></script>
   
<div id="sidebar">
    <ul class="first">
        <li>
            <a href="#jqtree">jqTree</a>
            <ul>
                <li><a href="#introduction">Introduction</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#demo">Demo</a></li>
                <li><a href="#requirements">Requirements</a></li>
                <li><a href="#downloads">Downloads</a></li>
                <li><a href="#tutorial">Tutorial</a></li>
                <li><a href="#examples">Examples</a></li>
                <li><a href="#changelog">Changelog</a></li>
            </ul>
        </li>
        <li>
            <a href="#tree-options">Tree options</a>
            <ul>
                <li><a href="#tree-options-data">data</a></li>
                <li><a href="#tree-options-data-url">dataUrl</a></li>
                <li><a href="#tree-options-autoopen">autoOpen</a></li>
                <li><a href="#tree-options-savestate">saveState</a></li>
                <li><a href="#tree-options-draganddrop">dragAndDrop</a></li>
                <li><a href="#tree-options-selectable">selectable</a></li>
                <li><a href="#tree-options-oncanselectnode">onCanSelectNode</a></li>
                <li><a href="#tree-options-oncreateli">onCreateLi</a></li>
                <li><a href="#tree-options-onismovehandle">onIsMoveHandle</a></li>
                <li><a href="#tree-options-oncanmove">onCanMove</a></li>
                <li><a href="#tree-options-oncanmoveto">onCanMoveTo</a></li>
                <li><a href="#tree-options-autoescape">autoEscape</a></li>
                <li><a href="#tree-options-slide">slide</a></li>
            </ul>
        </li>
        <li>
            <a href="#functions">Functions</a>
            <ul>
                <li><a href="#functions-loadData">loadData</a></li>
                <li><a href="#functions-loaddatafromurl">loadDataFromUrl</a></li>
                <li><a href="#functions-tojson">toJson</a></li>
                <li><a href="#functions-getnodebyid">getNodeById</a></li>
                <li><a href="#functions-selectnode">selectNode</a></li>
                <li><a href="#functions-opennode">openNode</a></li>
                <li><a href="#functions-closenode">closeNode</a></li>
                <li><a href="#functions-getselectednode">getSelectedNode</a></li>
                <li><a href="#functions-addnodeafter">addNodeAfter</a></li>
                <li><a href="#functions-addnodebefore">addNodeBefore</a></li>
                <li><a href="#functions-addparentnode">addParentNode</a></li>
                <li><a href="#functions-removenode">removeNode</a></li>
                <li><a href="#functions-appendnode">appendNode</a></li>
                <li><a href="#functions-updatenode">updateNode</a></li>
                <li><a href="#functions-movenode">moveNode</a></li>
                <li><a href="#functions-toggle">toggle</a></li>
            </ul>
        </li>
        <li>
            <a href="#events">Events</a>
            <ul>
                <li><a href="#event-tree-click">tree.click</a></li>
                <li><a href="#event-tree-select">tree.select</a></li>
                <li><a href="#event-tree-contextmenu">tree.contextmenu</a></li>
                <li><a href="#event-tree-move">tree.move</a></li>
                <li><a href="#event-tree-init">tree.init</a></li>
                <li><a href="#event-tree-open">tree.open</a></li>
            </ul>
        </li>
    </ul>
</div>
<div id="page">
    <div class="group">
        <div id="main-title">
            <img src="tree_logo.png" class="logo" />
            <h1 id="jqtree">jqTree</h1>
        </div>
    </div>
    <p id="introduction">
        JqTree is a tree widget.
    </p>
    <h4 id="features">Features</h4>
    <ul>
        <li>Create a tree from JSON data</li>
        <li>Drag and drop</li>
        <li>Works on ie7+, firefox 3.6+, chrome and safari</li>
        <li>Written in Coffeescript</li>
    </ul>
    <p>
        The project is <a href="https://github.com/mbraak/jqTree" rel="nofollow">hosted on github</a>,
        has a <a href="test/test.html" rel="nofollow">test suite</a>.
    </p>
    <div class="group" id="demo">
        <div class="container-left">
            <div class="inner">
<pre><code class="language-javascript dark">
var data = [
    {
        label: 'node1',
        children: [
            { label: 'child1' },
            { label: 'child2' }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];
$('#tree1').tree({
    data: data,
    autoOpen: true,
    dragAndDrop: true
});
</code></pre>
        </div>
            </div>
        <div class="container-right">
            <div class="inner">
                <div id="tree1"></div>
            </div>
        </div>
    </div>

    <h4 id="requirements">Requirements</h4>
    <ul>
        <li><a href="https://jquery.com" rel="nofollow">jQuery</a> 1.5+</li>
    </ul>
    <h4 id="downloads">Downloads</h4>
    <ul>
        <li>All (version 0.15): <a href="https://www.jqueryscript.net/layout/jQuery-Plugin-for-Tree-Widget-jqTree.html">jqTree.zip</a></li>
    </ul>
    <h4 id="tutorial">Tutorial</h4>
    <ul>
        <li>
            Include <a href="https://code.jquery.com/jquery-1.9.1.min.js">jQuery</a>.
            <pre><code class="language-markup">&lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;</code></pre>
        </li>
        <li>
            Include tree.jquery.js:
            <pre><code class="language-markup">&lt;script src="tree.jquery.js"&gt;&lt;/script&gt;</code></pre>
        </li>
        <li>
            Include jqtree.css:
            <pre><code class="language-markup">&lt;link rel="stylesheet" href="jqtree.css"&gt;</code></pre>
        </li>
        <li>
            Optionally, for saveState include <a href="https://github.com/carhartl/jquery-cookie" rel="nofollow">jquery-cookie</a>:
            <pre><code class="language-markup">&lt;script src="jquery.cookie.js"&gt;&lt;/script&gt;</code></pre>
        </li>
        <li>
            Create a div.
            <pre><code class="language-markup">&lt;div id="tree1"&gt;&lt;/div&gt;</code></pre>
        </li>
        <li>
            Create tree data.
<pre><code class="language-javascript">
var data = [
    {
        label: 'node1',
        children: [
            { label: 'child1' },
            { label: 'child2' }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];
</code></pre>
            </li>
            <li>
                Create tree widget.
<pre><code class="language-javascript">
$(function() {
    $('#tree1').tree({
        data: data
    });
});
</code></pre>
            </li>
            <li>
                Alternatively, get the data from the server.
<pre><code class="language-javascript">
$.getJSON(
    '/some_url/',
    function(data) {
        $('#tree1').tree({
            data: data
        });
    }
);
</code></pre>
        </li>
    </ul>

    <h4 id="examples">Examples</h4>

    <ul>
        <li><a href="examples/load_json_data.html">Example 1 - load json data</a></li>
        <li><a href="examples/load_json_data_from_server.html">Example 2 - load json data from the server</a></li>
        <li><a href="examples/drag_and_drop.html">Example 3 - drag and drop</a></li>
        <li><a href="examples/save_state.html">Example 4 - save the state</a></li>
        <li><a href="examples/load_on_demand.html">Example 5 - load nodes on demand from the server</a></li>
        <li><a href="examples/autoescape.html">Example 6 - autoEscape</a></li>
        <li><a href="examples/autoscroll.html">Example 7 - autoscroll</a></li>
    </ul>

    <h4 id="changelog">Changelog</h4>

    <h5>0.15 (march 16 2013)</h5>
    <ul>
        <li>Issue 100: Clicking on the jqtree-element element will trigger click event</li>
        <li>Issue 102: Add original event to tree.move event</li>
        <li>Issue 103: Added getLevel function to Node class</li>
        <li>Issue 104: The addNodeBefore method must return the new node</li>
        <li>Issue 105: Added nodeClass option</li>
        <li>Issue 112: Fix call to iterate in removeNode</li>
        <li>Issue 118: Deselect a node when click and already selected</li>
        <li>Issue 119: Make it easier to reload a subtree</li>
        <li>Issue 121: Unselect node if it's reloaded by loadDataFromUrl</li>
    </ul>

    <h5>0.14 (december 2 2012)</h5>
    <h6>Api changes</h6>
    <ul>
        <li>Removed parameter <strong>must_open_parents</strong> from function <strong>selectNode</strong>.</li>
        <li>Changed <strong>slide</strong> parameter in functions <strong>openNode</strong> and <strong>closeNode</strong>.</li>
    </ul>
    <h6>Issues</h6>
    <ul>
        <li>Issue 80: Support more options for loading data from the server. E.g. the 'post' method</li>
        <li>Issue 81: getSelectedNode must return false if node is removed</li>
        <li>Issue 82: Autoscroll for drag-and-drop</li>
        <li>Issue 85: Option to turn slide animation on or off</li>
        <li>Issue 86: The openNode function must automatically open parents</li>
        <li>Issue 87: Remove the must_open_parents parameter from the selectNode function</li>
        <li>Issue 88: selectNode must also work if selectable option is false</li>
        <li>Issue 89: Clicking in title with img or em does not work</li>
        <li>Issue 96: Added jqtree_common class to avoid css clashes</li>
    </ul>

    <h5>0.13 (october 10 2012)</h5>
    <ul>
        <li>Issue 54: Added tree.select event</li>
        <li>Issue 63: Fixed contextmenu event</li>
        <li>Issue 67: Use unicode characters for triangle buttons</li>
        <li>Issue 70: Load data from the server using the loadData function</li>
        <li>Issue 78: Drag and drop is trigger happy</li>
    </ul>

    <h5>0.12 (august 14 2012)</h5>
    <ul>
        <li>Issue 46: Added tree.refresh event</li>
        <li>Issue 47: Function 'selectNode' must properly open the parent nodes</li>
        <li>Issue 49: Make sure that widget functions can be called in the 'tree.init' event</li>
        <li>Issue 50: Add namespace to css classes</li>
        <li>Issue 51: closeNode to collapse tree doesn't work</li>
        <li>Issue 55: Load-on-demand from the server</li>
        <li>Issue 58: Added updateNode function</li>
        <li>Issue 59: Added moveNode function</li>
        <li>Issue 60: Use native JSON.stringify function</li>
    </ul>

    <h5>0.11 (july 8 2012)</h5>
    <ul>
        <li>Autoescape text</li>
        <li>Added autoEscape option</li>
        <li>Issue 33: appendNode does not correctly refresh the tree</li>
        <li>Issue 34: unset internal pointer to previously selected node on DOM deselect</li>
        <li>Issue 38: Correctly check if browser has support for localstorage</li>
        <li>Issue 41: Open nodes are not displayed correctly in ie7</li>
    </ul>

    <h5>0.10 (june 10 2012)</h5>
    <ul>
        <li>Optimized getNodeById</li>
        <li>Issue #18 and #26: Made comparison in getNodeById less strict</li>
        <li>Added function prependNode</li>
        <li>Added 'data-url' option</li>
        <li>Added removeNode function</li>
        <li>Issue #24: Tree with jquery ui Dialog: expand causes resize and move problem</li>
        <li>Added Travis ci support</li>
        <li>Added addNodeAfter, addNodeBefore and addParentNode</li>
        <li>Renamed icons.png to jqtree-icons.png</li>
        <li>selectNode with empty node deselects the current node</li>
    </ul>

    <h5>0.9 (may 9 2012)</h5>
    <ul>
        <li>Issue #15: 'tree.open' event is not triggered when dragging nodes</li>
        <li>Issue #18: Allow moveNode to be canceled through ev.preventDefault()</li>
        <li>Use sprite for images</li>
        <li>Added function closeNode</li>
        <li>Added support for localstorage</li>
        <li>Implemented alternative data format</li>
    </ul>

    <h5>0.8 (april 18 2012)</h5>
    <ul>
        <li>Replace jquery.ui widget with SimpleWidget</li>
        <li>Added 'previous_parent' to 'tree.move' event</li>
        <li>Add posibility to load subtree</li>
        <li>Added 'tree.open' and 'tree.close' events</li>
    </ul>

    <h4 id="tree-options">Tree options</h4>

    <h5 id="tree-options-data">data</h5>
    <p>
        Define the contents of the tree. The data is a nested array of objects. This option is required.
        <br>
        It looks like this:
    </p>
<pre><code class="language-javascript">
var data = [
    {
        label: 'node1',
        children: [
            { label: 'child1' },
            { label: 'child2' }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];
$('#tree1').tree({data: data});
</code></pre>
    <ul>
        <li>label: label of a node (required)</li>
        <li>children: array of child nodes (optional)</li>
    </ul>
    <p>
        You can also include other data in the objects. You can later access this data.
        <br>
        For example, to add an id:
    </p>
<pre><code class="language-javascript">
{
    label: 'node1',
    id: 1
}
</code></pre>

    <h5 id="tree-options-data-url">dataUrl</h5>
    <p>
        Load the node data from this url.
    </p>

<pre><code class="language-javascript">
$('#tree1').tree({
   dataUrl: '/example_data.json'
});
</code></pre>

    <p>
        You can also set the <strong>data-url</strong> attribute on the dom element:
    </p>

<pre><code class="language-javascript">
&lt;div id="tree1" data-url="/example_data.json"&gt;&lt;/div&gt;
&lt;script&gt;
    $('#tree1').tree();
&lt;/script&gt;
</code></pre>

    <h5 id="tree-options-autoopen">autoOpen</h5>
    <p>
        Open nodes initially.
    </p>
    <ul>
        <li>
            <strong>true</strong>: open all nodes.
        </li>
        <li>
            <strong>false (default)</strong>: do nothing
        </li>
        <li><strong>n</strong>: open n levels</li>
    </ul>
    <p>
        Open all nodes initially:
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    autoOpen: true
});
</code></pre>
    <p>
        Open first level nodes:
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    autoOpen: 0
});
</code></pre>
    <h5 id="tree-options-savestate">saveState</h5>
    <p>
        Save and restore the state of the tree automatically. Saves in a cookie which nodes are opened and selected.
        <br>
        The state is saved in localstorage. In browsers that do not support localstorage, the state is saved in a cookie.
        For this to work, please include <a href="https://github.com/carhartl/jquery-cookie">jquery-cookie</a>.
    </p>
    <p>
        For this to work, you should give each node in the tree data an id field:
    </p>
<pre><code class="language-javascript">
{
    label: 'node1',
    id: 123,
    childen: [
        label: 'child1',
        id: 124
    ]
}
</code></pre>
    <ul>
        <li><strong>true</strong>: save and restore state in a cookie</li>
        <li><strong>false (default)</strong>: do nothing</li>
        <li><strong>string</strong>: save state and use this name to store in a cookie</li>
    </ul>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    saveState: true
});
</code></pre>
    <p>
        Example: save state in key 'tree1':
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    saveState: 'tree1'
});
</code></pre>
    <h5 id="tree-options-draganddrop">dragAndDrop</h5>
    <p>
        Turn on dragging and dropping of nodes.
    </p>
    <ul>
        <li><strong>true</strong>: turn on drag and drop</li>
        <li><strong>false (default)</strong>: do not allow drag and drop</li>
    </ul>
    <p>
        Example: turn on drag and drop.
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    dragAndDrop: true
});
</code></pre>
    <h5 id="tree-options-selectable">selectable</h5>
    <p>
        Turn on selection of nodes.
    </p>
    <ul>
        <li><strong>true</strong>: turn on selection of nodes</li>
        <li><strong>false (default)</strong>: turn off selection of nodes</li>
    </ul>
    <p>
        Example: turn on selection of nodes.
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    selectable: true
});
</code></pre>

    <h5 id="tree-options-oncanselectnode">onCanSelectNode</h5>
    <p>
        You can set a function to override if a node can be selected. The function gets a node as parameter, and must return true or false.
        <br />
        For this to work, the option 'selectable' must be 'true'.
    </p>
<pre><code class="language-javascript">
// Example: nodes with children cannot be selected
$('#tree1').tree({
    data: data,
    selectable: true
    onCanSelectNode: function(node) {
        if (node.children.length == 0) {
            // Nodes without children can be selected
            return true;
        }
        else {
            // Nodes with children cannot be selected
            return false;
        }
    }
});
</code></pre>

    <h5 id="tree-options-oncreateli">onCreateLi</h5>
    <p>
        The function is called for each created node. You can use this to define extra html.
    </p>
<pre><code class="language-javascript">
$('#tree1).tree({
    data: data,
    onCreateLi: function(node, $li) {
        // Add 'icon' span before title
        $li.find('.jqtree-title').before('&lt;span class="icon"&gt;&lt;/span&gt;');
    }
});
</code></pre>

    <h5 id="tree-options-onismovehandle">onIsMoveHandle</h5>
    <p>
        You can override this function to determine if a dom element can be used to move a node.
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    onIsMoveHandle: function($element) {
        // Only dom elements with 'jqtree-title' class can be used
        // as move handle.
        return ($element.is('.jqtree-title'));
    }
});
</code></pre>

    <h5 id="tree-options-oncanmove">onCanMove</h5>
    <p>
        You can override this function to determine if a node can be moved.
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    dragAndDrop: true,
    onCanMove: function(node) {
        if (! node.parent.parent) {
            // Example: Cannot move root node
            return false;
        }
        else {
            return true;
        }
    }
});
</code></pre>

    <h5 id="tree-options-oncanmoveto">onCanMoveTo</h5>
    <p>
        You can override this function to determine if a node can be moved to a certain position.
    </p>
<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    dragAndDrop: true,
    onCanMoveTo: function(moved_node, target_node, position) {
        if (target_node.is_menu) {
            // Example: can move inside menu, not before or after
            return (position == 'inside');
        }
        else {
            return true;
        }
    }
});
</code></pre>

    <h5 id="tree-options-autoescape">autoEscape</h5>
    <p>
        Determine if text is autoescaped. The default is true.
    </p>

    <h5 id="tree-options-slide">slide</h5>

    <p>
        Turn slide animation on or off. Default is true.
    </p>

<pre><code class="language-javascript">
$('#tree1').tree({
    slide: false
});
</code></pre>


    <h4 id="functions">Functions</h4>
    <h5 id="functions-loadData">loadData</h5>
    <p>
        <strong>function loadData(data);</strong>
        <br>
        <strong>function loadData(data, parent_node);</strong>
        <br>
    </p>
    <p>
        Load data in the tree. The data is array of nodes.
        <br>
        You can <strong>replace the whole tree</strong> or you can <strong>load a subtree</strong>.
    </p>
<pre><code class="language-javascript">
// Assuming the tree exists
var new_data = [
    {
        label: 'node1',
        children: [
            { label: 'child1' },
            { label: 'child2' }
        ]
    },
    {
        label: 'node2',
        children: [
            { label: 'child3' }
        ]
    }
];
$('#tree1').tree('loadData', new_data);
</code></pre>

    <p>
        Load a subtree:
    </p>

<pre><code class="language-javascript">
// Get node by id (this assumes that the nodes have an id)
var node = $('#tree1').tree('getNodeById', 100);

// Add new nodes
var data = [
    { label: 'new node' },
    { label: 'another new node' }
];
$('#tree1').tree('loadData', data, node);
</code></pre>


    <h5 id="functions-loaddatafromurl">loadDataFromUrl</h5>
    <p>
        <strong>function loadDataFromUrl(url);</strong>
        <br>
        <strong>function loadDataFromUrl(url, parent_node);</strong>
        <br>
        <strong>function loadDataFromUrl(parent_node);</strong>
    </p>

    <p>
        Load data in the tree from an url using ajax. You can <strong>replace the whole tree</strong> or you can <strong>load a subtree</strong>.
    </p>

<pre><code class="language-javascript">
$('#tree1').tree('loadDataFromUrl', '/category/tree/');
</code></pre>

    <p>
        Load a subtree:
    </p>

<pre><code class="language-javascript">
var node = $('#tree1').getNodeById(123);
$('#tree1').tree('loadDataFromUrl', '/category/tree/123', node);
</code></pre>

    <p>
        You can also omit the url. In this case jqTree will generate a url for you. This is very useful if you use the load-on-demand feature:
    </p>

<pre><code class="language-javascript">
var $tree = $('#tree1');

$tree.tree({
    dataUrl: '/my_data/'
});

var node = $tree.tree('getNodeById', 456);

// jqTree will load data from /my_data/?node=456
$tree.tree('loadDataFromUrl', node);
</code></pre>

    <p>
        You can also add an <strong>on_finished</strong> callback parameter that will be called when the data is loaded:
    </p>
    <p>
        <strong>function loadDataFromUrl(url, parent_node, on_finished);</strong>
        <br>
        <strong>function loadDataFromUrl(parent_node, on_finished);</strong>
    </p>

<pre><code class="language-javascript">$('#tree1').tree(
    'loadDataFromUrl',
    '/category/tree/123',
    null,
    function() {
        alert('data is loaded');
    }
);
</code></pre>

    <h5 id="functions-tojson">toJson</h5>
    <p>
        <strong>function toJson();</strong>
        <br>
        Get the tree data as json.
    </p>
<pre><code class="language-javascript">
// Assuming the tree exists
$('#tree1').tree('toJson');
</code></pre>

    <h5 id="functions-getnodebyid">getNodeById</h5>
    <p>
        <strong>function getNodeById(id);</strong>
        <br>
        Get a tree node by node-id. This assumes that you have given the nodes in the data a unique id.
    </p>

<pre><code class="language-javascript">
var $tree = $('#tree1');
var data = [
    { id: 10, name: 'n1' },
    { id: 11, name: 'n2' }
];

$tree.tree({
    data: data
});
var node = $tree.tree('getNodeById', 10);
</code></pre>

    <h5 id="functions-selectnode">selectNode</h5>
    <p>
        <strong>function selectNode(node);</strong>
    </p>
    <p>
        Select this node.
    </p>
<pre><code class="language-javascript">
// create tree
var $tree = $('#tree1');
$tree.tree({
    data: data,
    selectable: true
});

var node = $tree.tree('getNodeById', 123);
$tree.tree('selectNode', node);
</code></pre>

    <h5 id="functions-opennode">openNode</h5>
    <p>
        <strong>function openNode(node);</strong>
        <br>
        <strong>function openNode(node, slide);</strong>
    </p>
    <p>
        Open this node. The node must have child nodes.
        <br>
        Parameter <strong>slide</strong>: open the node using a slide animation (default is true).
    </p>
<pre><code class="language-javascript">
// create tree
var $tree = $('#tree1');
$tree.tree({
    data: data
});

var node = $tree.tree('getNodeById', 123);
$tree.tree('openNode', node);
</code></pre>

    <p>
        To open the node without the slide animation, call with <strong>slide</strong> parameter is false.
    </p>
<pre><code class="language-javascript">
$tree.tree('openNode', node, false);
</code></pre>

    <h5 id="functions-closenode">closeNode</h5>
    <p>
        <strong>function closeNode(node);</strong>
        <br>
        <strong>function closeNode(node, slide);</strong>
    </p>
    <p>
        Close this node. The node must have child nodes.
        <br>
        Parameter <strong>slide</strong>: close the node using a slide animation (default is true).
    </p>
<pre><code class="language-javascript">
var node = $tree.tree('getNodeById', 123);
$tree.tree('closeNode', node);
</code></pre>

    <p>
        To close the node without the slide animation, call with <strong>slide</strong> parameter is false.
    </p>
<pre><code class="language-javascript">
$tree.tree('closeNode', node, false);
</code></pre>

    <h5 id="functions-getselectednode">getSelectedNode</h5>
    <p>
        Get the selected node. Returns the row data or false.
    </p>

<pre><code class="language-javascript">
var node = $tree.tree('getSelectedNode');
</code></pre>

    <h5 id="functions-addnodeafter">addNodeAfter</h5>
    <p>
        <strong>function addNodeAfter(new_node_info, existing_node);</strong>
    </p>
    <p>
        Add a new node after this existing node.
    </p>

<pre><code class="language-javascript">
var node1 = $('#tree1', 'getNodeByName, 'node1');
$('#tree1').tree(
    'addNodeAfter',
    {
        label: 'new_node',
        id: 456
    },
    node1
);
</code></pre>

    <h5 id="functions-addnodebefore">addNodeBefore</h5>
    <p>
        <strong>function addNodeBefore(new_node_info, existing_node);</strong>
    </p>
    <p>
        Add a new node before this existing node.
    </p>

    <h5 id="functions-addparentnode">addParentNode</h5>
    <p>
        <strong>function addParentNode(new_node_info, existing_node);</strong>
    </p>
    <p>
        Add a new node as parent of this existing node.
    </p>

<pre><code class="language-javascript">
var node1 = $('#tree1', 'getNodeByName', 'node1');
$('#tree1').tree(
    'addParentNode',
    {
        label: 'new_parent',
        id: 456
    },
    node1
);
</code></pre>

    <h5 id="functions-removenode">removeNode</h5>
    <p>
        <strong>function removeNode(node);</strong>
    </p>
    <p>
        Remove node from the tree.
    </p>

<pre><code class="language-javascript">
$('#tree1').tree('removeNode', node);
</code></pre>

    <h5 id="functions-appendnode">appendNode</h5>
    <p>
        <strong>function appendNode(new_node_info, parent_node);</strong>
    </p>
    <p>
        Add a node to this parent node. If *parent_node* is empty, then the new node becomes a root node.
    </p>

<pre><code class="language-javascript">
var parent_node = $tree.tree('getNodeById', 123);

$tree.tree(
    'appendNode',
    {
        label: 'new_node',
        id: 456
    },
    parent_node
);
</code></pre>

    <p>
        To add a root node, leave *parent_node* empty:
    </p>

<pre><code class="language-javascript">
$tree.tree(
    'appendNode',
    {
        label: 'new_node',
        id: 456
    }
);
</code></pre>

    <h5 id="functions-updatenode">updateNode</h5>

    <p>
        <strong>function updateNode(node, label);</strong>
        <br>
        <strong>function updateNode(node, data);</strong>
    </p>

    <p>
        Update the title of a node. You can also update the data.
    </p>

    <p>
        Update the label:
    </p>

<pre><code class="language-javascript">
var node = $tree.tree('getNodeById', 123);

$tree.tree('updateNode', node, 'new label');
</code></pre>

    <p>
        Update the data (including the label)
    </p>

<pre><code class="language-javascript">
var node = $tree.tree('getNodeById', 123);

$tree.tree(
    'updateNode',
    node,
    {
        label: 'new label',
        other_property: 'abc'
    }
);
</code></pre>

    <h5 id="functions-movenode">moveNode</h5>

    <p>
        <strong>function moveNode(node, target_node, position);</strong>
    </p>

    <p>
        Move a node. Position can be 'before', 'after' or 'inside'.
    </p>

<pre><code class="language-javascript">
var node = $tree.tree('getNodeBydId', 1);
var target_node = $tree.tree('getNodeBydId', 2);

$tree.tree('moveNode', node, target_node, 'after');
</code></pre>

    <h5 id="functions-toggle">toggle</h5>

    <p>
        <strong>function toggle(node);</strong>
        <br />
        <strong>function toggle(node, slide);</strong>
    </p>

    <p>
        Open or close a node.
        <br />
        Parameter <strong>slide</strong>: a slide animation (default is true).
    </p>

<pre><code class="language-javascript">
var node = $tree.tree('getNodeBydId', 1);
$tree.tree('toggle', node);
</code></pre>

    <h4 id="events">Events</h4>

    <h5 id="event-tree-click">tree.click</h5>

    <p>
        Triggered when a tree node is clicked.
    </p>

<pre><code class="language-javascript">
// create tree
$('#tree1').tree({
    data: data
});

// bind 'tree.click' event
$('#tree1').bind(
    'tree.click',
    function(event) {
        // The clicked node is 'event.node'
        var node = event.node;
        alert(node.name);
    }
);
</code></pre>

    <h5 id="event-tree-select">tree.select</h5>

    <p>
        Triggered when a tree node is selected.
    </p>

<pre><code class="language-javascript">
$('#tree1').bind(
    'tree.select',
    function(event) {
        var node = event.node;
        alert(node.name);
    }
);
</code></pre>

    <h5 id="event-tree-contextmenu">tree.contextmenu</h5>
    <p>
        Triggered when the user right-clicks a tree node. The event contains the following properties:
    </p>
    <ul>
        <li><strong>node</strong>: the node that is clicked on</li>
        <li><strong>click_event</strong>: the original click event</li>
    </ul>
<pre><code class="language-javascript">
// bind 'tree.contextmenu' event
$('#tree1').bind(
    'tree.contextmenu',
    function(event) {
        // The clicked node is 'event.node'
        var node = event.node;
        alert(node.name);
    }
);
</code></pre>

    <h5 id="event-tree-move">tree.move</h5>
    <p>
        Triggered when the user moves a node.
    </p>
    <p>
         Event.move_info contains:
    <p>
    <ul>
        <li>moved_node</li>
        <li>target_node</li>
        <li>position: (before, after or inside)</li>
        <li>previous_parent</li>
    </ul>

<pre><code class="language-javascript">
$('#tree1').tree({
    data: data,
    dragAndDrop: true
});

$('#tree1').bind(
    'tree.move',
    function(event) {
        console.log('moved_node', event.move_info.moved_node);
        console.log('target_node', event.move_info.target_node);
        console.log('position', event.move_info.position);
        console.log('previous_parent', event.move_info.previous_parent);
    }
);
</code></pre>

    <p>
        You can prevent the move by calling <strong>event.preventDefault()</strong>
    </p>

<pre><code class="language-javascript">
$('#tree1').bind(
    'tree.move',
    function(event) {
        event.preventDefault();
    }
);
</code></pre>

    <p>
        You can later call <strong>event.move_info.move_info.do_move()</strong> to move the node. This way you can ask the user before moving the node:
    </p>

<pre><code class="language-javascript">
$('#tree1').bind(
    'tree.move',
    function(event) {
        event.preventDefault();

        if (confirm('Really move?')) {
            event.move_info.do_move();
        }
    }
);
</code></pre>

    <p>
        Note that if you want to serialise the tree, for example to POST back to a server, you need to let tree complete the move first:
    </p>

<pre><code class="language-javascript">
$('#tree1').bind(
    'tree.move',
    function(event)
    {
        event.preventDefault();
        // do the move first, and _then_ POST back.
        event.move_info.do_move();
        $.post('your_url', {tree: $(this).tree('toJson')});
    }
);
</code></pre>

    <h5 id="event-tree-init">tree.init</h5>
    <p>
        Called when the tree is initialized. This is particularly useful when the data is loaded from the server.
    </p>

<pre><code class="language-javascript">
$('#tree1').bind(
    'tree.init',
    function() {
        // initializing code
    }
);
</code></pre>

    <h5 id="event-tree-open">tree.open</h5>
    <p>
        Called when a node is opened.
    </p>

<pre><code class="language-javascript">
$('#tree1').bind(
    'tree.open',
    function(e) {
        console.log(e.node);
    }
);
</code></pre>

    <p>
        <a href="http://thenounproject.com/noun/tree/#icon-No2141" target="_blank" rel="nofollow">Tree</a>
        designed by <a href="http://thenounproject.com/hschlosman" target="_blank" rel="nofollow">Hernan D. Schlosman</a>
        from The Noun Project
    </p>

</div>
<script>
    $(function() {
        var data = [
            {
                label: 'node1',
                children: [
                    { label: 'child1' },
                    { label: 'child2' }
                ]
            },
            {
                label: 'node2',
                children: [
                    { label: 'child3' }
                ]
            }
        ];
        $('#tree1').tree({
            data: data,
            autoOpen: true,
            dragAndDrop: true
        });
    });
</script>
 




===End phần code tùy chỉnh ==

✨ Bài viết được thực hiện bởi Blogger Gia Bảo, Freelancer Marketing Online, có nhiệm vụ kết nối khách cần mua với nhà phân phối, công ty sản xuất. BLOG GIA BẢO không phải đơn vị trực tiếp bán hàng trên website mà chỉ là nơi giúp bên mua gặp gỡ bên bán.

✨ Nổi bật : Mô hình Freelancer Marketing Online Cùng Nhà Phân Phối / Công Ty Sản Xuất Triển Khai Kênh Bán Hàng Trực Tuyến Thông Qua Việc Mở Gian Hàng TMĐT : Xem thêm,....

Kem chống nắng Biore UV Aqua Rich Watery Essence/Gel SPF 50+/ PA++++ 50ml/90ml

Xem Giá Bán
Xem thêm : Chăm Sóc Cơ Thể
Mua ngay

Bộ bàn ăn gỗ cao su gấp gọn

Xem Giá Bán
Tìm hiểu thêm về : Gỗ ghép
Đặt Mua ngay