samatic-ui(六)博客发布页面

1，输入框与“下拉标签”联合使用

<div class="ui right labeled input">
			<input type="text" placeholder="域名"/>
			<div class="ui dropdown label">
				<div class="text">.com</div>
				<i class="dropdown icon"></i>
				<div class="menu">
					<div class="item">.com</div>
					<div class="item">.cn</div>
					<div class="item">.net</div>
				</div>
			</div>
		</div>

**效果图

2.“下拉标签”与“输入框”联合使用

<div class="field">
				<div class="ui left labeled input">
				      <div class="ui dropdown label">
				      	<div class="text">原创</div>
				      	<i class="dropdown icon"></i>
				      	<div class="menu">
				      		<div class="item">原创</div>
				      		<div class="item">转载</div>
				      	</div>
				      </div>
				    <input type="text" placeholder="标题"/>
				</div>
			</div>

**效果图

本例子中

在这里插入代码片

3.一个区域存放两个充满容器的“标签”和“下拉输入框”的联合使用

<div class="two  fields">
				<div class="field">
					<!-- action可使标签和下拉框无缝连接 -->
					<div class="ui right labeled action input">
						<div class="ui teal label">分类</div>
						<!-- fluid可使下拉框充满整个宽度 -->
						<div class="ui fluid selection dropdown">
							<!-- <input type="hidden" name="type" />为选择域 -->
							<input type="hidden" name="type" />
							<i class="dropdown icon"></i>
							<!-- <div class="default text">默认说明 ""提示性文字-->
							<div class="default text">错误日志</div>
							<div class="menu">
								<!-- data-value自定义属性，将来要传到后端的值 -->
								<div class="item" data-value="1">错误日志</div>
								<div class="item" data-value="1">开发者手册</div>
							</div>
						</div>
					</div>
				</div>
				<div class="field">
					<div class="ui  labeled action input">
						<div class="ui teal label">标签</div>
						<!-- multiple可使输入框中选中多个标签search可实现搜索某个标签的功能 -->
						<div class="ui fluid selection multiple search dropdown">
							<!-- <input type="hidden" name="type" />为选择域 -->
							<input type="hidden" name="type" />
							<i class="dropdown icon"></i>
							<!-- <div class="default text">默认说明 ""提示性文字-->
							<div class="default text">标签</div>
							<div class="menu">
								<!-- data-value自定义属性，将来要传到后端的值 -->
								<div class="item" data-value="1">java</div>
								<div class="item" data-value="2">css</div>
							</div>
						</div>
					</div>
				</div>
			</div>

**效果图片



4.使用<div class="ui selection dropdown">此类组件时必须要在jQuery中设置，否则点击下拉框没反应

<script type="text/javascript">
			$('.dropdown').dropdown();
		</script>

5.表单验证具体用法详见：https://zijieke.com/semantic-ui/behaviors/form.php

本例子

<script type="text/javascript">
			
			$('.ui.form').form({
				fields:{
					title:{
						identifier:'title',
						rules:[{
							// type:'empty',表示验证方式非空
							type:'empty',
							// prompt表示当出错时的提示信息
							prompt:'标题：请输入博客标题'
						}]
					}
				}
			});
		</script>

然后指定区域使用required

<div class="required field">

接着在底部建一个存放提示错误信息的div

<div class="ui error message"></div>

**效果图

标题栏为红色