Cara membuat Scrollspy Bootstrap
Scrollspy dibuat agar tidak terjadi aksi scroll dalam website yang bersifat single page. Jika ingin menggunakan Scrollyspy Bootstrap kita harus menyertakan file scrollspy.js, bootstrap.js atau bootstrap.min.js.
Berikut ini cara membuat scrollspy Bootstrap ke menu navbar, dengan cara :
- Via data attributes : Tambahkan data-spy =”scroll” ke elemen yang kita targetkan. Kemudian tambahkan data atribut-target dengan ID atau classs elemen induk dari setiap komponen .nav Bootstrap. <body data-spy="scroll" data-target=".navbar-example"> … <div class="navbar-example"><ul class="nav nav-tabs"> … </ul> </div> … </body>
- Via
javascript : Anda dapat membuat scrollspy dengan JavaScript bukannya
menggunakan atribut data, dengan memilih target elemen, dan kemudian
mengguankan fungsi .scrollspy ().
$('body').scrollspy({ target: '.navbar-example' }).
Contoh program pembuatan scrollspy Bootstrap
<nav id="navbar-example" class="navbar navbar-default navbar-static"role="navigation"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse"data-target=".bs-js-navbar-scrollspy"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Tutorial Name</a></div><div class="collapse navbar-collapse bs-js-navbar-scrollspy"><ul class="nav navbar-nav"><li><a href="#ios">iOS</a></li><li><a href="#svn">SVN</a></li><li class="dropdown"><a href="#" id="navbarDrop1" class="dropdown-toggle"data-toggle="dropdown">Java<b class="caret"></b></a><ul class="dropdown-menu" role="menu"aria-labelledby="navbarDrop1"><li><a href="#jmeter" tabindex="-1">jmeter</a></li><li><a href="#ejb" tabindex="-1">ejb</a></li><li class="divider"></li><li><a href="#spring" tabindex="-1">spring</a></li></ul></li></ul></div></nav><div data-spy="scroll" data-target="#navbar-example" data-offset="0"style="height:200px;overflow:auto; position: relative;"><h4 id="ios">iOS</h4><p> iOS is a mobile operating system developed and distributed by AppleInc. Originally released in 2007 for the iPhone, iPod Touch, and AppleTV. iOS is derived from OS X, with which it shares the Darwinfoundation. iOS is Apple's mobile version of the OS X operating systemused on Apple computers.</p><h4 id="svn">SVN</h4><p> Apache Subversion which is often abbreviated as SVN, is a softwareversioning and revision control system distributed under an open sourcelicense. Subversion was created by CollabNet Inc. in 2000, but now itis developed as a project of the Apache Software Foundation, and assuch is part of a rich community of developers and users.</p><h4 id="jmeter">jMeter</h4><p>jMeter is an Open Source testing software. It is 100% pure Javaapplication for load and performance testing.</p><h4 id="ejb">EJB</h4><p> Enterprise Java Beans (EJB) is a development architecture for buildinghighly scalable and robust enterprise level applications to be deployedon J2EE compliant Application Server such as JBOSS, Web Logic etc.</p><h4 id="spring"> Spring </h4><p>Spring framework is an open source Java platform that providescomprehensive infrastructure support for developing robust Javaapplications very easily and very rapidly.</p><p>Spring framework was initially written by Rod Johnson and was firstreleased under the Apache 2.0 license in June 2003.</p></div>
Cara membuat Scrollspy Bootstrap
Reviewed by Admin
on
1:38 AM
Rating:
Reviewed by Admin
on
1:38 AM
Rating:
No comments: