小编dma*_*man的帖子

布局和设计表格的标准(HTML/CSS)

Web开发的一部分(从前端角度来看)是布局形式.从来没有标准的设置,我看到人们继续使用<tables>来保持造型一致.假设你要列出这个表格:

在此输入图像描述

乍一看,似乎桌子可以轻松地布置这种形式.另一个选择是使用<fieldset>'s,可能还有一个列表.将字段集浮动到左侧,给它们相等的宽度.

我的问题是什么是最标准的表格形式?似乎有几种技术,但其中许多技术不能跨浏览器工作.

你会怎么做?为什么?

html css forms

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

Knockout.js"全选"复选框

我刚开始玩Knockout.js,看起来真的很酷.我有一个网格.此网格有一个列,顶部有一个复选框,用于"选择所有"元素,以及取消选择.标准网格行为.

到目前为止,这是我的代码:

使用Javascript:

// Define a "banner" class
function banner(inventory, name, artType, artSize) {
    return {
        isSelected : ko.observable(false),
        inventory : ko.observable(inventory),
        name : ko.observable(name),
        artType : ko.observable(artType),
        artSize : ko.observable(artSize)

    };
}

var viewModel = {
    banners : ko.observableArray([new banner("network", "Banner #1"), new banner("oo", "Banner #2")]),
    addBanner : function() {
        this.banners.push(new banner("network", "Banner"));
    },
    selectAll : function() {
        this.banners.isSelected(true)
    }       

};

ko.applyBindings(viewModel);
Run Code Online (Sandbox Code Playgroud)

我将"selectAll"事件绑定到这样的复选框:

<th><input data-bind="click: selectAll" type="checkbox" /></th>
Run Code Online (Sandbox Code Playgroud)

对于我列表中的每个横幅,他们的复选框如下所示:

<td><input data-bind="checked: isSelected" type="checkbox" /></td>
Run Code Online (Sandbox Code Playgroud)

由于某种原因,我的selectAll功能无法正常工作.我对这个OO javascript编程范例相当新,所以我可能会在这里做一些明显错误的事情.

谢谢!

javascript checkbox input knockout.js

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

ExtJS - 在FormPanel列布局中排列表单元素

我有一个有3列的FormPanel.每列占FormPanel宽度的33%.看起来像这样:

searchForm = new Ext.FormPanel({
    frame: true,
    title: 'Search Criteria',
    labelAlign: 'left',
    labelStyle: 'font-weight:bold;',
    labelWidth: 85,
    width: 900,
    items: [{
        layout: 'column',
        items: [{ // column #1
            columnWidth: .33,
            layout: 'form',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Banner ID',
                name: 'bannerID',
                anchor: '95%',
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Advertiser',
                typeAhead: true,
                triggerAction: 'all',
                mode: 'local',
                emptyText: 'Advertiser',
                store: advertiserList,
                valueField: 'id',
                displayField: 'name'
            })] // close items for first column
        }, {
            columnWidth: .33,
            layout: 'form',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Banner …
Run Code Online (Sandbox Code Playgroud)

forms layout extjs

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

ExtJS - EditorGridPanel中的ComboBox宽度

我已经使用ComboBox设置了EditorGridPanel,它运行良好.我唯一的问题是ComboBox的宽度似乎只扩展到网格列的宽度,而不是ComboBox本身的内容.

有没有解决的办法?

这是我的意思的一个例子:

EditorGridPanel中的ComboBox

谢谢!

grid combobox extjs

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

CSS导航精灵 - 奇怪的形状(不是正方形)

我通常没有制作CSS精灵的问题,但是这个让我难过......而且我不确定如何解决它.基本上我有一个如下所示的导航精灵:

纳斯达克广告网络NAV-sprit.png

我正在使用标准惯例将它们放在<li>标签中,例如:

<li class="welcome"><a href="#" title="welcome">welcome</a></li>
Run Code Online (Sandbox Code Playgroud)

然后应用CSS来调整背景位置:

#navigation li.welcome a {
  width:155px;
  background-position:-0px -46.5px; }
Run Code Online (Sandbox Code Playgroud)

当然我没有想到这一点,但问题发生在悬停.由于您只能定义"方形"区域,当您将鼠标悬停在元素上时,"蓝色"悬停状态将被转移到下一个导航项.

然后我想我必须为每个项目制作单独的图像...但由于重叠的箭头部分,这不会很正常.

也许我必须分开"中间"箭头分离器?我真的不确定.

我在这里难过.有任何想法吗?

html css xhtml css-sprites

5
推荐指数
2
解决办法
2737
查看次数

使用#hash URL(或其他方式)将标签页中的标签页定位

我正在使用jQuery工具库选项卡。您可以在这里找到它们:http : //flowplayer.org/tools/tabs/index.html

我的基本标记是这样的:

$("#tab-holder ul").tabs("div.tab", { history: true, api: true })
$("#profile-sub-tabs ul.menu").tabs("div");
Run Code Online (Sandbox Code Playgroud)

#profile-sub-tabs是主#tab-holder界面中的另一个选项卡界面。插件使用的参数称为历史记录,该参数基本上允许我使用标签名称来定位标签,例如:

http://www.blah.com/tabs.aspx#account
Run Code Online (Sandbox Code Playgroud)

会带我到“帐户”标签。这工作正常,但我希望能够专门定位子选项卡。我知道这段代码行不通,但是理论是这样的:

http://www.blah.com/tabs.aspx#account#profile
Run Code Online (Sandbox Code Playgroud)

引导我进入帐户->个人资料标签。很简单。

现在,我不确定是否可以通过URL进行操作,还是不确定是否应该通过Java脚本(以某种方式)处理请求并手动使用API​​切换至正确的标签页。我只是不确定如何获取该数据以切换到正确的标签。

谢谢!

html javascript url hash jquery

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

从指令设置$ scope变量

有问题的指令是这里的人: 基于属性的指令中的动态模板?

无论如何,这就是我想要完成的事情.

<titlebar>指令可以采用一个名为的属性edit-button.如果存在,并且单击该按钮时,我想在我的控制器中设置一个$ scope变量,该变量将切换按钮的可见性以删除/编辑项目.

例如,如果我$scope.currentlyEditting = true;在我的指令中设置,我将它绑定到控制器,然后用于ng-show显示/隐藏控件.我只是不确定如何将数据存入我的控制器.

titleBar指令:

robus.directive("titlebar", function() {
  return {
    restrict: "E",
    template: "<header class='bar-title' ng-class='{\"sub-view\": view}'>"+
              "<a class='button' ng-click='goBack()' ng-show='back'><i class='icon-arrow-left'></i> Back</a>" +
              "<h1 class='title' ng-transclude>" +
              "<span class='sub-title' ng-show='view'>{{view}}</span></h1>" +
              "<a class='button' ng-click='showEdit()' ng-show='edit'>Edit</a>" +
              "</header>",
    scope: {
      view: '@view',
      edit: '@editButton',
      back: '@backButton'
    },
    transclude: true,
    replace: true,
    link: function ($scope, $element, attrs, ctrl) {
      // $scope.$apply();
    },
    controller: function($scope, $element, $attrs, $location, $routeParams) …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-directive

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

循环逗号分隔的字符串,拆分成多个数组?

我有一个字符串格式:

div, v6571, 0, div, v8173, 300, p, v1832, 400
Run Code Online (Sandbox Code Playgroud)

我想将这个字符串拆分成多个数组,对于上面的例子,我需要3个数组,这样格式就像这样:

item[0] -> div
item[1] -> v6571
item[2] -> 0
Run Code Online (Sandbox Code Playgroud)

我知道我可以.Split(',')在字符串上做一个并把它放到一个数组中,但这是一个大数组.对于上面的字符串示例,我需要3个具有上面提供的结构的数组.只是对字符串的迭代感到有点困惑!

谢谢!

c# asp.net arrays string

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

Javascript .replace()/ regex,代码为字符串

我正在尝试"删除"(只需将其替换为"")以下字符串:

<script type="text/javascript">
document.createElement("img").src="http://www.google.com"
</script>
Run Code Online (Sandbox Code Playgroud)

从以下字符串:

<SCRIPT LANGUAGE=JavaScript>
var PAswf = "_ADPATH_[%SWF File%]";
var advurl = "_ADCLICK_";
var PAadvurl = escape(advurl);
var PAwidth = "[%Width%]";
var PAheight = "[%Height%]";
var wmValue = "_ADDCP(wm)_";
if (!wmValue)wmValue = "opaque";
var PAwmode = wmValue;
document.write('<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' WIDTH="'+ PAwidth +'" HEIGHT="'+ PAheight +'">');
document.write('<PARAM NAME=movie VAL'+'UE="' + PAswf + '?clickTag='+ PAadvurl +'"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE='+ PAwmode +'>');
document.write('<EMBED sr'+'c="'+PAswf + '?clickTag='+ PAadvurl +'" quality=high wmode='+ PAwmode);
document.write(' swLiveConnect=TRUE WIDTH="'+ PAwidth +'" HEIGHT="'+ …
Run Code Online (Sandbox Code Playgroud)

javascript regex replace

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