イラストAC より無料でダウンロードできます。 昼間の風景は DAZ3D : 晴天の中世建築風の街の風景 / Harpsburg for Daz Studio からダウンロードできます
|
|
2020年06月28日
2020年06月07日
clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
デモページ 1) TABLE データを TAB と 改行で作成して Excel に貼り付けて使用し、 ページ上のデータを加工して最終的にクリップボードにコピーするので、text プロパティにイベントを設定する 2) 入力した内容をそのままクリップボードに転送する data-clipboard-target で対象の INPUT を設定する( とても簡単 )
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script>
// clipboard.js が読み取る変数
var clipbpardText = "";
$(function(){
// **********************************************
// テーブルデータ用クリップボード処理オブジェクト
// **********************************************
var clipboard =
// クリップボードへの転送のトリガとなるボタンを第一引数に指定
new ClipboardJS('#action1' , {
text: function(trigger) {
// #action1
console.dir(trigger);
// clipboard.js に渡す( このデータがクリップポードに転送される )
return clipbpardText;
}
});
// **********************************************
// クリップボードへの転送に成功した時に
// 実行されるイベント( 無くても良い )
// **********************************************
clipboard.on('success', function(e) {
alert("テーブルデータをクリップボードにコピーしました");
});
$("#action1").on("click", function(){
// **********************************************
// clipbpardText にクリップボードに転送したい文字列をセットする
// **********************************************
var work = "";
$("#tbl tr").each( function( row_cnt ){
$(this).find("td,th").each(function( col_cnt ){
if ( col_cnt != 0 ) {
work += "\t";
}
work += $(this).text();
});
work += "\r\n";
});
clipbpardText = work;
})
// **********************************************
// テキストボックス用クリップボード処理オブジェクト
// data-clipboard-target 要素で 対象を設定
// **********************************************
var clipboard2 = new ClipboardJS('#action2');
// **********************************************
// クリップボードへの転送に成功した時に
// 実行されるイベント( 無くても良い )
// **********************************************
clipboard2.on('success', function(e) {
alert("テキストボックスの内容をクリップボードにコピーしました");
});
});
</script>
</head>
<body>
<div id="head">
<input type="button" id="action1" value="クリップボードへコピー">
<input type="button" id="action2" value="クリップボードへコピー" data-clipboard-target="#text">
<input type="text" id="text" value="このテキスト">
</div>
<div id="extend">
<table class="table">
<tbody id="tbl">
<tr><th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th></tr>
<tr><td>0001</td><td>山田 太郎</td><td>ウラオカ トモヤ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-28</td><td>400000</td><td>9000</td><td>0001</td><td>2012/03/21</td></tr>
<tr><td>0002</td><td>山村 洋代</td><td>ヤマムラ ヒロヨ</td><td>0003</td><td>1</td><td>2005-06-17</td><td>2005-09-18</td><td>300000</td><td></td><td>0001</td><td>2001/01/02</td></tr>
<tr><td>0003</td><td>多岡 冬行</td><td>タオカ フユユキ</td><td>0002</td><td>0</td><td>2005-08-14</td><td>2005-11-14</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
<tr><td>0004</td><td>高田 冬美</td><td>タカタ フユミ</td><td>0003</td><td>1</td><td>2005-06-13</td><td>2005-10-05</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
<tr><td>0005</td><td>内高 友之</td><td>ウチタカ トモユキ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-10</td><td>150000</td><td></td><td></td><td>2001/01/01</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
