小编Phi*_*phy的帖子

如何并排放置两个div,其中LEFT一个适合其他,另一个占用剩余空间?

我正在尝试使用以下标准将两个div放在一起:

  1. 两个div必须保持在同一条线上.
  2. 必须优先考虑左div.尽可能多的文本应该显示在左边的div中,直到溢出的情况下使用省略号.
  3. 正确的div文本应该是右对齐的.在溢出的情况下,应使用省略号.
  4. 文本是动态的,因此不能使用百分比或固定宽度.
  5. 只需要在webkit基于浏览器的基础上工作,因此CSS3首选解决方案.

以下是一些示例图像:

输入

<div class='left'>I should always fit. If not, ellipsis should be used.</div><div class='right'>Right align and fit me if space available here.</div>
Run Code Online (Sandbox Code Playgroud)

产量

在此输入图像描述

输入

<div class='left'>I should always fit. If not, ellipsis should be used. And some more text and more, and more text.</div><div class='right'>Right align and fit me if space available here.</div>
Run Code Online (Sandbox Code Playgroud)

产量

在此输入图像描述

输入

<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>
Run Code Online (Sandbox Code Playgroud)

产量

在此输入图像描述

html ellipsis css3

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

如何使用Sencha Touch数据模型读取嵌套的JSON结构?

我整个晚上一直试图解决这个问题,但无济于事.我有一个JSON结构如下(来自另一个系统所以我不能改变它的结构):


    {
        "parents":{
            "parent":[
             {
                 "parentId":1,
                 "children":{
                     "child":[
                      {
                          "childId":1,
                      },
                      {
                          "childId":2,
                      }
                   ]
                }
             },
             {
                "parentId":2,
                "children":{
                   "child":[
                      {
                         "childId":1,
                      },
                      {
                         "childId":2,
                      }
                   ]
                }
             }
          ],
          "pageNum":1,
          "pageSize":2
       }
    }

但是,我无法弄清楚数据模型的正确结构应该是什么.我尝试了以下但它不起作用.顺便说一下,我可以访问父信息.问题在于访问子信息.所以,我想我如何设置关系数据有问题.


    Ext.regModel("ParentModel", {
        hasMany: { 
            model: 'ChildrenModel', 
            name: 'children.child' // not too sure about this bit
        },
        fields: [
            {name: 'parentId', type: 'string'}
        ],

        proxy: {
            type: 'ajax',
            url : 'models.json',
            reader: {
                type: 'json',
                root: 'parents.parent' // this works fine
            }
        }
    });

    Ext.regModel('ChildrenModel', …

json nested extjs

8
推荐指数
2
解决办法
1万
查看次数

聚合物中的主机与目标

我试图理解以下上下文中的主机和目标(和元素)取自Polymer PathPolymer Data Flow文档.

请考虑以下图表:

在此输入图像描述

现在考虑以下语句(来自相同的文档):

"当本地DOM中的两个元素绑定到同一属性时,数据似乎从一个元素流向另一个元素,但此流程由主机调解."

到现在为止还挺好.然后继续说:

"由一个元素进行的更改传播到主机,然后主机将更改传播到第二个元素."

第一部分:"由一个元素进行的更改传播到主机..."这是否意味着对第一个元素的更改首先传播到其自己的主机?"元素"实际上是指元素的数据属性吗?

第二部分"然后主机将更改传播到第二个元素." 我们传播到第二个元素的数据属性吗?这里更加令人困惑,因为只有一个元素或数据对象在两个ehhh元素之间共享?

我认为第一个元素的数据属性所做的更改首先转到它自己的主机,然后第一个主机将更改传播回第二个元素的数据元素(这恰好也是第一个元素的数据对象) .

host target polymer

8
推荐指数
1
解决办法
449
查看次数

使用框模型在其父div中包含项目

使用以下HTML和CSS3规则,我正在尝试确保遵守以下条件:

我的所有标准都有效,除了第1项,其中孩子超过了父母的宽度.问题:如何让孩子留在父母身边?

  1. li项目不能超过其父宽度,即400px
  2. img,标签和货币内容必须在其范围内垂直居中
  3. 货币不应包装,应始终全部显示
  4. 货币应始终显示为尽可能接近标签范围.
  5. 标签文本应夹在2行,省略号显示超过2行.

注意:只需要在Chrome和基于Safari webkit的浏览器中使用.

它应该看起来像:

在此输入图像描述

但是,此刻看起来像这样:

在此输入图像描述

有任何想法吗?

*********************JS小提琴示例************************

<ul>
    <li>
        <span class="img"></span>
        <span class="label">Acclaim</span>
        <span class="currency">(USD 50)</span>
    </li>

    <li>
        <span class="img"></span>
        <span class="label">Acclaim 1 11 111 1111 11111</span>
        <span class="currency">(USD 50)</span>
    </li>

    <li>
        <span class="img"></span>
        <span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span>
        <span class="currency">(USD 50)</span>
   </li>
</ul>


ul { …
Run Code Online (Sandbox Code Playgroud)

css children parent css3 contain

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

使用UPLOAD for Windows 10+ Mobile进行视频捕获

我一直在使用UPLOAD for Windows 10 Mobile研究视频捕获,目前似乎无法实现.我使用以下内容:

<input type="file" accept="video/*">
Run Code Online (Sandbox Code Playgroud)

这允许您选择移动网络摄像头作为信号源,但您只能拍照.在Android和iOS上,相机打开就绪,可以录制视频,您可以将其作为"multipart/form-data"POST请求的一部分上传.

在网络上,有很多例子可以在视频元素中显示网络摄像头,并从中捕获单个帧,但不能捕获完整的视频进行上传.网络上没有从Windows Phone上的网页实际打开摄像机的示例(我在Windows 10 Mobile Insider Preview上使用Edge Browser).

我还使用以下代码,它允许您从网络摄像头流中获取静态图像(取自MicrosoftEdge/Demos/photocapture):

var initializeVideoStream = function(stream) {
    mediaStream = stream;

    var video = document.getElementById('videoTag');
    if (typeof (video.srcObject) !== 'undefined') {
         video.srcObject = mediaStream;
    }
    else {
        video.src = URL.createObjectURL(mediaStream);
    }
    ...
}

navigator.mediaDevices.getUserMedia({
        video: {
            width: 640,
            height: 360,
            deviceId: { exact: webcamList[currentCam] }
        }
    }).then(initializeVideoStream).catch(getUserMediaError);
Run Code Online (Sandbox Code Playgroud)

使用MediaStream对象调用initializeVideoStream,但是,似乎无法将此管道传输到Blob或其他流,这将允许您保存它并最终将其发布到服务器.

HTML5 MediaRecorder API看起来很有希望,但是,没有多少厂商已经实现了它.

我还发现这个黑客用HTML5录制音频和视频(共同主演Meteor),但是,由于Edge浏览器不支持webp格式,所以这是不行的.

我在网上找到的其他一些资源包括(但没有覆盖视频上传):

http://dev.modern.ie/testdrive/demos/photocapture/ …

video internet-explorer file-upload microsoft-edge

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

分组类选择器和 CSS 特异性

哪些类别选择器规则对于 10 分具有更高的特异性?

.A.E.F .C .D
Run Code Online (Sandbox Code Playgroud)

或者

.A .B .C span
Run Code Online (Sandbox Code Playgroud)

HTML:

<div class="A E F">
    <div class="B">
        <div class="C">
            <div class="D">
                <span>17590</span>
                <span>Points</span>
            </div>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.A.E.F .C .D /* span */ {
    font-size: 1em;
}

.A .B .C span {
    font-size: .95em;
}
Run Code Online (Sandbox Code Playgroud)

这是一个演示该问题的 JS 小提琴:http://jsfiddle.net/UgkZY/

我本以为第一条规则会获胜。5 个类别,而不是 3 个类别 + 1 个类型。然而,第二条规则胜出,因为 .AEF 似乎只得分为 1 级。

如果我使用以下在线CSS特异性计算器,http://specity.keegan.st/,它认为第一条规则将会获胜。事实上,在 Chrome 浏览器中,第二个获胜。

有人可以澄清一下,就 CSS 特异性而言 .ABC 确实被视为一类吗?

顺便说一句,如果我将跨度选择器添加到第一条规则中,它将获胜。

根据 CSS 规范,我认为第一个应该获胜。

http://www.w3.org/TR/selectors/#specificity

LI.red.level /* a=0 …

css css-selectors css-specificity

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