Skip to content

Commit

Permalink
添加滚动侦察
Browse files Browse the repository at this point in the history
  • Loading branch information
RubyLouvre committed Dec 21, 2012
1 parent bd0393c commit 3af7273
Show file tree
Hide file tree
Showing 3 changed files with 218 additions and 41 deletions.
35 changes: 16 additions & 19 deletions bootstrap-dropdown.js
@@ -1,8 +1,6 @@
!function ($) {

"use strict"; // jshint ;_;


/* DROPDOWN CLASS DEFINITION
* ========================= */

Expand Down Expand Up @@ -34,11 +32,11 @@
isActive = $parent.hasClass('open')
//每次页面只能有一个菜单被打开,这是个失败的设计
clearMenus()

//如果没有打开,则打开它
if (!isActive) {
$parent.toggleClass('open')
}

//让当前菜单项获得焦点
$this.focus()

return false
Expand All @@ -48,44 +46,43 @@
keydown: function (e) {
var $this
, $items
, $active
, $parent
, isActive
, index

//如果不是上下方向键或回车键,返回
if (!/(38|40|27)/.test(e.keyCode)) return

$this = $(this)

e.preventDefault()
e.stopPropagation()

//如果标识为禁止状态
if ($this.is('.disabled, :disabled')) return

//取得控件的容器
$parent = getParent($this)

//如果处于激活状态
isActive = $parent.hasClass('open')

//如果没有激活或激话了+回车,就触发其点击事件
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()

//如果是菜单项(不能是作为分隔线的LI)下的A元素
$items = $('[role=menu] li:not(.divider):visible a', $parent)

if (!$items.length) return

//那么我们取得当前获得焦点的元素作为基准,通过它上下移动
index = $items.index($items.filter(':focus'))

if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0

if (!~index) index = 0//如果是-1,那么回到第一个
//然后焦点落在它之上
$items
.eq(index)
.focus()
}

}

function clearMenus() {
function clearMenus() {//请空页面上所有显示出来下拉菜单
$(toggle).each(function () {
getParent($(this)).removeClass('open')
})
Expand All @@ -96,7 +93,7 @@
, $parent

if (!selector) {
selector = $this.attr('href')
selector = $this.attr('href')//只能取ID选择器了
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}

Expand Down Expand Up @@ -124,7 +121,6 @@

$.fn.dropdown.Constructor = Dropdown


/* DROPDOWN NO CONFLICT
* ==================== */

Expand All @@ -137,15 +133,16 @@
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */

$(document)
$(document)//绑定事件
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) {
e.stopPropagation()
})
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) {
e.stopPropagation()
})
}) //这里是用于绑定到某个链接或按钮上,点击它让某个下拉菜单打开
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
//绑定键盘事件,方便在菜单项中上下移动
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

}(window.jQuery);
143 changes: 143 additions & 0 deletions bootstrap-scrollspy.js
@@ -0,0 +1,143 @@
!function ($) {

"use strict"; // jshint ;_;


/* SCROLLSPY CLASS DEFINITION
* ========================== */

function ScrollSpy(element, options) {
var process = $.proxy(this.process, this)
, $element = $(element).is('body') ? $(window) : $(element)
, href
this.options = $.extend({}, $.fn.scrollspy.defaults, options)
this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process)
this.selector = (this.options.target
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|| '') + ' .nav li > a'
this.$body = $('body')
this.refresh()
this.process()
}

ScrollSpy.prototype = {

constructor: ScrollSpy

, refresh: function () {
var self = this
, $targets

this.offsets = $([])
this.targets = $([])

$targets = this.$body
.find(this.selector)
.map(function () {
var $el = $(this)
, href = $el.data('target') || $el.attr('href')
, $href = /^#\w/.test(href) && $(href)
return ( $href
&& $href.length
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
})
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {
self.offsets.push(this[0])
self.targets.push(this[1])
})
}

, process: function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
, scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
, maxScroll = scrollHeight - this.$scrollElement.height()
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
, i

if (scrollTop >= maxScroll) {
return activeTarget != (i = targets.last()[0])
&& this.activate ( i )
}

for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate( targets[i] )
}
}

, activate: function (target) {
var active
, selector

this.activeTarget = target

$(this.selector)
.parent('.active')
.removeClass('active')

selector = this.selector
+ '[data-target="' + target + '"],'
+ this.selector + '[href="' + target + '"]'

active = $(selector)
.parent('li')
.addClass('active')

if (active.parent('.dropdown-menu').length) {
active = active.closest('li.dropdown').addClass('active')
}

active.trigger('activate')
}

}


/* SCROLLSPY PLUGIN DEFINITION
* =========================== */

var old = $.fn.scrollspy

$.fn.scrollspy = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('scrollspy')
, options = typeof option == 'object' && option
if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}

$.fn.scrollspy.Constructor = ScrollSpy

$.fn.scrollspy.defaults = {
offset: 10
}


/* SCROLLSPY NO CONFLICT
* ===================== */

$.fn.scrollspy.noConflict = function () {
$.fn.scrollspy = old
return this
}


/* SCROLLSPY DATA-API
* ================== */

$(window).on('load', function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this);
console.log($spy.data())
$spy.scrollspy($spy.data())
})
})

}(window.jQuery);
81 changes: 59 additions & 22 deletions index.html
Expand Up @@ -6,40 +6,77 @@
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="bootstrap.css"/>
<link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/>
<script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script>
<script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script>
<script src="http://files.cnblogs.com/rubylouvre/bootstrap-alert.js"></script>

<script src="jquery1.83.js" > </script>
<script src="bootstrap-transition.js"></script>
<script src="bootstrap-dropdown.js"></script>
<script src="bootstrap-scrollspy.js"></script>

<script>
$(function(){
//注意:事件要绑定在UI容器上,而不是关闭按钮中
$(".alert-block").on("close",function(){
alert("这是关闭前调用的")
})
$(".alert-block").on("closed",function(){
alert("这是关闭后调用的")
})
$('.dropdown-toggle').dropdown()
})

</script>
</head>
<body>
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">项目名称</a>
<ul class="nav">
<li class="active"><a href="#fat">红利</a></li>
<li><a href="#mdo">哈芬</a></li>
<li><a href="#ruby">ruby</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">党国大事 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#one">遛狗</a></li>
<li><a href="#two">失踪</a></li>
<li class="divider"></li>
<li><a href="#three">耳光</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example" style="height:180px;width:600px;border:1px solid black;overflow:scroll;">
<h4 id="fat">红利</h4>
<p>
中方向美方承诺提高国有企业红利上缴比例,增加上缴利润的中央国企和省级国企的数量,将国有资本经营预算纳入国家预算体系。还承诺,鼓励包括国有公司在内的上市公司增加红利支付。还承诺在信贷提供、税收优惠和监管政策等方面对各类所有制企业一视同仁。<br><br>

美方认为,提高国有企业分红比例带来的收入可用于资助政府的社保和养老开支,从而有可能降低中国人大量储蓄的必要性,让他们提高消费支出,从而达到刺激中国内需的目的。
</p>
<h4 id="mdo">哈芬</h4>
<p>
据估,中国高铁槽道市场约十几亿元,德国哈芬占70%。业内人士称,中铁设计院的铁道图纸,直接指定使用哈芬,而非技术标准。哈芬在德国使用成本高昂的不锈钢,在中国则是碳钢。更有业内人士证实,目前中国高铁用的实为国内生产,原产几乎不足四分之一。(财新)
</p>
<h4 id="ruby">Ruby开发</h4>
<p >
我仅仅懂一点ASP.NET进行Web开发的知识。我知道将来必然是Web技术的天下。
我的理解,Web开发主流有Java系列、ASP.NET系列,小众一点的有PHP,RoR。
我是被Ruby吸引而学习RoR的,现在看那本《Web开发敏捷之道》第四版,
用Aptana Studio作为IDE,我买了个MacBookPro,边学书上的例子,边练习。
现在的问题是,按照书上的代码敲进去就能运行,但是不理解其中的含义啊。
</p>
<h4 id="one">遛狗</h4>
<p>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" id="close" data-dismiss="alert" href=".alert-block">Or do this</a>
近日,拍摄于四川绵阳街头的一张照片引起热议,一辆在路上行驶的法院警车,车窗里伸出一个宠物狗的脑袋,四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知,这是我国新近引进的一批特殊品种警犬,为麻痹犯罪分子,故意化妆成宠物狗的样子。
</p>
<h4 id="two">失踪</h4>
<p>
4月25日,19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时,竟然发现这一区域已先后有8名青少年失踪,其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车,被扔进黑砖窑强迫劳动,后逃离黑砖窑重获自由。
</p>
<h4 id="three">耳光</h4>
<p>
30多岁女人直接吐东西在刚扫过的地上,环卫大姐上去说了两句,结果挨了三巴掌三脚。见到被打的环卫大姐时,她精神不好,坐在凳子上不说话,左脸的伤痕还很显眼,工友在一旁照料她。2012年5月4日,浙江省,杭州市。
</p>
<p>
尹大姐说:“小孩子都知道不能在街上乱吐。”那女人说:那不就是你们环卫应该做的事情吗?尹大姐说:难道我们环卫工人就低人一等吗?”话音刚落,“啪”“啪”“啪”三个巴掌落在尹大姐脸上。
</p>

</div>
</body>
</html>

0 comments on commit 3af7273

Please sign in to comment.