bootstrap jquery.slimscroll

最新推荐文章于 2024-03-14 11:54:17 发布

原创最新推荐文章于 2024-03-14 11:54:17 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #jquery

jquery 专栏收录该内容

17 篇文章

订阅专栏

本文将为您介绍HTML、CSS和JavaScript的基础知识及其在前端开发中的应用，包括如何使用Bootstrap和jQuery进行网页布局和交互设计。

效果图

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="/CERPGIS/gis/media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="/CERPGIS/gis/media/css/bootstrap-table.css">
<link href="/CERPGIS/gis/media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<script src="/CERPGIS/gis/media/js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="/CERPGIS/gis/media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      
	<script src="/CERPGIS/gis/media/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/CERPGIS/gis/media/js/jquery.slimscroll.min.js" type="text/javascript"></script>
	<script src="/CERPGIS/gis/media/js/bootstrap-table.js"></script>
	<!-- 初始化配置 -->
<!-- 	<script src="/CERPGIS/gis/media/js/app.js"></script> -->
	<script>
		$(function() { 
// 		   App.init();//页面初始化
console.log($("#scroller"));
		 $("#scroller").slimScroll({
             size: '7px',
             color: '#a1b2bd',
//              position: isRTL ? 'left' : 'right',
             height: $(this).attr("data-height"),
             alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
             railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
             disableFadeOut: true
         });
		});
	</script>
</head>
<body>
<div id="scroller" class="scroller" data-height="290px" data-always-visible="1" data-rail-visible="0">
	<table id="test" data-toggle="table" data-url="/CERPGIS/gis/data1.json" data-show-header="true" data-cache="false">
	    <thead>
	        <tr>
	            <th data-field="id">id</th>
	            <th data-field="name">姓名</th>
	            <th data-field="price">房间号</th>
	        </tr>
	    </thead>
	</table>
</div>
</body>
</html>

简介: