Axure教程:如何實現(xiàn)評論的限制與清空

摘要:評論已經(jīng)作為內(nèi)容型產(chǎn)品的一個基礎功能,那么評論功能中經(jīng)常使用的字數(shù)限制妓局,評論內(nèi)容清除功能是如何通過原型實現(xiàn)呢总放?本文就實現(xiàn)這些功能交互的效果來為大家分享設計的思路與方法。

準備元件跟磨,繪制線框圖

首先需要準備一個矩形框间聊、多行文本框、文本標簽及矩形按鈕抵拘,并為這些元件命名哎榴。(養(yǎng)成命名的好習慣,將有助于交互動作的配置及元件的快速查找)隱藏多行文本框的邊框僵蛛,默認隱藏矩形按鈕尚蝌,矩形按鈕內(nèi)輸入文字“清除”。假設我們限制評論內(nèi)容為100字以內(nèi)充尉,則文本標簽中輸入100/100飘言,前面的100為剩余字數(shù),后面的100為字數(shù)限制驼侠。

準備好元件姿鸿,繪制線框圖

交互動作設置

多行文本框設置文本改變事件,交互設置方法如下:

1)如果文本內(nèi)容為空倒源,則隱藏“一鍵清除”按鈕

2)如果文本內(nèi)容不為空苛预,則顯示“一鍵清除”按鈕

3)通過插入函數(shù)[[This.text.substr(0,100)]]來實現(xiàn)對文本字數(shù)限制的要求,即限制在0~100字之間笋熬;通過插入函數(shù)[[100-This.text.length]]/100實現(xiàn)對文本內(nèi)容的限制功能热某,this.text.length用于監(jiān)測文本的字數(shù)

交互設置如下圖所示:

文本改變事件
限制文本字數(shù)&監(jiān)測文本字數(shù)

接著,需要監(jiān)測文本框的焦點,我們?yōu)槲谋究蛟O置獲取焦點和失去焦點事件

獲取焦點:如果文本框不為空昔馋,則顯示“一鍵清除”按鈕

失去焦點:如果文本框為空筹吐,則隱藏“一鍵清除”按鈕

交互設置如下圖所示:

獲取/失去焦點

最后,我們在為“一鍵清除”按鈕秘遏,設置鼠標單擊事件丘薛,點擊按鈕時,文本框內(nèi)容為空垄提,交互動作配置如下圖所示:

清除文本內(nèi)容

至此一個帶有字數(shù)限制的評論功能原型已經(jīng)完成榔袋,需要源文件的同學可以在評論區(qū)留言。如果覺得我的分享對你有幫助铡俐,不妨給個贊賞凰兑,不打賞也沒關系,你的關注也是我持續(xù)分享的動力审丘。

如果你對Axure或原型設計有興趣吏够,希望系統(tǒng)性地學習Axure知識,掌握更多Axure使用技巧滩报;或者希望通過臨摹交互案例锅知,進一步提升高保交互設計能力。請點擊下方關注按鈕脓钾,查看更多連載作品售睹。

點擊獲取案例作品源文件

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市可训,隨后出現(xiàn)的幾起案子昌妹,更是在濱河造成了極大的恐慌,老刑警劉巖握截,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件飞崖,死亡現(xiàn)場離奇詭異,居然都是意外死亡谨胞,警方通過查閱死者的電腦和手機固歪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來胯努,“玉大人牢裳,你說我怎么就攤上這事∫杜妫” “怎么了蒲讯?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長恬汁。 經(jīng)常有香客問我伶椿,道長,這世上最難降的妖魔是什么氓侧? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任脊另,我火速辦了婚禮,結(jié)果婚禮上约巷,老公的妹妹穿的比我還像新娘偎痛。我一直安慰自己,他們只是感情好独郎,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布踩麦。 她就那樣靜靜地躺著,像睡著了一般氓癌。 火紅的嫁衣襯著肌膚如雪谓谦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天贪婉,我揣著相機與錄音反粥,去河邊找鬼。 笑死疲迂,一個胖子當著我的面吹牛才顿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播尤蒿,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼郑气,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了腰池?” 一聲冷哼從身側(cè)響起尾组,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎巩螃,沒想到半個月后演怎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡避乏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年爷耀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拍皮。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡歹叮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出铆帽,到底是詐尸還是另有隱情咆耿,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布爹橱,位于F島的核電站萨螺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜慰技,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一椭盏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吻商,春花似錦掏颊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至柒爸,卻和暖如春准浴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捎稚。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工兄裂, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人阳藻。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓晰奖,卻偏偏與公主長得像,于是被迫代替她去往敵國和親腥泥。 傳聞我的和親對象是個殘疾皇子匾南,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,451評論 0 17
  • 1蛔外、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,988評論 3 119
  • 1蛆楞、窗體 1、常用屬性 (1)Name屬性:用來獲取或設置窗體的名稱夹厌,在應用程序中可通過Name屬性來引用窗體豹爹。 ...
    Moment__格調(diào)閱讀 4,562評論 0 11
  • 數(shù)學二廣角---搭配 本節(jié)課由于其思維方法的新穎性與獨特性,學習時要遵循“不重復不漏”的原則矛纹,它又...
    李宜秀閱讀 147評論 0 0
  • 浮夢未歇閱讀 125評論 0 0