Axure RPチュートリアル例:選択して、すべての結果の選択を解除

Axure RP 9マックプロトタイプ設計ソフトウェアは、設計者が素早くアプリケーションを作成することができ、またはウェブサイトのワイヤーフレーム、フローチャート、プロトタイプや仕様を設計し、ローからハイ視覚的忠実性とインタラクティブにフルレンジ構築し、業界をリードするインタラクティブな製品のプロトタイピングソフトウェアです!XiaobianはAxure RPの選択を行うと、すべての結果の選択を解除する方法を確認するためにあなたを取ります。

図1に示すように、ケースの結果:

初期状態では/全体の選挙をキャンセルします:

9d2dd8d5a2a6409fba37484080e19231.jpg

どちらのオプションも選択後にキャンセルされます。

1609e48f8bab4089aa876d1fcf939c29.jpg

選択/すべてのラジオを選択した場合:

206d581b853c475b88760b804a59fdf4.jpg

図2に示すように、ケースの説明:

隣接する列のリストは、背景色を交互にしている、リストボックスがクリックされ、チェックボックス、グレー表示ボックスがチェックされ、行全体、未チェックの復元デフォルトのカラーチェックすることができるスイッチング状態;リストボックスが完全に確認され、下部には、リストを放置した場合、すべてのチェックボックスがオンの状態の変化であり、リストボックス未チェックがある場合には、すべてのチェックボックスを変更します未チェック状態であり、すべてのチェックボックスがチェックされているすべてのチェックボックスのリストを確認する積極的にされている場合、すべてのチェックボックスをオフに取り組み、すべてのチェックボックスの一覧でありますチェックを外し。

また、リストは、行をダブルクリックすると、この場合、動作の再生中に、曲の名前の前に再生アイコンを表示し、類似した曲を聴くと、ボタンカバーのシーンを見てください。

コンポーネントの準備:

ページ:

b40faf35403340c4949be338b06d6b5b.jpg

リピータ「プレイリスト」で:

ac0293740858484985e7dc3d53c2d7f7.jpg

リピータ「プレイリスト」のデータセット:

8dd47374dc7c4487ad59ec3b5584e432.jpg

リピータ「プレイリスト」スタイルの設定:

0e0ec291972f4f3e874c894776bb530f.jpg

名前は含まれています:

ボックス(のチェックボックスを選択します):のSelectAll

テキストラベル(リストボックスのレコード数をチェックされている):SelectNumber

(曲のリストのための)リピータ:プレイリスト

(同じ曲情報操作部用)組成:InfoGroup

これらの組み合わせ(他のボタン部に対して同じ操作):ButtonGroupを

写真(ステータス表示を再生するためのスペクトラムのアイコン):SpectrumIcon

写真(アイコンを表示するためのMVの歌):MVIcon

(リストの各行のチェックボックス)ボックスをチェックします:のSelectItemを

(ソング名を表示するために使用される)テキストラベル:SongName

(アーティスト名)テキストラベル:SingerName

テキストラベル(アルバム名を表示するために使用):ALBUMNAME

長方形(灰色の背景セクションの曲情報):BackgroundShape

3、分析のアイデア:

完成歌曲列表的常规信息部分;(操作步骤1)

为播放状态的歌曲显示更多的按钮;显示频谱图标,将歌曲名称置于频谱图标右侧,显示整行灰色的背景;(操作步骤2)

为有MV的歌曲显示MV的图标,MV的图标在歌曲名称右侧间距5像素的位置;(操作步骤3)

双击歌曲列表中任何一项时,取消其它歌曲的播放状态,并将当前歌曲改变为播放状态;(操作步骤4~5)

勾选歌曲列表中任何一项的复选框时,整行显示灰色背景,勾选数量记录增加1;(操作步骤6)

如果勾选数量记录等于列表项的总和,勾选复选框“SelectAll”;(操作步骤7)

取消勾选歌曲列表中任何一项的复选框时,勾选数量记录减少1;取消勾选复选框“SelectAll”;(操作步骤8)

如果歌曲列表中取消勾选的项不是播放状态,取消显示整行的灰色背景;(操作步骤9)

在单击复选框“SelectAll”时判断复选框是否被勾选,如果该复选框被勾选则勾选歌曲列表中所有的复选框;否则,取消勾选歌曲列表中所有的复选框;这里需要注意的是,全选与取消全选只有在主动勾选或取消勾选复选框“SelectAll”时才能够生效,所以触发事件要选择复选框“SelectAll”的【鼠标单击时】而不是【选中时】和【取消选中时】。(操作步骤10~11)

4、操作步骤:

1、为中继器“PlayList”的【每项加载时】事件添加“用例1”,设置动作为【设置文本】;勾选元件“SongName”,设置文本为【值】“[[Item. SongName]]”;勾选元件“SingerName”,设置文本为【值】“[[Item. SingerName]]”;勾选元件“AlbumName”,设置文本为【值】“[[Item.AlbumName]]”;

2、继续为中继器“PlayList”的【每项加载时】事件添加“用例2”,设置条件判断【值】“[[Item.IsPlay]]”【==】【值】“True”;设置满足条件时的动作为【显示】组合“ButtonGroup”,【显示】图片“SpectrumIcon”,【移动】元件“SongName”【经过】{x}“25”{y}“0”的位置,【选中】元件“BackgroundShape”;

3、继续为中继器“PlayList”的【每项加载时】事件添加“用例3”,设置条件判断【值】“[[Item.MV]]”【==】【值】“Yes”;设置满足条件时的动作为【显示】图片 “MVIcon”,【移动】图片“MVIcon”【到达】{x}“[[s.x+s.text.length*12+5]]”{y}“[[Target.y]]”的位置;公式中“s”为局部变量,其内容为元件“SongName”的对象实例;这里要注意的是:因为,歌曲名称长度不一,所以不能移动MV的图标到固定的位置,在这里移动公式“[[s.x+s.text.length*12+5]]”的含义为“歌曲名称元件的x轴坐标值+歌曲名称字符数量*字符的宽度+5像素”;

事件交互设置:

93e7d8125f8a4724acd682e3dd5b3bc4.jpg

4、为组合“InfoGroup”的【鼠标双击时】事件添加“用例1”,设置动作为【更新行】于中继器“PlayList”,勾选【条件】,设置条件为“True”(表示全部符合条件),【选择列】为“IsPlay”,设置列的【Value】(值)为“False”;这一步完成了取消列表中所有歌曲的播放状态;

5、继续上一步,添加动作【更新行】于中继器“PlayList”,勾选【This】,【选择列】为“IsPlay”,设置列的【Value】(值)为“True”;这一步完成了将当前歌曲设置为播放状态;

事件交互设置:

3e9a731d466b4f90a5413d9013fb8d5d.jpg

6、为复选框“SelectItem”的【选中时】事件添加“用例1”,设置动作为【选中】元件“BackgroundShape”;【设置文本】于元件“SelectNumber”为【值】“[[Target.text+1]]”;公式“[[Target.text+1]]”表示目标元件文字加1;

7、为复选框“SelectItem”的【选中时】事件添加“用例2”,添加条件判断【元件文字】于“SelectNumber”【==】【值】“[[Item.Repeater.visibleItemCount]]”;设置满足条件时的动作为【选中】元件“SelectAll”;公式“[[Item.Repeater.visibleItemCount]]”的返回值为当前项所在的中继器的可见项数量;完成动作设置后,在用例名称上点击<鼠标右键>,选择菜单中最后一项,将用例的条件判断由“Else If”转换为“If”;

8、为复选框“SelectItem”的【取消选中时】事件添加“用例1”,设置动作为【设置文本】于元件“SelectNumber”为【值】“[[Target.text-1]]”;【取消选中】元件“SelectAll”;公式“[[Target.text-1]]”表示目标元件文字减1;

9、为复选框“SelectItem”的【取消选中时】事件添加“用例2”,添加条件判断【值】“[[Item.IsPlay]]”【==】【值】“False”;设置满足条件时的动作为【取消选中】元件“BackgroundShape”;完成动作设置后,在用例名称上点击<鼠标右键>,选择菜单中最后一项,将用例的条件判断由“Else If”转换为“If”;

事件交互设置:

73155fb80e8c44f4a49920b6ad6963a2.jpg

10、为元件“SelectAll”的【鼠标单击时】事件添加“用例1”,设置条件判断【选中状态】于“当前元件”(This)【==】【true】,设置满足条件时的动作为【选中】元件“SelectItem”;

「実施例2で使用される場合、」条件は、ステップ10 11のセットを満たさない場合に、イベントが追加されると、要素が「のSelectAll」続ける[クリック]、操作が行われた選択を解除] [要素「のSelectItem。」

イベント対話の設定:

de34f6788c9a4645accb47d4f7f43891.jpg

選択して、すべての結果の選択を解除:我々はAxure RPチュートリアルの例をもたらすように、これらは小さなシリーズです。より詳細な、便利な機能やソフトウェアのバージョンAxure RP 9Mac取得があり、Macdown.comが自分でそれのいくつかを探る来ます。


おすすめ

転載: blog.51cto.com/14495678/2430071