标签: toggle
slideToggle JQuery从右到左
我是JQ的新手我在互联网上找到了这个脚本,它完全符合我的要求,但我希望滑动将从右到左如何做到这一点？请帮忙
这是代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
</style>
</head>
<body>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<a href="#" class="show_hide">Show/hide</a>
推荐指数
解决办法
查看次数
Angular js - 显示/隐藏每个新路由加载gif
我试图在每个新路由上切换(隐藏/显示)加载gif,所以我的逻辑是:
- routeChangeStart = show加载gif
- routeChangeSuccess =隐藏加载gif
这是我的代码:
//ANGULAR
app.run(function($rootScope) {
$rootScope.layout = {};
$rootScope.layout.loading = false;
$rootScope.$on('$routeChangeStart', function() {
//show loading gif
$rootScope.layout.loading = true;
});
$rootScope.$on('$routeChangeSuccess', function() {
//hide loading gif
$rootScope.layout.loading = false;
});
$rootScope.$on('$routeChangeError', function() {
//hide loading gif
alert('wtff');
$rootScope.layout.loading = false;
});
});
// HTML
<img src="img/loading.gif" ng-hide="!layout.loading"/>
这很奇怪,因为这适用于3/4路线改变然后它在更改路线时停止工作:O
可能是什么？
感谢@Rob Sedgwick,这是一个实际的例子:http://plnkr.co/edit/ZpkgRhEAoUGlnXjbLb8b
推荐指数
解决办法
查看次数
如何将"ON"和"OFF"文本添加到切换按钮
在我的项目中,我想在我现有的切换代码上添加一个文本.所以我想这样,当切换为ON时,它应显示文本"ON"并显示"OFF"文本,如果切换关闭.我无法将其更改为其他切换,因为它已经有一个使用它的后端.我只想输入"ON"和"OFF"文本.谢谢.
这是我的代码HTML:
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></span></div></label>
CSS:
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: …推荐指数
解决办法
查看次数
在jQuery 1.9删除.toggle(函数,函数)后使用的替代方法是什么？
嗨,我正在尝试创建一些可以在每次点击时交替收缩和增长的东西,但我正在使用jQuery 1.9我的网站.该.toggle(function,function)功能已被删除jQuery 1.9,所以我不确定应该使用什么代替.
任何帮助都会很棒.
谢谢
jsfiddle(使用旧代码,jquery 1.8版本):http://jsfiddle.net/TNAC6/
新jsfiddle(jquery 1.9):http://jsfiddle.net/TNAC6/1/
这是我试图切换的代码.基本上我正在切换的是一个圆形div.
(function($){
$.fn.createToggle = function(size) {
var ele = $(this);
var oldSize = ele.width();
console.log("creating new toggle on element: " + ele + " old: " + oldSize + " new: " + size );
console.log("its content is" + ele.children(".content"));
var growfn = function() {
$(this).stop().animate({
'width': size+'px',
'height': size+'px',
'margin-left': '-'+(size/2)+'px',
'margin-top': '-'+(size/2)+'px'
}, 500);
$(this).children(".content").toggle();
};
var …推荐指数
解决办法
查看次数
将抽屉图标动画到setDisplayHomeAsUpEnabled上的箭头？
我正在使用setDisplayHomeAsUpEnabled来显示箭头而不是抽屉"汉堡"图标,但它没有动画或任何东西.相反,它立即显示箭头可绘制.
主屏幕:( 专辑1)
点按电影时:( 专辑2)
问题是,当我滑动抽屉时,图标会使动画很好,这让我想到也许我不应该使用setDisplayHomeAsUpEnabled :( 专辑3)
专辑: http ://imgur.com/a/LkXbh
这是我的抽屉切换代码:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
drawerAdapter = new DrawerAdapter(this, App.getNavItems(), getSupportFragmentManager());
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerList = (ExpandableListView) findViewById(R.id.left_drawer);
// Set onGroupClick and onChildClick
drawerAdapter.setClickEvents(MainActivity.this, drawerLayout, drawerList);
drawerList.setAdapter(drawerAdapter);
ActionBarDrawerToggle toolbarDrawerToggle = new ActionBarDrawerToggle(
this,
drawerLayout,
toolbar,
R.string.drawer_open,
R.string.drawer_close
) {
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
invalidateOptionsMenu();
}
public void onDrawerOpened(View view) {
super.onDrawerOpened(view);
invalidateOptionsMenu();
}
};
drawerLayout.setDrawerListener(toolbarDrawerToggle);
toolbarDrawerToggle.syncState();
编辑:我想要的动画不是在打开抽屉时,已经有效了.我想在加载特定片段时手动触发动画.我可能没有正确解释自己.
推荐指数
解决办法
查看次数
visual studio C++切换评论？注释而不是整行被选中？
实际上有2个问题
1)在所选行上切换评论的快捷方式？适用于我用notepad ++开始使用的所有iDE
2)ctrl-k, ctrl-c展品的这种行为(引自某个地方措辞得很好):
C#:选择某些文本的每一行都在line-start上用双斜杠进行注释.如果未选择任何内容,则注释光标所在的行.
C++:如果未选择任何内容或选择完整行,则其行为与上述相同.但是,如果选择了部分行,并且未选择任何注释作为选择的一部分(例如,选择代码行中间的某些内容),则选择将被/*和*/包围.
因为我在C++中编码,我发现这种行为很烦人 - 我希望能够注释掉部分选中的行 - 任何变通方法？
推荐指数
解决办法
查看次数
切换/切换div(jquery)
我希望完成一项相当简单的任务(我希望!)
我有两个div标签和1个锚标签,如下所示:
<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>
我想要完成的是使用锚标签在两个div标签之间切换,隐藏一个标签并显示另一个标签,反之亦然.
如何才能以最佳方式完成？
最好的祝福.
推荐指数
解决办法
查看次数
Android将ImageButton设置为Toggle
单击图像按钮时,如何让图像按钮保持"按下"状态？基本上我只想让背景成为沮丧的背景,但我无法弄清楚如何设置它.目前,我刚刚将所选按钮背景复制到我的res文件夹中,但当我将其设置为背景时,它变得模糊(因为原始图像比按钮本身大).
普通背景: 替代文字http://img707.imageshack.us/img707/9199/ss20100426163452.png 我得到的内容: 替代文字http://img707.imageshack.us/img707/912/ss20100426163357.png 替代文字http ://img3.imageshack.us/img3/8304/ss20100426163623.png
考虑到许多不同的UI布局,我也不相信我可以实际使用这种方法.按钮应按照用户使用的UI保持按下状态.
推荐指数
解决办法
查看次数
如何在离子2中创建一个手风琴列表？
我想使用可扩展组在我的项目中集成手风琴,但对于最近的项目,我需要演绎扩展文本或更准确地溢出内容的手风琴.
你能告诉我它会怎么做ionic 2吗？
推荐指数
解决办法
查看次数
如何在jQuery中获取Bootstrap切换按钮的值
我有这个标记和jQuery,但我无法成功捕获按钮值或开/关或任何形式的切换设置的识别:
HTML
<div class="form-group">
<label class="col-md-2 control-label" for="payMethod">Payment Method</label>
<div class="col-md-2">
<label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
<input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
</label>
</div>
</div>
jQuery的
$('#payMethod').on( 'change', function() {
alert('slid');
}); // does not work
$( "#payMethod" ).click(function() {
alert( $('#payMethod').val() );
}); // does not work
$('#payMethod').change(function() {
alert('Toggle: ' + $(this).prop('checked'));
}); // does not work
$('input[type=checkbox][name=payMethod]').change(function() {
alert('help'); // does not work
});
这是滑块按钮(没有复选框):
推荐指数
解决办法
查看次数