小编use*_*234的帖子

Jquery - 如何在显示加载图标的同时使背景变灰

当用户点击提交按钮并在灰色背景上显示加载图标时,我试图使背景变灰.

下面是我试图展示的图标,但是我无法显示动画,图标只是保持不动.

在此输入图像描述

这是我的HTML:

 <div class="container"></div>
 <div id="loading-img" style=" z-index: 20;display:none;"></div>
 <button id="button">Submit</button>
Run Code Online (Sandbox Code Playgroud)

JS:

 $("#button").click(function() {
    $("#container").css("opacity",0.5);
    $("#loading-img").css({"display": "block"});
}
Run Code Online (Sandbox Code Playgroud)

我不确定如何使用css在灰色背景上制作动画图标.有什么想法吗?编辑::::

小提琴:http://jsfiddle.net/hnk6bLbt/1/

谢谢!

html javascript css jquery

25
推荐指数
2
解决办法
9万
查看次数

使用数据表的服务器端分页

服务器每页返回15条记录,总记录超过2000条.我想显示前15条记录,然后每次单击"下一步"按钮,显示剩余的所有记录(每页15条记录).为此我们做服务器端分页或客户端???

这是我的表和我在数据表中使用分页的属性:

  var tableData = self.accountCollection.getData();

        var tableColumns = this.accountCollection.getColumns();
        var totalRecs = this.accountCollection.length;

        //create the UI grid containing the list of items

        this.resultsTable = tableEl.dataTable( {
            "bServerSide": true,
            "sEcho": 3,
            "iTotalRecords": totalRecs,
            "iTotalDisplayRecords": 15,
            "aaData": tableData,
            "aoColumns": tableColumns,
            "aaSorting": [[1,'asc']],
           });



getData: function () {

        var returnData = [];
        $.each(this.models, function (idx, accountModel) {
            returnData.push(accountModel.attributes);
        });
        return returnData;
    },
Run Code Online (Sandbox Code Playgroud)

returnData将返回我有我的字段将填充IA表的对象:重新调整对象:(大致)

Object
 accountName: "No Company"
 address1: "1234 asdf"
  address2: ""
  billingAcctId: null
  billingSystem: null
  city: "mountain view"
  comments: …
Run Code Online (Sandbox Code Playgroud)

datatable jquery pagination

11
推荐指数
1
解决办法
5万
查看次数

如何进行多个api调用以在d3图表中显示单个数据

我正在尝试使用d3在图表中显示数据,方法是使用相同的数据但不同的日期进行2次单独的api调用.

第一次api电话:

 var data1 = {     'name'     : 'test',
                   'id'       : 7948237982937,
                   'startDate': startDate1,
                   'endDate':   endDate1,
                   'tz':        getTimezoneOffset() };


var data2: {        'name'     : 'test',
                   'id'       : 7948237982937,
                   'startDate': startDate2,
                   'endDate':   endDate2,
                   'tz':        getTimezoneOffset() };
Run Code Online (Sandbox Code Playgroud)

我正在尝试拨打电话并按如下方式显示图表:

粗线表示一组,start and end dates (startDate1 and endDate1)虚线表示第二组start and ends dates(startDate2 and endDate2).

我试过这个:

draw: function(){
   getData();
   getData2();
},
getData: function() {
    var self = this;
    self.showLoading();
    $.get('url', data1, function(response) {
       console.log("success" + response);
    });
},
 getData2: function() {
    var self …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js

6
推荐指数
1
解决办法
528
查看次数

将时间戳转换为 ("MMM DD, HH:mm") 格式。JS

我有一个日期作为服务器响应的时间戳返回,我想("MMM DD, HH:mm")使用toUTCString(). 到目前为止,我有这个:

date = new Date(1555649122787).toUTCString()
Run Code Online (Sandbox Code Playgroud)

o/p: "Mon, 22 Apr 2019 23:00:32 GMT",但是我想要这种格式的 o/p:

Apr 22, 23:00. 不幸的是,对于我的项目,我无法使用 moment.js 作为库。还有其他更好的方法吗?

javascript date

6
推荐指数
1
解决办法
322
查看次数

指针事件:不允许滚动但禁用 click-JS/CSS

有没有一种方法可以设置pointer-events: none只能禁用该容器上的单击,但可以使用覆盖层启用滚动。

我有小提琴: https: //jsfiddle.net/1eu6d3sq/1/

当我使用 屏蔽时pointer-events: none,整个容器将被禁用,而当我删除此属性时,所有事件都会被启用。CSS:

   .parent {
  position: relative;
  pointer-events: none; /* if I remove this the scrolling works and click is also enabled. if I add this, scrolling and click both get disabled */
}
    
.button {cursor: pointer}
.main {    
  height: 80px;
  overflow: auto;
}
    
.mask {
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: default;
  height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

 <div class="parent"><div class="main">

      <div class="aaaa">
      Some masked …
Run Code Online (Sandbox Code Playgroud)

html javascript css

6
推荐指数
1
解决办法
6907
查看次数

如何在bootstrap tooltip CSS/Jquery中提到的文本中使单词变为粗体

我试图在悬停在图像上时显示引导工具提示.我在工具提示中有一个文本,我需要将其设为粗体.

我从上面提到的来源尝试了这个,但是没有形成我的工作..

  <button class="infoTipsBox" type ="button" data-toggle="tooltip" data-placement="right"data-original-title='<b>big tooltip</b>'>      
  </button>
Run Code Online (Sandbox Code Playgroud)

JS:

$(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
Run Code Online (Sandbox Code Playgroud)

我做错了什么?在title属性的上述文本中,我试图以粗体字形成"bootstrap tooltip"并以普通字体休息.我怎样才能实现这一目标?

css jquery twitter-bootstrap

5
推荐指数
1
解决办法
2542
查看次数

如何强制nvd3显示与graph-nvd3上绘制的值相同的刻度数

如何强制nvd3图形显示一定数量的刻度,例如,请在下面的图形图中找到: 在此输入图像描述

如下所示,我有7个值被推送到持有一周7天的数组.但看起来它们的刻度数比实际值多.我正在寻找的是类似的东西:http://nvd3.org/examples/line.html 然而,当我将鼠标悬停在这些刻度上时,它们未对齐,如图所示: 在此输入图像描述

这就是图形线应该在哪里以及那些悬停的勾号显示工具提示.但由于某种原因我没有显示7个刻度而是显示10个刻度并且所有悬停的工具提示都未对齐.我还试图强制nvd3具有特定的#蜱虫但没有工作.

                chart2.xAxis
                .ticks(7)
                .tickFormat(function(d) {
                    return d3.time.format.utc('%b %d')(new Date(d));
                });
Run Code Online (Sandbox Code Playgroud)

这里是小提琴:http://jsfiddle.net/86hr7h1s/4/ 理想情况下,我应该在图表上显示7天和7个刻度,与图表上的重复日期和10个刻度相反.任何想法都错了,如何纠正?

编辑::::::

我能够使用tickValues()而不是ticks()使用以下答案解决我的问题7天.但是,对于较大的值,例如显示2个月的图形数据,我将有30个数据点.我仍然看到我的图表在悬停时勾选不对齐:

在此输入图像描述

如上所示,悬停点仍然与垂直刻度不对齐.我不想在图表上强制使用ticksValues超过7天.我想如何实现这一目标?

仅供参考:我用它来制作nvd3显示7值:

    var datas = this.graphFunction(data);
    chart2.xAxis.tickValues(datas[0].xAxisTickValues);
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/86hr7h1s/5/

谢谢!

javascript d3.js nvd3.js

4
推荐指数
1
解决办法
8504
查看次数

悬停时向表格单元格添加左边框

我试图在文本的左边添加一个边框,这样当我悬停行时,第一个单元格的边框会突出显示,用户知道它们在哪一行.

这是我到目前为止的一个小提琴:

#table {
  border: 1px solid#e9e9e9;
}
tr:hover {
  background-color: #e9e9e9;
}
tr:hover > td:first-child {
  border-left: 2px solid #1B8645;
}
Run Code Online (Sandbox Code Playgroud)
<table id="table">
    <tr>
        <th>Status</th>
        <th>Price</th>
        <th>Address</th>
    </tr>

	<tbody>
        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>

        <tr>
            <td>Active</td>
            <td>8742</td>
            <td>5476235street</td>
        </tr>
    </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

然而,正如小提琴中所见,当我将鼠标悬停在行上时,文本被推了一下,使得悬停看起来凌乱而扭曲.我试图以这样的方式设置一条线,当悬停时,文本不应被推开,表格内容不应移动.

以下是悬停时边框的应用方式:

tr:hover >  td:first-child {
    border-left: 2px solid #1B8645;
}
Run Code Online (Sandbox Code Playgroud)

html css

3
推荐指数
1
解决办法
47
查看次数

使用 Jquery 插件提交表单时如何在“.(点)”之后验证电子邮件

我正在尝试验证具有电子邮件地址的表单,其 prop 设置为“true”,如图所示:

$( "#myform" ).validate({
  rules: {
   field: {
    required: true,
     email: true
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

我检查了 jquery 插件http://jqueryvalidation.org/email-method/并且我看到电子邮件地址仅在“@”符号(上面链接中的示例)之前得到验证。我正在制作一个电子邮件验证脚本,它基本上只检查完整的电子邮件地址,包括末尾的“点”。任何想法如何实现这一目标?

http://jsfiddle.net/dbnkahee/1/

javascript validation jquery

3
推荐指数
1
解决办法
2244
查看次数

如何用对象数组中的特定索引替换元素 - Javascript

我有对象数组:

var arr=[
{name:"d", op: "GTE", field:"ddd"},
{name:"dss", op: "LTE", field:"d4dd"},
{name:"dss", op: "GE", field:"ddddd"}]
Run Code Online (Sandbox Code Playgroud)

我已经设法获得元素中每个数组的索引,但是我不确定如何用新值替换整个对象?例如:在索引 2 处,我希望对象在更新后看起来像这样:

var arr=[
    {name:"d", op: "GTE", field:"ddd"},
    {name:"dss", op: "LTE", field:"d4dd"},
    **{name:"lithe", op: "GE", field:"34545"}**
]
Run Code Online (Sandbox Code Playgroud)

我怎样才能做到这一点?

javascript

3
推荐指数
1
解决办法
9581
查看次数