Coding Note: 1月 2016

2016年1月20日星期三

[AngularJS] 禮品清單

	<!DOCTYPE html>

	<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
	<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
	<title></title>

	<script type="text/javascript">

	var app = angular.module('app', []);

	app.controller('GiftCtrl', function ($scope, $http) {
	$scope.giftList = [
	{ item: 'item1', gift: 'GIFT' }, { item: 'item2', gift: 'GIFT' },
	{ item: 'item3', gift: 'GIFT' }, { item: 'item4', gift: 'GIFT' },
	{ item: 'item5', gift: 'GIFT' }, { item: 'item6', gift: 'GIFT' },
	{ item: 'item7', gift: 'GIFT' }, { item: 'item8', gift: 'GIFT' }
	];

	$scope.giftList2 = [
	{ item: 'item1', gift: 'GIFT' }, { item: 'item2', gift: 'GIFT' },
	{ item: 'item3', gift: 'GIFT' }, { item: 'item4', gift: 'GIFT' },
	{ item: 'item5', gift: 'GIFT' }, { item: 'item6', gift: 'GIFT' },
	{ item: 'item7', gift: 'GIFT' }, { item: 'item8', gift: 'GIFT' }
	];
	});

	$scope.whatColorIsIt = function (index) {
	if(index % 2 == 0)
	{
	return "azure";
	}
	else {
	return "emerald";
	}
	}
	</script>
	<style type="text/css">

	#container { text-align: center; margin: 20px; }
	h1{
	color: #e50;
	text-shadow: 0 2px white;
	text-align: center;
	margin-top: 10px;

	/color: white;/
	}

	a { text-decoration: none; color: #EC5C93; }

	.bar-main-container {
	margin: 10px auto;
	width: 500px;
	height: 80px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-family: sans-serif;
	font-weight: normal;
	font-size: 0.8em;
	color: #FFF;
	}

	.wrap {
	padding: 8px;
	text-align: center;
	box-sizing: border-box;
	}

	.bar-percentage {
	float: left;
	background: rgba(0,0,0,0.13);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 13px 14px 12px 10px;
	width: 20%;
	height: 30px;
	margin-top: 5px;
	/margin-right: 10px;/

	}

	.bar-container {
	float: right;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	height: 10px;
	background: rgba(0,0,0,0.13);
	width: 78%;
	margin: 12px 0px;
	overflow: hidden;
	line-height: initial;
	}
	.itemFont{
	margin-left:10px;
	font-size:20px;
	line-height: initial;
	}
	.giftFont {
	color:white;
	font-size:24px;
	line-height: initial;
	margin-left:10px;
	}

	.img {
	background-color:#EFC32F ; /#026873/
	background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
	linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
	linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
	linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
	background-size: 13px, 29px, 37px, 53px;
	}

	.check {
	background-color: #9c9; /E4B363/
	background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(255,255,255, .1)), color-stop(.5, rgba(255,255,255, .1)), color-stop(.5, rgba( 0, 0, 0, .1)), to(rgba( 0, 0, 0, .1))), -webkit-gradient( linear, left top, right top, from(rgba(255,255,255, .1)), color-stop(.5, rgba(255,255,255, .1)), color-stop(.5, rgba( 0, 0, 0, .1)), to(rgba( 0, 0, 0, .1)));
	background-image: -moz-linear-gradient( top, rgba(255,255,255, .1) 0, rgba(255,255,255, .1) 50%, rgba( 0, 0, 0, .1) 50%, rgba( 0, 0, 0, .1) 100%), -moz-linear-gradient( left, rgba(255,255,255, .1) 0, rgba(255,255,255, .1) 50%, rgba( 0, 0, 0, .1) 50%, rgba( 0, 0, 0, .1) 100%);
	background-size: 8px 8px;
	-webkit-background-size: 8px 8px;
	-moz-background-size: 8px 8px;
	}


	/* COLORS */
	.azure { background: #38B1CC; }
	.emerald { background: #2CB299; }
	.violet { background: #8E5D9F; }
	.yellow { background: #EFC32F; }
	.red { background: #E44C41; }
	</style>
	</head>
	<body class="img">
	<form id="form1" runat="server">
	<div>
	<h1 >禮品清單</h1>
	</div>
	<div>
	<div class="well span7 check " style="margin-top:20px;" ng-controller="GiftCtrl">
	<div ng-repeat="g in giftList" id="bar-2" class="bar-main-container" ng-class="{{$index}} % 2 == 0 ? 'azure' :'red'">
	<div class="wrap">
	<div class="bar-percentage" >
	<span class="itemFont">{{g.item}}</span>
	</div>
	<span class="giftFont">{{g.gift}}{{$index+1}}</span>
	</div>

	</div>
	</div>

	<div class="well span7 check" style="margin-top:20px;" ng-controller="GiftCtrl">
	<div ng-repeat="g2 in giftList2" id="bar-2" class="bar-main-container" ng-class="{{$index}} % 2 == 0 ? 'red' :'azure'">
	<div class="wrap">
	<div class="bar-percentage" >
	<span class="itemFont" >{{g2.item}}</span>
	</div>
	<span class="giftFont">{{g2.gift}}{{$index+1}}</span>
	</div>

	</div>
	</div>

	</form>
	</body>
	</html>

view raw html hosted with ❤ by GitHub

CSS 參考 percentBar 更多Percent Bar

2016年1月19日星期二

[AngularJS] ng-class

ng-class 下條件判斷，調整class

ng-class="{{$index}} % 2 == 0 ? 'green' :'red'"

CSS3 素材網

用CSS3 畫出各種不同的圖騰，可以當背景用

CSS3 Patterns Gallery

社群網站的按鈕樣式

Button in CSS 3

oxxo studio

CSS3 語法教學

2016年1月10日星期日

[C#]DataTable select 條件搜尋和排序

塞選出 Name = Ash , 用ID和Age 做排序

DataRow[] tmp = MyDataTable.Select("Name='Ash' ", "ID,Age");

2016年1月8日星期五

[Android] WallpaperManager 設定桌布

簡單記錄一下我有實作的部分

	setPaperWell.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	WallpaperManager wallpaperManager = WallpaperManager.getInstance(getActivity().getApplicationContext());

	//imageView 轉 Bitmap
	//ImageView iv = (ImageView) getActivity().findViewById(R.id.imageView);
	try {
	//wallpaperManager.setBitmap(iv.getDrawingCache());
	wallpaperManager.setResource(select);
	Toast.makeText(getActivity(), "桌布設定成功!", Toast.LENGTH_SHORT).show();
	}
	catch(IOException e)
	{
	e.printStackTrace();
	Toast.makeText(getActivity(), "Wallpaper error!", Toast.LENGTH_SHORT).show();
	}
	}

	});

view raw WallpaperManager.java hosted with ❤ by GitHub

按下設成桌布就完成了... 儲存圖片的功能+設定桌布完整版的CODE

2016年1月6日星期三

[MVC]CheckBox複選、全選、取消

我忘了有沒有寫過類似的東西剛好今天有空，索性整理一下吧
JQUERY

         // Tab名稱的全選和取消
         $("#AllTab").change(function () {
             if ($(this).is(":checked")) {
                 $("[id*=chkTab] input").prop("checked", true);
             } else {
                 $("[id*=chkTab] input").removeAttr("checked");
             }
         });
         $("[id*=chkTab] input").on("change", function () {
 
             //全部都選到了,"全部"這個選項打勾,反之,則取消
             if ($("[id*=chkTab] input").length == $("[id*=chkTab] input:checked").length) {
                 $("#AllTab").prop("checked", true);
             }
             else {
                 $("#AllTab").removeAttr("checked");
             }
         });

View 順便講一下好了，checkList 這個是用來記錄CheckBox選取的狀態 MVC 才可以這樣用......

//這段程式碼可以不用理他，是POSTBACK 回來時
//想讓畫面保留勾選的項目
@{ 
    string[] checkList = new string[7];//最後一個存放 全部 的狀態
    if (splitFilter[1] != null)
    {
      string[] splitck = splitFilter[1].TrimEnd(',').Split(',');
      if (splitck[0] != "-1")
      {
         foreach (string i in splitck)
         {
           checkList[int.Parse(i) - 1] = "checked";
          }
      }
                                 
    }
 }

Checkbox是長這樣的

<input type="checkbox" value="1" @checkList[1]><label>AA</label>

全部

Controller

接到勾選的Tab後，去DB搜尋
之前寫的不太簡潔，順帶記錄一下新寫法

if (Tag != "-1") 
{
  List TagCondition = new List();
  foreach (var t in Tag.Substring(0, Tag.Length - 1).Split(','))
  {
     TagCondition.Add(Convert.ToInt32(t));
   }
   product = product.Where(x =>TagCondition.Contains(x.TabName));
}

2016年1月20日 星期三