小编UI_*_*Dev的帖子
如何在html中自定义单选按钮
我想要像这样的单选按钮..
但我会这样
如果没有选择选项,我需要自定义单选按钮,它应该在其中显示白色.如果选择单选按钮,则框内应显示绿色.怎么做到这一点？
这是我尝试过的.
的index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
/* Radio Button CSS*/
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio:checked + label:after { …推荐指数
解决办法
查看次数
如何在oracle sql中获取date列的时间戳？
我有一个名为"users"的表名.它有一个名为"logondt"中,它会显示只有在这种格式一列mm:dd:yy类似04-JUN-14.但我需要使用select查询来查找用户登录的时间.
我试过这样的事情..
select logondt from users where logondt between to_date('2014-06-03' ,'yyyy-mm-dd') and to_date('2014-06-03' ,'yyyy-mm-dd') and userid='12345';
可能吗？
推荐指数
解决办法
查看次数
如何在onsenui中使用多个html文件
在OnsenUI中,它说:"您可以在单独的文件中定义页面内容,而不是在单独的文件中创建index.html和services.html."
我不喜欢将我的整个应用程序放在一个html文件中,因此我尝试将每个模板放入一个单独的文件中.这是我的文件结构:
万维网
-index.html
-services.html
-menu.html
的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css" />
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css" />
<script src="https://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="script.js"></script>
<script>
angular.module('app', ['onsen']);
angular.module('app')
.controller('AppController', function($scope) {
});
</script>
</head>
<body ng-controller="AppController">
<ons-navigator var="myNavigator">
<ons-button ng-click="myNavigator.pushPage('services.html', { animation : 'slide' } );">Pay</ons-button>
</ons-navigator>
</body>
</html>
services.html
<ons-template id="services.html">
<ons-page>
<ons-list>
<ons-list-item>Service 1</ons-list-item>
<ons-list-item>Service 2</ons-list-item>
<ons-list-item>Service 3</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
的script.js
angular.module('app', ['onsen']);
angular.module('app')
.controller('AppController', function($scope) {
ons.ready(function() {
ons.bootstrap();
});
});
如果我使用单个html文件,它似乎是一个性能问题.在这里,如果我单击该按钮,它将不会推送到services.html页面.如果我在同一个html文件中使用ons-template,这将有效.我如何在这里使用多个html页面.
这是我试过的..
推荐指数
解决办法
查看次数
带有悬停的 CSS 条件语句
这个问题在条件 CSS 中可能更简单。
我有五行包含一些内容，并且根据某些条件，我添加了一个名为“previous”的类来显示不同的背景颜色。
当我悬停上一堂课的内容时，我得到了不好的透明背景。
即使将其悬停，我也想显示相同的背景颜色（灰色）。
所以，我尝试了下面的代码并尝试在 css 中使用:has条件，如果它有以前的类，请将悬停颜色更改为灰色。但它没有奏效。
我的期望是即使将其悬停也具有相同的背景颜色。
有人可以帮我解决这个问题，因为我只需要来自CSS/SCSS的解决方案。不是来自 javascript。
.previous {
background-color: grey;
}
.row:hover {
background-color: transparent;
:has(.previous) {
background-color: grey;
}
}<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>推荐指数
解决办法
查看次数
在媒体查询中使用的平板电脑的最大宽度是多少？
我对媒体查询进行了一些研究，但对获得平板电脑宽度感到非常困惑。
我发现的一些例子：
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
但是，如今平板电脑的尺寸各不相同。有些平板电脑看起来很大，那么如何找到平板电脑的最大宽度？
到目前为止，我使用如下..
# Tablet
only screen and (min-width: 768px) and (max-width: 979px)
我需要知道平板电脑的最大宽度来修复我的响应式设计。我可以为平板电脑使用 786 像素的最小宽度吗？我要所有品牌平板设备（三星、ipad、Google Nexus 系列）
推荐指数
解决办法
查看次数
如何从JavaScript中的另一个跨域URL读取Cookie
我有一个跨域URL，如果我直接访问它，我可以看到cookie（从chrome浏览器中的Resources-> Cookies）。
我创建了一个单独的HTML文件，每当加载HTML文件页面时，我都需要从该URL获取cookie。
是否可以通过javascript？
推荐指数
解决办法
查看次数
如何在javascript中将值和值相加
在Javascript中,我有一个方案来实现以下内容:
让我们取一个下面的整数列表,取该列表中的每个整数并将该值加倍,然后将doubled值平方,然后作为输出,将所有平方值相加.例如:
doubleandSquareandSum[1] // 4
doubleandSquareandSum[1, 2] // 20
doubleandSquareandSum[1, 2, 3] // 56
doubleandSquareandSum[1, 2, 3, 4] // 120
JS Code尝试过:
function doubleandSquareandSum(arr) {
ret= [];
for (var i = 0, len = arr.length; i < len; i++) {
ret.push(arr[i] * arr[i]);
}
return ret;
}
我知道Math.sqrt,但不知道如何在这里实现它.我尝试了以上的东西,但没有奏效.有人可以帮我吗？
推荐指数
解决办法
查看次数
如何比较和过滤es6中两个对象数组中不匹配的数组
在我的 Angular 应用程序中，我试图只获取从 UI 修改的更新数组。
在这里，我有两个数组，其中一个 role_name 已更改。我想比较和过滤掉修改过的对象，只返回那些修改过的数组。（在这种情况下，role_name值被修改）
我试过在 ES6 的帮助下过滤掉，但它不起作用。
有人可以帮助我，我在哪里失踪？
var arr1 = [ {
"num" : null,
"role_name" : "ABC",
"profile" : "ff",
"user" : "1234",
"rn" : "1",
"user_name" : "Rywan"
},
{
"num" : null,
"role_name" : "DEF",
"profile" : "ff",
"user" : "1234",
"rn" : "2",
"user_name" : "adecg"
},
{
"num" : null,
"role_name" : "GHJ",
"profile" : "ff",
"user" : "1234",
"rn" : "3",
"user_name" : "dde"
},
{
"num" …推荐指数
解决办法
查看次数
OnsenUI - ion-navicon不显示图标
我试过这里.我在span中给出了这个标签.但是,它没有在导航栏中显示图标.
<i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
的index.html
<!doctype html>
<html lang="en" ng-app="my-app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="onsenui.css"/>
<link rel="stylesheet" href="onsen-css-components.css"/>
<script src="angular.js"></script>
<script src="onsenui.js"></script>
<script>
ons.bootstrap();
</script>
<style>
.navigation-bar {
font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
font-size: 17px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
white-space: nowrap;
overflow: hidden;
word-spacing: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
line-height: normal;
cursor: default;
-webkit-user-select: none; …推荐指数
解决办法
查看次数
如何在jquery中为单个按钮id使用单击事件
这里我有两个带id frm_submit1和的按钮frm_submit2
<button type="button" id="frm_submit1">Click Me 1!</button>
<button type="button" id="frm_submit2">Click Me 2!</button>
在jquery中,我需要为两个按钮执行相同的onclick事件.对于一个按钮(frm_submit1)点击,我使用如下.如何使用多个按钮？
$(document).on('click', '#frm_submit1', function(event) {
});
我用过这个,但没用!任何的想法？
$("#frm_submit1, #frm_submit2").click(function (e) {
// do something
});
推荐指数
解决办法
查看次数
具有单个或多个数据源的两个 mat-paginator 不起作用
我有一个 mat-table，每页最多可以显示 5/10/15 个条目。起初，我在底部有一个垫子分页器，效果很好。现在我被要求在表格顶部设置一个分页器，在表格底部设置另一个分页器，因此如果用户正在寻找位于顶端。
我试图将两个分页器链接到同一个数据源。但它没有奏效。因此，尝试创建 2 个数据源，但它也有一个限制。
唯一的限制是底部的分页器不能更改每页的项目，因为没有一种方法可以让我控制该属性。
此外，我无法直接设置页面索引或每页属性（表格未刷新），因此所有移动都是通过一些逻辑和分页器方法（如 previousPage() 或 lastPage()）实现的。
谁能帮我这个？我对具有单个或多个数据源的解决方案感到满意。
工作代码-> STACKBLITZ
<mat-paginator #paginatorTop (page)="pageEvent = handlePageTop($event)" [length]="length" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
<mat-paginator #paginatorBottom (page)="pageEvent = handlePageBottom($event)" [length]="length" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
app.component.ts
ngOnInit() {
this.dataSource2.paginator = this.bottomPaginator;
this.dataSource.paginator = this.topPaginator;
this.topPaginator.length = this.dataSource.data.length;
this.bottomPaginator.length = this.dataSource2.data.length;
}
public handlePageTop(e: any) {
let {pageSize} = e;
this.bottomPaginator.pageSize = pageSize;
if(!this.topPaginator.hasNextPage()){
this.bottomPaginator.lastPage();
}else if(!this.topPaginator.hasPreviousPage()){
this.bottomPaginator.firstPage();
}else{
if(this.topPaginator.pageIndex < this.bottomPaginator.pageIndex){
this.bottomPaginator.previousPage();
} else if(this.topPaginator.pageIndex >this.bottomPaginator.pageIndex){
this.bottomPaginator.nextPage();
}
} …推荐指数
解决办法
查看次数
标签 统计
html ×7
javascript ×5
css ×4
angularjs ×3
angular ×2
arrays ×2
jquery ×2
onsen-ui ×2
typescript ×2
android ×1
cookies ×1
ecmascript-6 ×1
html5 ×1
oracle ×1
pagination ×1
radio-button ×1
sass ×1
sql ×1
square-root ×1