10

SlickGrid を使い始めたばかりで、その品質に驚かされます。ただし、スタイリングに関しては、全体的なスタイリング アプローチを推奨するドキュメントや例は見つかりませんでした。いろいろなところにオプションや API が散らばっていますが、そこから戦略を抽出するのは非常に困難です。また、グリッドは jQuery UI テーマを活用します。残念ながら、それらは私が達成しようとしていることを妨げています。ui-darkness テーマと共に、カレンダー ウィジェット専用の jQuery UI を取り上げました。このテーマは、カレンダー ウィジェットでは問題なく機能しますが、グリッドはそのすべての側面をオーバーライドする必要があります。

これは、私が達成しようとしている外観を示す jsFiddle です: http://jsfiddle.net/nareshbhatia/3q6RD/。説明のために、通常の HTML テーブルを使用します。ただし、SlickGrid を使用してまったく同じスタイリングを実現したいと考えています。この jsFiddle の CSS は、基本的に、ビジュアル デザイナーからの要件です。

#positions-table th {
    background-color: #505050;
    color: #eeeeee;
    text-shadow: none;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
}

編集:スターター SlickGrid 実装で jsFiddle も作成しました: http://jsfiddle.net/nareshbhatia/vJshY/。ご覧のとおり、ui-darkness テーマが完全に引き継がれています!

4

1 に答える 1

7

2番目/最後のjsFiddle内で、CSSを変更してこのコードを含めることができます

.slick-header-column.ui-state-default {
    background:none ;
    background-color: #505050 ;
    color: #eeeeee;  
    border: none;  
    padding: 0;
    text-shadow: none;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 13px;
    height: 40px;
    line-height: 40px;    
}

.slick-row.ui-widget-content, .slick-cell {
    background: none;
    background-color: #eeeeee;
    color: #666666;
    border: none;
    border-bottom: solid 1px #ffffff;
    font-size: 14px;
    height: 60px;
    line-height: 60px;
    padding: 0 5px;
}
于 2013-06-24T06:02:07.490 に答える