Click here to Skip to main content
15,886,664 members
Articles / Web Development / HTML

HTML5 Knockout TriState Tree Control

Rate me:
Please Sign up or sign in to vote.
4.67/5 (5 votes)
22 Oct 2012CPOL4 min read 34.3K   1.7K   9  
Used HTML5 Knockout MVVM binding to make TriState Tree Control
/*
 * jQuery Address Plugin v1.2.2
 * http://www.asual.com/jquery/address/
 *
 * Copyright (c) 2009-2010 Rostislav Hristov
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Date: 2010-07-17 18:26:18 +0300 (Sat, 17 Jul 2010)
 */
(function(c){c.address=function(){var t=function(a){c(c.address).trigger(c.extend(c.Event(a),function(){for(var b={},h=c.address.parameterNames(),i=0,q=h.length;i<q;i++)b[h[i]]=c.address.parameter(h[i]);return{value:c.address.value(),path:c.address.path(),pathNames:c.address.pathNames(),parameterNames:h,parameters:b,queryString:c.address.queryString()}}.call(c.address)))},u=function(a,b,h){c(c.address).bind(a,b,h);return c.address},p=function(){var a=d.href.indexOf("#");return a!=-1?W(I(r(d.href.substr(a+
1),j))):""},X=function(){return"javascript"},Y=function(a,b){if(f.strict)a=b?a.substr(0,1)!="/"?"/"+a:a:a==""?"/":a;return a},J=function(a,b){return s&&d.protocol=="file:"?b?g.replace(/\?/,"%3F"):g.replace(/%253F/,"?"):a},r=function(a,b){if(f.crawlable&&b)return(a!=""?"!":"")+a;return a.replace(/^\!/,"")},v=function(a,b){return parseInt(a.css(b),10)},Z=function(a){for(var b,h,i=0,q=a.childNodes.length;i<q;i++){if(a.childNodes[i].src)b=String(a.childNodes[i].src);if(h=Z(a.childNodes[i]))b=h}return b},
F=function(){if(!K){var a=p(),b=g!=a;if(w&&m<523){if(A!=D.length){A=D.length;if(typeof x[A-1]!=y)g=x[A-1];E(j)}}else if(s&&m<7&&b)d.reload();else if(b){g=a;E(j)}}},E=function(a){t($);t(a?aa:ba);B(ca,10)},ca=function(){if(f.tracker!=="null"&&f.tracker!==null){var a=n[f.tracker],b=(d.pathname+(c.address?c.address.value():"")).replace(/\/\//,"/").replace(/^\/$/,"");if(typeof a==L)a(b);else if(typeof urchinTracker==L)urchinTracker(b);else if(typeof pageTracker!=y&&typeof pageTracker._trackPageview==L)pageTracker._trackPageview(b);
else typeof _gaq!=y&&typeof _gaq.push==L&&_gaq.push(["_trackPageview",b])}},da=function(){var a=l.contentWindow.document;a.open();a.write("<html><head><title>"+k.title+"</title><script>var "+o+' = "'+p()+'";<\/script></head></html>');a.close()},fa=function(){if(G&&ea!=-1){var a,b=G.substr(ea+1).split("&");for(C=0;C<b.length;C++){a=b[C].split("=");if(/^(autoUpdate|crawlable|history|strict|wrap)$/.test(a[0]))f[a[0]]=isNaN(a[1])?/^(true|yes)$/i.test(a[1]):parseInt(a[1],10)!==0;if(/^tracker$/.test(a[0]))f[a[0]]=
a[1]}G=null}},ia=function(){if(!ga){ga=e;fa();var a=c("body").ajaxComplete(function(){ha.call(this);ma.call(this)}).trigger("ajaxComplete");if(f.wrap){c("body > *").wrapAll('<div style="padding:'+(v(a,"marginTop")+v(a,"paddingTop"))+"px "+(v(a,"marginRight")+v(a,"paddingRight"))+"px "+(v(a,"marginBottom")+v(a,"paddingBottom"))+"px "+(v(a,"marginLeft")+v(a,"paddingLeft"))+'px;" />').parent().wrap('<div id="'+o+'" style="height:100%; overflow:auto;'+(w?window.statusbar.visible&&!/chrome/i.test(O)?"":
" resize:both;":"")+'" />');c("html, body").css({height:"100%",margin:0,padding:0,overflow:"hidden"});w&&c('<style type="text/css" />').appendTo("head").text("#"+o+"::-webkit-resizer { background-color: #fff; }")}if(s&&m<8){a=k.getElementsByTagName("frameset")[0];l=k.createElement((a?"":"i")+"frame");if(a){a.insertAdjacentElement("beforeEnd",l);a[a.cols?"cols":"rows"]+=",0";l.src=X()+":"+j;l.noResize=e;l.frameBorder=l.frameSpacing=0}else{l.src=X()+":"+j;l.style.display="none";k.body.insertAdjacentElement("afterBegin",
l)}B(function(){c(l).bind("load",function(){var b=l.contentWindow;g=typeof b[o]!=y?b[o]:"";if(g!=p()){E(j);d.hash=J(r(g,e),e)}});typeof l.contentWindow[o]==y&&da()},50)}else if(w){if(m<418){c(k.body).append('<form id="'+o+'" style="position:absolute;top:-9999px;" method="get"></form>');P=k.getElementById(o)}if(typeof d[o]==y)d[o]={};if(typeof d[o][d.pathname]!=y)x=d[o][d.pathname].split(",")}B(function(){t("init");E(j)},1);if(s&&m>7||!s&&"on"+H in n)if(n.addEventListener)n.addEventListener(H,F,false);
else n.attachEvent&&n.attachEvent("on"+H,F);else na(F,50);ha()}},ha=function(){c("a").filter("[rel*=address:]").address()},oa=function(){if(n.removeEventListener)n.removeEventListener(H,F,false);else n.detachEvent&&n.detachEvent("on"+H,F)},ma=function(){var a=d.pathname.replace(/\/$/,"");c("body").html().indexOf("_escaped_fragment_")!=-1&&c("a[href]:not([href^=http]), , a[href*="+document.domain+"]",this).each(function(){var b=c(this).attr("href").replace(/^http:/,"").replace(new RegExp(a+"/?$"),
"");if(b==""||b.indexOf("_escaped_fragment_")!=-1)c(this).attr("href","#"+decodeURIComponent(b.replace(/\/(.*)\?_escaped_fragment_=(.*)$/,"!$2")))})},o="jQueryAddress",L="function",y="undefined",H="hashchange",$="change",aa="internalChange",ba="externalChange",e=true,j=false,f={autoUpdate:e,crawlable:j,history:e,strict:e,wrap:j},M=c.browser,m=parseFloat(c.browser.version),ja=M.mozilla,s=M.msie,ka=M.opera,w=M.safari,Q=j,n=function(){try{return top.document!==undefined?top:window}catch(a){return window}}(),
k=n.document,D=n.history,d=n.location,na=setInterval,B=setTimeout,I=decodeURI,W=encodeURI,O=navigator.userAgent,l,P,G=Z(document),ea=G?G.indexOf("?"):-1,R=k.title,A=D.length,K=j,ga=j,S=e,la=e,N=j,x=[],g=p();if(s){m=parseFloat(O.substr(O.indexOf("MSIE")+4));if(k.documentMode&&k.documentMode!=m)m=k.documentMode!=8?7:8;c(document).bind("propertychange",function(){if(k.title!=R&&k.title.indexOf("#"+p())!=-1)k.title=R})}if(Q=ja&&m>=1||s&&m>=6||ka&&m>=9.5||w&&m>=312){for(var C=1;C<A;C++)x.push("");x.push(g);
if(ka)history.navigationMode="compatible";if(document.readyState=="complete")var pa=setInterval(function(){if(c.address){ia();clearInterval(pa)}},50);else{fa();c(ia)}if(s&&d.hash!=g)d.hash="#"+J(r(g,e),e);c(window).bind("unload",oa)}else if(!Q&&p()!=""||w&&m<418&&p()!=""&&d.search!=""){k.open();k.write('<html><head><meta http-equiv="refresh" content="0;url='+encodeURI(d.href.substr(0,d.href.indexOf("#")))+'" /></head></html>');k.close()}else ca();return{bind:function(a,b,h){return u(a,b,h)},init:function(a){return u("init",
a)},change:function(a){return u($,a)},internalChange:function(a){return u(aa,a)},externalChange:function(a){return u(ba,a)},baseURL:function(){var a=d.href;if(a.indexOf("#")!=-1)a=a.substr(0,a.indexOf("#"));if(/\/$/.test(a))a=a.substr(0,a.length-1);return a},autoUpdate:function(a){if(a!==undefined){f.autoUpdate=a;return this}return f.autoUpdate},crawlable:function(a){if(a!==undefined){f.crawlable=a;return this}return f.crawlable},history:function(a){if(a!==undefined){f.history=a;return this}return f.history},
strict:function(a){if(a!==undefined){f.strict=a;return this}return f.strict},tracker:function(a){if(a!==undefined){f.tracker=a;return this}return f.tracker},wrap:function(a){if(a!==undefined){f.wrap=a;return this}return f.wrap},update:function(){N=e;this.value(g);N=j;return this},title:function(a){if(a!==undefined){a=I(a);B(function(){R=k.title=a;if(la&&l&&l.contentWindow&&l.contentWindow.document){l.contentWindow.document.title=a;la=j}if(!S&&ja)d.replace(d.href.indexOf("#")!=-1?d.href:d.href+"#");
S=j},50);return this}return k.title},value:function(a){if(a!==undefined){a=W(I(Y(a,e)));if(a=="/")a="";if(g==a&&!N)return;S=e;g=a;if(f.autoUpdate||N){K=e;E(e);x[D.length]=g;if(w)if(f.history){d[o][d.pathname]=x.toString();A=D.length+1;if(m<418){if(d.search==""){P.action="#"+r(g,e);P.submit()}}else if(m<523||g==""){a=k.createEvent("MouseEvents");a.initEvent("click",e,e);var b=k.createElement("a");b.href="#"+r(g,e);b.dispatchEvent(a)}else d.hash="#"+r(g,e)}else d.replace("#"+r(g,e));else if(g!=p())if(f.history)d.hash=
"#"+J(r(g,e),e);else d.replace("#"+r(g,e));s&&m<8&&f.history&&B(da,50);if(w)B(function(){K=j},1);else K=j}return this}if(!Q)return null;return I(Y(J(g,j),j))},path:function(a){if(a!==undefined){var b=this.queryString(),h=this.hash();this.value(a+(b?"?"+b:"")+(h?"#"+h:""));return this}return this.value().split("#")[0].split("?")[0]},queryString:function(a){if(a!==undefined){var b=this.hash();this.value(this.path()+(a?"?"+a:"")+(b?"#"+b:""));return this}a=this.value().split("?");return a.slice(1,a.length).join("?").split("#")[0]},
parameter:function(a,b,h){var i,q;if(b!==undefined){var T=this.parameterNames();q=[];for(i=0;i<T.length;i++){var U=T[i],z=this.parameter(U);if(typeof z=="string")z=[z];if(U==a)z=b===null||b===""?[]:h?z.concat([b]):[b];for(var V=0;V<z.length;V++)q.push(U+"="+z[V])}c.inArray(a,T)==-1&&b!==null&&b!==""&&q.push(a+"="+b);this.queryString(q.join("&"));return this}if(b=this.queryString()){q=b.split("&");b=[];for(i=0;i<q.length;i++){h=q[i].split("=");h[0]==a&&b.push(h[1])}if(b.length!==0)return b.length!=
1?b:b[0]}},pathNames:function(){var a=this.path(),b=a.replace(/\/{2,9}/g,"/").split("/");if(a.substr(0,1)=="/"||a.length===0)b.splice(0,1);a.substr(a.length-1,1)=="/"&&b.splice(b.length-1,1);return b},parameterNames:function(){var a=this.queryString(),b=[];if(a&&a.indexOf("=")!=-1){a=a.split("&");for(var h=0;h<a.length;h++){var i=a[h].split("=")[0];c.inArray(i,b)==-1&&b.push(i)}}return b},hash:function(a){if(a!==undefined){this.value(this.value().split("#")[0]+(a?"#"+a:""));return this}a=this.value().split("#");
return a.slice(1,a.length).join("#")}}}();c.fn.address=function(t){if(!c(this).attr("address")){var u=function(){if(c(this).is("a")){var p=t?t.call(this):/address:/.test(c(this).attr("rel"))?c(this).attr("rel").split("address:")[1].split(" ")[0]:c(this).attr("href").replace(/^#\!?/,"");c.address.value(p);return false}};c(this).click(u).live("click",u).submit(function(){if(c(this).is("form")){var p=t?t.call(this):c(this).attr("action")+"?"+c(this).serialize();c.address.value(p);return false}}).attr("address",
true)}return this}})(jQuery);

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
India India
Myself from the dream city of Mumbai,India.
Academically, I have completed Degree and Diploma in Computer Science engineering

I started working as a freelance programmer, on fronts like embedded systems, web, windows , using Microsoft as well as Sun technologies.

Presently working in a reputed IT company.

Comments and Discussions