Andy Computer Blog

2019年4月11日星期四

Bootstrap

bootstrap Office document 1

CH1 Installall Bootstrap

Bootstrap Office :
https://getbootstrap.com/docs/4.0/getting-started/download/

解壓縮後有 CS 及 JS 資料夾

此外還需下載 jquery https://jquery.com/download/

# hello_world.html

<!DOCTYPE html>
<html>
<head>
<title>Good</title>
<link rel="stylesheet" href="css/bootstrap.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
<div class="jumbotron">
 <h1>  Hello word </h1>
 <a class="btn btn-primary btn-lg" href="E" role="button">
  從開始第一章
 </a>
</div>

<script src="js/jquery.js">
<script src="js/bootstrap.js">
</body>
</html>

CH2 table

https://mdbootstrap.com/docs/jquery/tables/sort/
https://v4-alpha.getbootstrap.com/content/tables/

Table width:
https://mdbootstrap.com/docs/jquery/tables/responsive/

bootstrap example:
https://github.com/wenzhixin/bootstrap-table-examples/blob/master/jsfiddle_examples.md

bootstrap sourcecode:
https://github.com/wenzhixin/bootstrap-table-examples
https://github.com/wenzhixin/bootstrap-table/blob/develop/src/bootstrap-table.js

Table getall data :

$('#target').bootstrapTable('getData'); ref 1 2

CH3 bootstrap table for toolbar

--------------------------------------------
office

Attribute: data-toolbar
Type: String/Node
Detail:

A jQuery selector that indicates the toolbar, for example: #toolbar, .toolbar, or a DOM node.
Default: undefined
Example: Custom Toolbar

--------------------------------------
example code

<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-maintain-selected="true"
data-page-size="5"
data-page-list="[5, 25, 50, 100, ALL]"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/"
data-export-options='{
"fileName": "test",
"ignoreColumn": ["state"]
}'
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
----------------------------------------
reference
1 2 3 4 5 mutlipe icon

CH4 Good bootstrap design

https://bootsnipp.com

CH5 GOOD API
https://dotblogs.com.tw/shihgogo/2017/05/31/085635

Hicart

1. reference

1_dateTime
2_example
3_time_example
4_basic_line
5_basic_line_chart

6_all_pic

2019年3月28日星期四

windows python simple web

1. change to D
C:\Documents and Settings\Administrator>cd /d d:\test

2. Run command

python3 -m http.server 8080

3. Open the local firewal of 8080

2019年3月8日星期五

Backbone js

1. What is Backbone js?

It is front program for MVC,

ref: 1_office 2_chinece_good

2. Example

a

UnderScore js

1. What is uderscore?

s a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML p

ref 1 2_good_example 3_office 4_example

2. Example

2_1
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">

</script>

_.each([1, 2, 3], function (ele, idx) {
alert(idx + ":" + ele);
});

2019年2月26日星期二

Bootstrap Content

1. glyphicon (圖示)

<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-asterisk"></span> Asterisk
</a>

ref 1

2019年2月25日星期一

jquery 1.X Function

Online edit: https://playcode.io/online-javascript-editor

0. JS syntax

Variable

declare: var message = "";

Array:

var data1 = {"id":1, "system": "abc", "name": "andy"}

data1.length

Exception:


  try { 
    if(x == "")  throw "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5)  throw "too low";
    if(x > 10)   throw "too high";
  }
  catch(err) {
    message.innerHTML = "Input is " + err;
  }

1. How to post data

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 dataType: dataType,
 success: function(response) {...},
 error: function(jqXHR, textStatus, errorThrown) {...},
});


  $.post("demo_test_post.asp",
    {
      name: "Donald Duck111",
      city: "Duckburg"
    },
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });

ref 1 2

2. Get/Set Form data

function: $("#id").val("contnet")

3. Parse Json

1. Simple parse

var parsedJson = $.parseJSON(jsonToBeParsed);

ref 1

2. Check string is json

function IsJsonString(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}

4. Button Cancel / close

https://stackoverflow.com/questions/6445946/display-yes-and-no-buttons-instead-of-ok-and-cancel-in-confirm-box

5. Div auto

1<div style="width:300px;height:250px;overflow:auto;">

2您要輸入的內容

3</div>

6. Replace the word

function convert(str)
{
  str = str.replace(/&/g, "&amp;");
  str = str.replace(/>/g, "&gt;");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#039;");
  return str;
}

7. Jquery Add and remove class

1



$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

ref 1

8. JS undefined check

if (typeof(myVariable) != "undefined")

if (myVariable) //This throws an error if undefined. Should this be in Try/Catch?

ref 1

9. How to set number

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

11. Set object

1

var object = {
foo: 1,
"bar": "some string",
baz: {
}
};

12. function
1

13. javascript regular

console.log(/^.+\/\d+,.+$/.test('1abc/24,abc'))

var myString = "something format_abc";
var arr = myString.match(/\bformat_(.*?)\b/);
console.log(arr[0] + " " + arr[1]);

ref 1 2

Andy Computer Blog

2019年4月11日星期四

Bootstrap

CH1 Installall Bootstrap

CH2 table

$('#target').bootstrapTable('getData'); ref 1 2

CH3 bootstrap table for toolbar

CH4 Good bootstrap design

Hicart

2019年3月28日星期四

windows python simple web

2019年3月8日星期五

Backbone js

UnderScore js

1. What is uderscore?

2. Example

2019年2月26日星期二

Bootstrap Content

1. glyphicon (圖示)

2019年2月25日星期一

jquery 1.X Function

0. JS syntax

Variable

Array:

Exception:

1. How to post data

2. Get/Set Form data

3. Parse Json

4. Button Cancel / close

5. Div auto

6. Replace the word

7. Jquery Add and remove class

8. JS undefined check

9. How to set number

11. Set object

13. javascript regular

關於我自己

標籤

網誌存檔

2019年4月11日 星期四

CH1 Installall Bootstrap

CH2 table

$('#target').bootstrapTable('getData'); ref 1 2

CH3 bootstrap table for toolbar

toolbar

CH4 Good bootstrap design

2019年3月28日 星期四

2019年3月8日 星期五

1. What is uderscore?

2. Example

2019年2月26日 星期二

1. glyphicon (圖示)

2019年2月25日 星期一

0. JS syntax

Variable

Array:

Exception:

1. How to post data

2. Get/Set Form data

3. Parse Json

4. Button Cancel / close

5. Div auto

6. Replace the word

7. Jquery Add and remove class

8. JS undefined check

9. How to set number

11. Set object

13. javascript regular

關於我自己

標籤

網誌存檔

2019年4月11日星期四

2019年3月28日星期四

2019年3月8日星期五

2019年2月26日星期二

2019年2月25日星期一