From e08b2b319c6471a4f54d4d1545f62d0e12d10c5d Mon Sep 17 00:00:00 2001 From: Yuusaku Miyazaki Date: Mon, 30 Oct 2017 08:49:07 +0900 Subject: [PATCH] Use Bootstrap4 for docs --- index.html | 128 ++++++----- sample/basic.html | 293 +++++++++++++------------ sample/others.html | 324 +++++++++++++++------------- sample/sample.css | 179 ++++++--------- sample/sample.js | 68 +++--- sample/sub-info.html | 265 ++++++++++++----------- sample/text-area-options/index.html | 4 +- sample/text-area.html | 294 +++++++++++++------------ 8 files changed, 804 insertions(+), 751 deletions(-) diff --git a/index.html b/index.html index 7d05ca3..b6736e1 100644 --- a/index.html +++ b/index.html @@ -4,95 +4,87 @@ jquery.ajax-combobox - + - - - -
+
-

jquery.ajax-combobox

-

Basic

+

+ jquery.ajax-combobox
+ Basic +

- -
-
-
-

+

+ + + Amount to display at once + 一度に表示する数 + + + Search multi fields + 複数のフィールドから検索 + + + "OR" search + OR検索へ切り替える + + + Sorting + 並べ替えの規則を決める + + + Language + メッセージの言語 + + + Simple page navi + ページナビをシンプルに +
-
-
Sample
+
+ +
+
+
+ Usage + 使い方 +
+
+
+ + Sample + + +

1st arg: File name to send data by Ajax
2nd arg: Options @@ -125,15 +130,18 @@

JavaScript
-
-
-

- Amount to display at once - 一度に表示する数 -

-
-
-
Sample
+
+
+ Amount to display at once + 一度に表示する数 +
+
+
+ + Sample + + + 
 $('#foo').ajaxComboBox(
   'jquery.ajax-combobox.php',
@@ -146,15 +154,18 @@
-
-
-

- Search multi fields - 複数のフィールドから検索 -

-
-
-
Sample
+
+
+ Search multi fields + 複数のフィールドから検索 +
+
+
+ + Sample + + +

When you set options below, besides its name, you can search by id.

下記のように指定することで、名前の他にIDでも検索できます。

@@ -168,15 +179,18 @@
-
-
-

- "OR" search - OR検索へ切り替える -

-
-
-
Sample
+
+
+ "OR" search + OR検索へ切り替える +
+
+
+ + Sample + + +

Default is "AND". You can change it to "OR".

@@ -194,15 +208,18 @@

-
-
-

- Sorting - 並べ替えの規則を決める -

-
-
-
Sample
+
+
+ Sorting + 並べ替えの規則を決める +
+
+
+ + Sample + + +

Basically, list is ordered by search_field option.
You can change it by order_by option. @@ -225,15 +242,18 @@

-
-
-

- Language - メッセージの言語 -

-
-
-
Sample
+
+
+ Language + メッセージの言語 +
+
+
+ + Sample + + +

Set lang option to choose language used in this plugin's UI.

@@ -252,15 +272,18 @@

-
-
-

- Simple page navi - ページナビをシンプルに -

-
-
-
Sample
+
+
+ Simple page navi + ページナビをシンプルに +
+
+
+ + Sample + + +

Set navi_simple when you want to narrow the width of the ComboBox as much as possible.
Shortcut key is still enable. (Shift+Left/Right) @@ -288,8 +311,12 @@

powered by usamimi.info, Bootstrap

-
- -
+ + + + + + + diff --git a/sample/others.html b/sample/others.html index 9d77502..2437cb3 100644 --- a/sample/others.html +++ b/sample/others.html @@ -4,102 +4,105 @@ Others: jquery.ajax-combobox - + - - - - -
-
+
-

jquery.ajax-combobox

-

Others

+

+ jquery.ajax-combobox
+ Others +

- -
- -
-
-

+

+ + + Select only: Primary key + 送信する値のカラムを変更 + + + After select: Basic + イベント発火の方法 + + + After select: "is_enter_key" + Enterキー押下を検知する方法 + + + Initial value + 初期値設定 + + + JS object instead of DB + DBの代わりにJSオブジェクトを検索する + + + Simple text box + ボタンのないシンプルなテキストボックス + + + Get instance + プラグインのオブジェクトを受け取る +
-
-
Sample
+
+ +
+
+
+ Select only: Basic + セレクト専用の基本 +
+
+
+ + Sample + + +

You can search by free word, but must set the value only from the list.

@@ -139,15 +142,18 @@

-
-
-

- Select only: Primary key - 送信する値のカラムを変更 -

-
-
-
Sample
+
+
+ Select only: Primary key + 送信する値のカラムを変更 +
+
+
+ + Sample + + + 
 $('#foo').ajaxComboBox(
   'jquery.ajax-combobox.php',
@@ -159,15 +165,18 @@
-
-
-

- After select: Basic - イベント発火の方法 -

-
-
-
Sample
+
+
+ After select: Basic + イベント発火の方法 +
+
+
+ + Sample + + + 
 $('#foo').ajaxComboBox(
   'jquery.ajax-combobox.php',
@@ -182,15 +191,18 @@
-
-
-

- After select: "is_enter_key" - Enterキー押下を検知する方法 -

-
-
-
Sample
+
+
+ After select: "is_enter_key" + Enterキー押下を検知する方法 +
+
+
+ + Sample + + +

If text box is not enclosed by form tag and event handler is set
for inputting enter key, when one of the list is selected by enter key
@@ -226,15 +238,18 @@

-
-
-

- Initial value - 初期値設定 -

-
-
-
Sample
+
+
+ Initial value + 初期値設定 +
+
+
+ + Sample + + +

As initial value, set the value of primary_key option.

primary_keyオプションの値を初期値として指定できます。

@@ -248,15 +263,18 @@
-
-
-

- JS object instead of DB - DBの代わりにJSオブジェクトを検索する -

-
-
-
Sample
+
+
+ JS object instead of DB + DBの代わりにJSオブジェクトを検索する +
+
+
+ + Sample + + +

Set JS object instead of the name of server-side file to 1st argument.

Ajax通信するサーバサイドのファイル名の代わりに、JSオブジェクトを第1引数に指定します。

@@ -272,15 +290,18 @@
-
-
-

- Simple text box - ボタンのないシンプルなテキストボックス -

-
-
-
Sample
+
+
+ Simple text box + ボタンのないシンプルなテキストボックス +
+
+
+ + Sample + + +

Remove pull-down button from text box, but functionality is same as default.

プルダウンボタンが非表示なっている以外は、通常のコンボボックスと何ら変わりありません。

@@ -294,15 +315,18 @@
-
-
-

- Get instance - プラグインのオブジェクトを受け取る -

-
-
-
Sample
+
+
+ Get instance + プラグインのオブジェクトを受け取る +
+
+
+ + Sample + + +

You can get an instance of this plugin, and control after apply.
NOTE: Method chaining will be destroyed. @@ -335,8 +359,12 @@

powered by usamimi.info, Bootstrap

-
- -
+ + + + + + + diff --git a/sample/sample.css b/sample/sample.css index 70bcc87..b6eea01 100644 --- a/sample/sample.css +++ b/sample/sample.css @@ -1,110 +1,31 @@ body { background-color: #eee; -webkit-text-size-adjust: 100%; - font-size: 16px; - padding-top: 50px; /* for Bootstrap .navbar-fiexd-top. see http://getbootstrap.com/components/#navbar-static-top */ } - #contents { position: relative; } - -/* for PC */ -@media screen and (min-width:992px) { - nav { - bottom: auto; - box-sizing: border-box; - left: auto; - padding: 0 15px; - position: absolute; - right: auto; - top: 0; - width: 34%; - } - - article { - bottom: auto; - box-sizing: border-box; - left: 34%; - padding: 0 15px; - position: relative; - right: auto; - top: 0; - width: 66%; - } -} - -/* for Smart Phone */ -@media screen and (max-width:991px) { - nav { - bottom: auto; - box-sizing: border-box; - left: auto; - padding: 0 15px; - position: static; - right: auto; - top: auto; - width: 100%; - } - - article { - bottom: auto; - box-sizing: border-box; - left: auto; - padding: 0 15px; - position: static; - right: auto; - top: auto; - width: 100%; - } -} - footer { background: #eee; } - footer div { padding: 16px 0; text-align: right; } - -h6 { - color: #777; - font-size: 14px; -} - #list4 th:nth-child(3) { min-width: 120px; } - -pre { - font-size: 15px; -} - article form a.btn, article form input, article form button { margin-bottom: 4px; } - .green { - color: #0c0; + color: #5cb85c; } .red { color: #d9534f; } - -#jump_to_top { - bottom: 16px; - position: fixed; - right: 16px; -} -#jump_to_top a, -#jump_to_top a:hover { - color: #aa9; - font-size: 2.5em; - text-decoration: none; -} .btn-container { margin-bottom: 1.2em; } @@ -113,11 +34,12 @@ article form button { * 見出し横に表示される、自身へのリンク */ .js-anchor { - font-size: 14px; + font-size: 1em; + left: 4px; + position: absolute; visibility: hidden; - margin-left: -14px; } -.panel-heading:hover .js-anchor { +.card-header:hover .js-anchor { visibility: visible; } .js-anchor, @@ -125,10 +47,39 @@ article form button { .js-anchor:active { color: inherit; } +.octicon { + display: inline-block; + fill: currentColor; + height: 1.4em; + vertical-align: text-bottom; +} +pre { + background-color: #f5f5f5; + border: 1px solid #ccc; + border-radius: 2px; + line-height: 1.2; + margin-bottom: 1em; + padding: 0.5em; +} /** - * Override Bootstrap3 + * Override Bootstrap4 */ +a, +a:active { + color: #486; +} +a:hover, +a:focus { + color: #375; +} +h5 { + font-weight: normal; +} +h6 { + color: #777; + font-size: 14px; +} .jumbotron { background-color: #486; background-image: linear-gradient(30deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260), @@ -139,18 +90,11 @@ article form button { linear-gradient(60deg, #4a8e6c 25%, transparent 25.5%, transparent 75%, #4a8e6c 75%, #4a8e6c); background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; background-size: 80px 140px; - box-shadow: 0 1px 2px #666; color: #fff; text-shadow: 0 1px 1px #333; } -.jumbotron h1.subpage-title small { - color: inherit; -} -/* for PC */ -@media screen and (min-width: 768px) { - .jumbotron h1.subpage-title { - font-size: 48px; - } +.page-title { + font-family: Arial; } .jumbotron-link, .jumbotron-link:hover { @@ -164,28 +108,33 @@ article form button { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } -.panel-primary { - border: 0; - border-radius: 2px; - box-shadow: 0 1px 2px #aaa; - margin-bottom: 30px; +.card { + margin-bottom: 1.5em; } -.panel-primary > .panel-heading { +.card > .card-header { background-color: #777; border-color: #777; border-top-left-radius: 2px; border-top-right-radius: 2px; + color: #fff; } .btn-primary { background-color: #597; border-color: #509472; } -.btn-primary:hover, -.btn-primary[disabled]:focus, -.btn-primary[disabled]:hover { +.btn-primary:disabled, +.btn-primary:disabled:focus, +.btn-primary:disabled:hover { + background-color: #597; + border-color: #509472; +} +.btn-primary:hover { background-color: #486; border-color: #3f8361; } +.btn-primary:not([disabled]):not(.disabled).active, +.btn-primary:not([disabled]):not(.disabled):active, +.show > .btn-primary.dropdown-toggle, .btn-primary:active, .btn-primary:active:hover, .btn-primary:active:focus, @@ -193,14 +142,24 @@ article form button { background-color: #375; border-color: #2d7250; } -a, -a:active { - color: #486; +.btn-primary:not([disabled]):not(.disabled).active, +.btn-primary:not([disabled]):not(.disabled):active, +.show > .btn-primary.dropdown-toggle, +.btn-primary.focus, +.btn-primary:focus { + box-shadow: 0 0 0 0.2rem #6a8; + color: #fff; } -a:hover, -a:focus { - color: #375; +.list-group-item-action { + outline: #fff none 0; } -.navbar { - width: 100%; +.list-group-item-action:focus, +.list-group-item-action:hover, +.list-group-item-action:active { + background-color: #eee; +} + +/* ONLY ajax-combobox */ +body { + padding-top: 3.5rem; /* for Bootstrap navbar */ } \ No newline at end of file diff --git a/sample/sample.js b/sample/sample.js index 3a51a85..34f6963 100644 --- a/sample/sample.js +++ b/sample/sample.js @@ -1,36 +1,34 @@ -$(function() { - // ページ内リンクのスクロール - $(document).on('click', '#contents a[href^="#"]', function(ev) { - ev.preventDefault(); - var href= $(this).attr('href'); - var target = $((href == '#' || href === '') ? 'html' : href); - var position = target.offset().top - 51; // -51 is .navbar height - console.log(position); - $('body, html').animate({scrollTop: position}, 200, 'swing'); - history.pushState('', '', $(this)[0].href); - return false; - }); - - // 英語・日本語切り替え - $('#language button').click(function(ev) { - $('*[class*="lang_"]').hide(); - $('button[id*="lang_"]').removeAttr('disabled'); - $('.' + $(ev.target).attr('id')).show(); - $(ev.target).attr('disabled', 'disabled'); - }); - $('#lang_en').trigger('click'); - - // 追尾スクロール (英語・日本語切り替えよりも後にすること) - $('#index').simpleScrollFollow({ - min_width: 992, - limit_elem: 'article', - upper_side: '.navbar' - }); - - // 見出し横のリンクを生成 - $('section.panel-primary').each(function() { - var link = $(''); - $(link).attr('href', '#' + $(this).attr('id')); - $(this).find('h3.panel-title').prepend(link); - }); +// ページ内リンク(固定グローバルナビに対応) ajax-comboboxのみ +$(document).on('click', '#contents a[href^="#"]', function(ev) { + ev.preventDefault(); + var href= $(this).attr('href'); + var target = $((href == '#' || href === '') ? 'html' : href); + var position = target.offset().top - 54; // -54 is .navbar height + console.log(position); + $('body, html').scrollTop(position); // can not use .animate on jquery.slim + history.pushState('', '', $(this)[0].href); + return false; +}); + +// 英語・日本語切り替え +$('#language button').click(function(ev) { + $('*[class*="lang_"]').hide(); + $('button[id*="lang_"]').removeAttr('disabled'); + $('.' + $(ev.target).attr('id')).show(); + $(ev.target).attr('disabled', 'disabled'); +}); +$('#lang_en').trigger('click'); + +// 追尾スクロール (英語・日本語切り替えよりも後にすること) +$('#js-menu-follow').simpleScrollFollow({ + min_width: 960, + limit_elem: $('article'), + upper_side: '.navbar' +}); + +// 見出し横のリンクを生成 +$('section.card').each(function() { + var link = $('#'); + $(link).attr('href', '#' + $(this).attr('id')); + $(this).find('.card-header').prepend(link); }); \ No newline at end of file diff --git a/sample/sub-info.html b/sample/sub-info.html index b142040..aca7413 100644 --- a/sample/sub-info.html +++ b/sample/sub-info.html @@ -4,93 +4,97 @@ Sub info: jquery.ajax-combobox - + - - - - -
-
+
-

jquery.ajax-combobox

-

Sub info

+

+ jquery.ajax-combobox
+ Sub info +

- -
- -
-
-

+

+ + + Change the title + 表の項目名を変更する + + + Visible field + サブ情報の表示カラムの設定 + + + Hidden field + サブ情報の非表示カラムの設定 + + + Simple + サブ情報の項目名を非表示にする + + + Divert + サブ情報を他で利用する +
-
-
Sample
+
+ +
+
+
+ Basic + サブ情報の基本 +
+
+
+ + Sample + + +

Even though duplicate names exist, you can identify it by sub name.

@@ -108,15 +112,18 @@

-
-
-

- Change the title - 表の項目名を変更する -

-
-
-
Sample
+
+
+ Change the title + 表の項目名を変更する +
+
+
+ + Sample + + +

sub_as option can change the title.

@@ -140,15 +147,18 @@

-
-
-

- Visible field - サブ情報の表示カラムの設定 -

-
-
-
Sample
+
+
+ Visible field + サブ情報の表示カラムの設定 +
+
+
+ + Sample + + +

You can specify visible fields by show_field option which accepts comma separated text.

カンマ区切りもできるshow_fieldオプションで表示フィールドを指定できます。

@@ -167,15 +177,18 @@
-
-
-

- Hidden field - サブ情報の非表示カラムの設定 -

-
-
-
Sample
+
+
+ Hidden field + サブ情報の非表示カラムの設定 +
+
+
+ + Sample + + +

You can specify hidden fields by hide_field option which accepts comma separated text.

カンマ区切りもできるhide_fieldオプションで非表示フィールドを指定できます。

@@ -194,15 +207,18 @@
-
-
-

- Simple - サブ情報の項目名を非表示にする -

-
-
-
Sample
+
+
+ Simple + サブ情報の項目名を非表示にする +
+
+
+ + Sample + + +

You can hide field column by setting 'simple' to sub_info option instead of true.

sub_infoオプションにtrueの代わりに'simple'と指定することでサブ情報の項目名を非表示にできます。

@@ -217,15 +233,18 @@
-
-
-

- Divert - サブ情報を他で利用する -

-
-
-
Sample
+
+
+ Divert + サブ情報を他で利用する +
+
+
+ + Sample + + +

When you select from list, the custom attribute sub_info which contains sub info as JSON is added to the text box
Then you can use Sub-info for other purpose. @@ -248,8 +267,12 @@

powered by usamimi.info, Bootstrap

-
- -
+ + + + + + + diff --git a/sample/text-area-options/index.html b/sample/text-area-options/index.html index 44a4fa9..40f39a2 100644 --- a/sample/text-area-options/index.html +++ b/sample/text-area-options/index.html @@ -3,7 +3,7 @@ -Text area: Multi tag pattern: jquery.ajax-combobox +Text area: Options: jquery.ajax-combobox @@ -41,7 +41,7 @@ -

Text area: Multi tag pattern: jquery.ajax-combobox

+

Text area: Options: jquery.ajax-combobox


diff --git a/sample/text-area.html b/sample/text-area.html index af9aa50..adc6fbc 100644 --- a/sample/text-area.html +++ b/sample/text-area.html @@ -4,97 +4,101 @@ Text area: jquery.ajax-combobox - + - - - - -
-
+
-

jquery.ajax-combobox

-

Text area

+

+ jquery.ajax-combobox
+ Text area +

- -
- -
-
-

+

+ + + No space + タグ補完後に空白を挿入しない + + + JS object instead of DB + DBの代わりにJSオブジェクトを検索する + + + Multi tag pattern + 複数のタグパターン + + + Options + タグごとにオプションを設定する + + + Shorten URL + URLを短縮する + + + Complex + 両方を使う +
-
-
Sample
+
+ +
+
+
+ Basic + テキストエリアの基本 +
+
+
+ + Sample + + +

You can search and complement a tag such as "Twitter hashtag" in textarea.
Set textarea to plugin_type option. @@ -121,15 +125,18 @@

-
-
-

- No space - タグ補完後に空白を挿入しない -

-
-
-
Sample
+
+
+ No space + タグ補完後に空白を挿入しない +
+
+
+ + Sample + + +

In an initial state, a space is inserted after complement.
You can prevent by using space option. @@ -157,15 +164,18 @@

-
-
-

- JS object instead of DB - DBの代わりにJSオブジェクトを検索する -

-
-
-
Sample
+
+
+ JS object instead of DB + DBの代わりにJSオブジェクトを検索する +
+
+
+ + Sample + + + 
 var tagData = [
   {id:1,name:'PhysicalEducation',japanese:'体育学'},
@@ -189,15 +199,18 @@
-
-
-

- Multi tag pattern - 複数のタグパターン -

-
-
-
Sample
+
+
+ Multi tag pattern + 複数のタグパターン +
+
+
+ + Sample + + + 
 $('#foo').ajaxComboBox(
   'jquery.ajax-combobox.php',
@@ -225,15 +238,18 @@
-
-
-

- Options - タグごとにオプションを設定する -

-
-
-
Sample
+
+
+ Options + タグごとにオプションを設定する +
+
+
+ + Sample + + +

You can set following options for every tags.

下記のオプションをタグごとに設定することができます。

@@ -283,15 +299,18 @@
-
-
-

- Shorten URL - URLを短縮する -

-
-
-
Sample
+
+
+ Shorten URL + URLを短縮する +
+
+
+ + Sample + + +

The result of having shortened URL using external service can be made to reflect in text area.
At present, it corresponds only to service of "bit.ly". @@ -314,15 +333,18 @@

-
-
-

- Complex - 両方を使う -

-
-
-
Sample
+
+
+ Complex + 両方を使う +
+
+
+ + Sample + + +

By combining "Complement a tag" and "Shorten URL", the contribution to external service such as "Twitter" becomes convenient.

@@ -363,8 +385,12 @@

powered by usamimi.info, Bootstrap

-
- -
+ + + + + + +