これが自然だと思います。 だいたいにおいて、important を使いたい場合は既存の環境を完全に把握できていないからこそ頼みの綱的な事が多々あるので、要素単位の cssText で塗り替えるのは違うかと。
$("<style></style>")
.text( "body{ background-color:white!important }")
.appendTo(document.head);
以下がデベロッパーツールで見た結果
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>body{background-color:white!important }</style>
</head>
このブログにも設置しました。スクロールすると、文字部分が白く、影の付いた ▲ ボタンがページの右下に表示されます。 『ページの先頭から 200px までは、スクロールボタンを表示しない』という処理の部分にのみ jQuery を使用しています。常に表示しておくのならば CSS のみで問題ありません( その場合は、A 要素に display:none は必要ありません ) CSS
#scroll_top {
position: fixed;
text-decoration: none;
font-size: 40px;
color: rgba(255,255,255,0.85);
text-shadow: 1px 1px 2px #656a6f;
right: 0.5%;
bottom: 5rem;
}
A 要素 これは、</body> の直前に記述しています。
<a href="javascript:void(0);" id="scroll_top" onclick="window.scroll(0,0);" style="display:none;">▲</a>
※ CSS の記述を A 要素に全てインラインスタイルとして記述してもいいです。 jQuery 部分
$(function(){
$(window).on("scroll",function(){
var scroll = $("html").scrollTop();
if ( scroll <= 200 && $("#scroll_top").css("display") != "none" ) {
$("#scroll_top").css("display","none");
}
if ( scroll > 200 && $("#scroll_top").css("display") == "none" ) {
$("#scroll_top").css("display","inline");
}
});
});
この jQuery では、A 要素のインラインスタイルである、display プロパティをフラグとして使用し、表示したり消したりするのは最低限の回数になるようにしています。なので、display:none は必ず インラインスタイル側で指定する必要があります。
とにかく、複雑になってしまったので絵にしてみました。 デモページ(送信ボタンで一覧表示した後でデモ)
ソースコードはこんな感じ
$("#data .row_data").each(function(i){
var td = $(this).find("td").eq(2);
td.css(
{ "text-decoration":"underline", "cursor":"crosshair", "background-color" : "pink" }
);
// 入力内容
var text = td.text();
// 入力内容を保存
td.data("text", text );
td.on("click", function(){
if ( $(this).data("input") != "use" ) {
// 入力切替えフラグ
$(this).data("input", "use" );
// 入力内容
var text_now = $(this).text();
// TD の表示を消去
$(this).text("");
// 入力を追加
$("<input>")
.appendTo($(this)) // TD に追加
.val(text_now) // テキストセット
.focus() // フォーカスセット
// focusout で元に戻す
.on( "focusout", function(){
// 現在の入力
var text = $(this).val();
// 親 TD
var td = $(this).parent();
// データが変更されていたら『変更フラグ』をセット
if ( text != td.data("text") ) {
td.data("change", "yes");
td.css("background-color","silver");
}
else {
td.data("change", "");
td.css("background-color","pink");
}
// TD に値を戻して 切替えフラグを消去
td
.append(text)
.data("input", "" );
// INPUT を削除
$(this).remove();
});
}
});
});
HTML 部分は、タイトル部分と thead のみ作成し、JSON データを取り出す毎に作り直すようになっています。 $.each でループ処理している対象のデータは row です。これは JSON オブジェクトで、１行１行のデータを保持したデータセットの配列です。 ▼ フォーマット
[
{
"社員コード": "0001",
"氏名": "浦岡 友也",
"フリガナ": "ウラオカ トモヤ",
"所属": "0003",
"性別": "0",
"給与": "270000",
"手当": "9000",
"管理者": "",
"生年月日": "2000-01-01 00:00:00",
"性別2": "男",
"所属名": "営業部第三",
"手当2": "9000"
},
{
"社員コード": "0002",
"氏名": "山村 洋代",
"フリガナ": "ヤマムラ ヒロヨ",
"所属": "0003",
"性別": "1",
"給与": "300000",
"手当": "",
"管理者": "",
"生年月日": "",
"性別2": "女",
"所属名": "営業部第三",
"手当2": "0"
}
]
※ number_format() は、String.prototype.number_format として定義済みです ※ text-right は、twitter-bootstrap で定義されています
// テーブル表示リセット
$("#data .row_data").remove();
// データ用
var row_data;
var col_data;
// 行のループ ( <tr></tr> )
$.each(row, function( index, obj ) {
// テーブルに行を追加
row_data = $("<tr class=\"row_data\"></tr>").appendTo( "#data" );
// 行に列を追加
col_data = $("<td></td>").appendTo( row_data );
col_data.text( obj["社員コード"] );
col_data = $("<td></td>").appendTo( row_data );
col_data.text( obj["氏名"] );
col_data = $("<td></td>").appendTo( row_data );
col_data.text( obj["フリガナ"] );
col_data = $("<td></td>").appendTo( row_data );
col_data.text( obj["性別2"] );
col_data = $("<td></td>").appendTo( row_data );
col_data.text( obj["所属"] );
col_data = $("<td></td>").appendTo( row_data );
col_data.text( obj["所属名"] );
col_data = $("<td></td>").appendTo( row_data );
col_data.attr("class","text-right")
// head-js.view で String.prototype に定義
col_data.text( obj["給与"].number_format() );
col_data = $("<td></td>").appendTo( row_data );
col_data.attr("class","text-right")
// head-js.view で String.prototype に定義
col_data.text( obj["手当2"].number_format() );
col_data = $("<td></td>").appendTo( row_data );
col_data.text( obj["生年月日"] != null ? obj["生年月日"].substr(0,10) : "" );
});
1 列目をコード、２列目を氏名として、２列目のテキストにリンクを設定するには以下のよう記述します。
$("#data .row_data").each(function(i){
var code = $(this).find("td").eq(0).text();
var name = $(this).find("td").eq(1).text();
var link = '<a href="https://ドメイン/?code=' + code + '" target="_blank">' + name + '</a>';
$(this).find("td").eq(1).html( link );
});
TD の中の文字列にスタイルを適用してクリックした時のイベントを登録する(条件付)には、以下のように記述します ※ ここでは、特定の行のみ処理しています
$("#data .row_data").each(function(i){
var type = $(this).find("td").eq(1).text();
var td = $(this).find("td").eq(0);
if ( type == "特定の文字列" ) {
td.css(
{ "text-decoration":"underline", "cursor":"pointer" }
);
td.on("click", function(){
alert( $(this).text() );
});
}
});
以下は対象となる HTML の記述です
<div id="req"> <table id="data" class="table table-condensed table-hover"> <thead> <tr> <th>コード</th> <th>氏名</th> <th>フリガナ</th> <th>性別</th> <th>所属</th> <th>所属名</th> <th class="text-right">給与</th> <th class="text-right">手当</th> <th>生年月日</th> </tr> </thead> </table> </div>
デモページ 関連する記事 ▼ デモで実際に使用している自家製 API です PHP : SQLインジェクション対策付きの、MySQL のデータを JSON で返す自家製 API テスト用のテンプレート3パターン https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php?pretty=no : 整形なし https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php?escape=no : \uXXXX にエスケープ ▼ TABLE 作成部分はほぼ同じです FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
body {
padding: 10px 0 0 20px;
}
@media screen and ( max-width:479px )
{
body {
padding: 0px;
}
}
#table_wrap {
width:900px;
}
#syain td {
padding: 5px;
border: solid #000000 1px;
white-space: nowrap;
}
#syain th {
background-color: #e0e0e0;
font-weight: bold;
padding: 5px;
border: solid #000000 1px;
white-space: nowrap;
}
</style>
<script>
$(function(){
$("#btn").on( "click", function(){
console.log("クリックされました");
$.ajax({
url: "https://lightbox.sakura.ne.jp/demo/json/syain_api_bind.php",
cache: false,
data: { "name" : $("#cond").val() }
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
// テーブル作成処理
loadData( data );
})
// 失敗
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
})
// 常に実行
.always(function() {
console.log("常に実行");
})
;
});
});
function loadData( data ) {
console.log("処理開始");
// テーブル表示リセット
$("#syain tr,#syain th").remove();
// タイトル専用
var title_row;
var title_col_data;
// データ用
var row_data;
var col_data;
// 行のループ ( <tr></tr> )
$.each(data, function( index, value ) {
// 初回はタイトル作成
if ( index == 0 ) {
$.each( value, function( key, val ) {
title_col_data = $("<th></th>").appendTo( "#syain" );
title_col_data.text( key );
});
}
// テーブルに行を追加
row_data = $("<tr></tr>").appendTo( "#syain" );
// 列のループ ( <td></td> )
$.each( value, function( key, val ) {
// 行に列を追加
col_data = $("<td></td>").appendTo( row_data );
col_data.text( val );
});
});
}
</script>
<h3>社員一覧</h3>
<input id="cond" type="text">
<input id="btn" type="button" value="検索">
<div class="table-responsive">
<table id="syain"></table>
</div>
twitter-bootstrap は、スマホでテーブルが横スクロールする効果で使用しています( class="table-responsive" )。
デモページ デモページでは、いろいろなオプションを設定した Datepicker のフィールドの動きを確認できます。これらのフィールドは、デフォルトのオプションとして以下のようなものを設定済みです。
var datepicker_option = {
dateFormat: 'yy/mm/dd',
dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
monthNames: ['１月', '２月', '３月', '４月', '５月', '６月', '７月', '８月', '９月', '１０月', '１１月', '１２月'],
showMonthAfterYear: true,
yearSuffix: '年',
changeYear: true,
showAnim: 'fadeIn',
yearRange: "c-70:c"
}
このオプションは、日本語としてカレンダーを利用する為に最低限必要なものです。※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year { width: 70px!important; }yearRange: "c-70:c" のオプションは、c が現在の年を示す相対範囲指定です。デモページでは、2) cは当年 c-3:c+3 にあたります。そして、1) dateRangeなし は、そのオプションを削除したもので、その場合は "c-10:c+10" を指定したのと同じ事になります。 ▼ "c-3:c+3"▼ jQuery を使用して、JSON オブジェクトのクローンを作成
var datepicker_option1 = $.extend(true, {}, datepicker_option);
delete datepicker_option1.yearRange;
$("#date_picker1_fld").datepicker( datepicker_option1 );
※ デモで複数のオプション作成の為、$.extend を使用しています altField, altFormat, appentText, autoSize altField と altFormat は、alternate(代わりの) フィールドの定義です。altField で右横にあるフィールドを id で参照します。altFormat では、そのフィールドで表示するフォーマットを指定します(ここでは日本語を使用しています。) さらに、appentText で、DatePicker フィールドの後ろにテキストを追加し、autoSize で jQuery UI にDatePicker フィールドの幅を調整させます。
var datepicker_option3 = $.extend(true, {}, datepicker_option);
datepicker_option3.altField = "#date_picker3_fld_alt";
datepicker_option3.altFormat = "yy年mm月dd日";
datepicker_option3.appendText = " altFormat で日本語表現 ";
datepicker_option3.autoSize = true;
$("#date_picker3_fld").datepicker( datepicker_option3 );
※ 二番目のフィールドは固定で 120px を指定しており、３番目のフィールドが autoSize です。 ボタンでカレンダーを表示させる 通常では、フィールドにカーソルが移動するとカレンダーが表示されますが、それでは他の画面部分が隠されてしまって、エンドユーザが操作しづらい場合があります。そういう場合にボタンを追加してその操作を行う方法です。ここでは、その目的のために showOn = "button" と buttonText = "開く" を指定しています。(showOn では、both というオプションがありますが、それでは意味が無いので button のみの動作、また、buttonText では無く buttonImage で画像ボタンにする事もできます) 月を変更可 ★重要 : 表示したい月表現を monthNamesShort = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"] のように設定する必要がありました 誕生日の指定等、連続していない年月の指定の為、月をコンボボックスに変更します。※ ▼ コンボボックスの幅を以下で最適化しています
.ui-datepicker-month, .ui-datepicker-year { width: 70px!important; }※ 月を変更可にした場合、これをしておかないと、年と月が入りきらずに二段になってしまいます。 前後の月を表示して選択可能にする これは、現実のカレンダーのように、表示できる場合は前月の最後と次月の最初を表示して選択できるようにするものです。そのために showOtherMonths = true と selectOtherMonths = true を両方設定しています。jQuery.ajax による送信処理
// *************************************
// 送信 <input type="submit">
// *************************************
$("#frm").submit( function(event){
// 本来の送信処理はキャンセル
event.preventDefault();
// 入力部分をプロテクト
$("fieldset").eq(0).prop("disabled", true);
// エラーメッセージエリアをクリア
$(".error").next().text( "" );
// 結果の表示エリアを全てクリア
$("#result").html( "" );
// 新規送信用オブジェクト
var formData = new FormData();
formData.append("datepicker1", $("#date_picker1_fld").val() );
formData.append("datepicker2", $("#date_picker2_fld").val() );
formData.append("datepicker3", $("#date_picker3_fld").val() );
formData.append("datepicker3_alt", $("#date_picker3_fld_alt").val() );
formData.append("datepicker4", $("#date_picker4_fld").val() );
formData.append("datepicker5", $("#date_picker5_fld").val() );
formData.append("datepicker6", $("#date_picker6_fld").val() );
// **************************************
// サーバ呼び出し
// **************************************
$.ajax({
url: "./post_action.php",
type: "POST",
data: formData,
processData: false, // jQuery がデータを処理しないよう指定
contentType: false // jQuery が contentType を設定しないよう指定
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
options.info("送信処理が完了しました");
})
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
options.info("送信処理を失敗しました");
})
.always(function() {
// 入力部分のプロテクトを解除
$("fieldset").eq(0).prop("disabled", false);
})
;
} );
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
